Question

Setup:

I am using JSPs and jQuery. There is a ‘parent’ page which holds 3 tab-pages. On tab 1, there is a form where user have to fill few fields like first name, last name, etc. The user fills the form and moves on to other tabs. On tab 3, I have to show the course name which he entered on tab 1. So essentially I have to pass values between tabs.

Problem:

I can access some of the fields from tab 1 on tab 3, like I have a drop down on Tab 1:

            <div class="dropDownMenu">
                <select id="states">
                    <option value="ca">CA</option>
                    <option value="ny">NY</option>
                </select>
            </div>

I can access this on Tab 3 like:

alert($('#states').text());

Bur I cannot access “course_id” on tab 3. Tab 1 has this:

            <div class="myCourse">
                <label for="course">Course</label>
                <input type="text" name="course_name" id="course_id" value=""/>
            </div>

I want to access course_id on tab 3.
Can somebody tell me how to do this? I am pretty much newbie to jQuery/Ajax, so I might be missing something obvious.

Answer 1

Bind an event that on tabselect we write the value of course_id to our location on tab 3.

jsFiddle: http://jsfiddle.net/UdSUp/4/

$(function() {
    $( "#tabs" ).tabs();
});

$('#tabs').bind('tabsselect', function(event, ui) {
    $("#showCourseID").text($("#course_id").val());
});​