Ajax submit various input values with jquery UI next button click

I am currently working with jquery ui tabs and ajax/post submit without page refresh. With some guidance I have been able to get the div #wmd-preview submited when clicking the next button. The issue is that I also have other fields I will like to submit at the same time when the next button is clicked in various tabs.

How can I submit the input values of various input fields in different tabs when clicking the next button? EXAMPLE

(for some testing i currently have the other input fields submit with keyup and timer setup)

JS- NEXT/Previous button merged 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>');
}
?>  

Answers


As far as i know , there's no matter if the fields are in tabs or hidden , as long as they have ID , you can get them. When using , for instance: $('#bla').val() , it will search the whole page until it will find an element with the ID "bla".

Therefore , just add it to the data option, like that:

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

Try:

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

Should work (not been tested)

UPDATE:

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

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

You're not looking for the html() of that input field. You're looking for val().

Change the line above to:

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

Should work now, update me if not


If you want to run the AJAX POST whenever you change the tab. You have to remove this condition: if(currentTab == 0){. Because this one is forcing the code to run, just when the first TAB is selected.

Besides that, you can post any data that you want. You just need to pass them to "data:" properties of the ajax. And Since they are global and uniques, you can call any of them by their IDs. Like that:

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

"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 sort of seems like now you are asking why nothing is being printed in the 'Title Echo result:' area.

I think a good next step might be:

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

That will give you some output, but I think probably not the output you want. Maybe respond with what content you want in the 'title echo area'


Need Your Help

Identity tables in Two MVC 5 applications using same database

asp.net sql-server asp.net-mvc asp.net-identity

I have a requirement to use one database for two MVC5 applications. So I have one application that creates default Identity tables AspNetUsers etc. Now from another application I want to create sep...

Code Signing Error Certificate identity

ios xcode4 code-signing certificate xcode4.4

Certificate identity 'iPhone Developer:myname etc..' appears more than once in the keychain. The codesign tool requires there only be one