Ajax presents various input values ​​using jquery UI next button click

Question

I am currently working with jquery ui and ajax / post submit tabs without refreshing the page. With some recommendations, I managed to get the div #wmd-preview sent when I clicked the next button. The problem is that I also have other fields that I would like to send at the same time when the next button is clicked on different tabs.

How can I present the input values ​​of various input fields on different tabs when I click the next button? EXAMPLE

(for some tests, I currently have other input fields with keyboard and timer settings)

JS-NEXT / Previous button combined with submit / ajax

 <script> var currentTab = 0; $(function() { var $tabs = $('#tabs').tabs({ disabled: [0, 1, 2] , select: function() { if (currentTab == 0) { $.ajax({ type: "POST", url: "test1.php", data: { "wmdVal": $("#wmd-preview").html() }, success: function(result) { $('#wmd_result').html( $('#resultval', result).html()); } }); } } , show: function(event, ui) { currentTab = ui.index; } }); $(".ui-tabs-panel").each(function(i) { var totalSize = $(".ui-tabs-panel").size() - 1; if (i != totalSize) { next = i + 2; $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>"); } if (i != 0) { prev = i; $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>"); } }); $('.next-tab, .prev-tab').click(function() { var tabIndex = $(this).attr("rel"); $tabs.tabs('enable', tabIndex) .tabs('select', tabIndex) .tabs("option","disabled", [0, 1]); return false; }); }); </script> 

HTML

 <div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> <label for="title">Title</label> <input type="text" id="title" name="title" size="60" autocomplete="off" value="<? $title ?>"/> <div id="wmd-editor" class="wmd-panel"> <div id="wmd-button-bar"></div> <textarea id="wmd-input" name="wmd-input"></textarea> </div> <div id="wmd-preview" class="wmd-panel"></div> <div id="wmd_result"></div> <div id="title_input"style="padding:20px;"></div> </div> <div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> <label for="name">Name</label> <input type="text" id="name" name="name" size="60" autocomplete="off" value="<? $name ?>"/> <div id="name_input"></div> </div> 

Php

  <? if (isset($_POST['title'])){ $wmdVal = $_POST['title']; echo ('<div id="title_input"><span id="resultval"><h2>Title Echo result:</h2>'.$wmdVal.'</span></div>'); } if (isset($_POST['wmdVal'])){ $wmdVal = $_POST['wmdVal']; echo ('<div id="wmd_result"><span id="resultval"><h2>Description Echo result:</h2>'.$wmdVal.'</span></div>'); } if (isset($_POST['name'])){ $name = $_POST['name']; echo ('<div id="name_input"><span id="resultval"><h2>Description Echo result:</h2>'.$name.'</span></div>'); } ?> 

Answer 1

As far as I know, regardless of whether the fields are bookmarked or hidden, if they have IDs, you can get them. When used, for example: $('#bla').val() , it will search the entire page until it finds an element with the identifier "bla".

So just add it to the data option , for example:

 {key1: 'value1', key2: 'value2'} 

Try:

 data: { "wmdVal": $("#wmd-preview").html() , "name": $("#name").val() , "title": $("#title").val() }, 

Should work (not tested)

UPDATE:

After looking at the source code of your site, I think I found the problem. From the results of pressing the next button, you can understand that there is a variable $ _POST ['title'] (isset), but it is empty. So the problem is in ajax request, this line:

"title": $ ("# title"). html ()

You are not looking for the html() this input field . You are looking for val() .

Change the line above:

"title": $ ("# title"). val ()

Now you need to work, update me, if not

Answer 2

If you want to start AJAX POST whenever you change the tab. You must remove this condition: if (currentTab == 0) {. Because it forces code to run only when the first TAB is selected.

In addition, you can publish any data you want. You just need to pass them into the "data:" ajax properties. And since they are global and unique, you can call any of them by their identifiers. For instance:

 data:{ param1: $("#input1").val(), param2: $("#input2").val(), paramHtml1: $("#elementHtml1").html() } 

Answer 3

 "title": $("#title").html() should be "title": $("#title").val() -> you want the value of the field in question. This will send the correct value to the server. 

It seems that now you are asking why nothing is printed in the "Title Echo result:" area.

I think the next next step could be this:

 success: function(result) { // fill title_input with the result of the ajax call $('#title_input').html(result); } 

This will give you some result, but I think that probably is not the result you want. Perhaps answer what content you want in the header area of ​​the header