javascript - Ajax submit various input values with jquery UI next button click - Stack Overflow

admin管理员组

文章数量:1336204

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" autoplete="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" autoplete="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>');
}
?>  

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" autoplete="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" autoplete="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>');
}
?>  

• javascript
• jquery
• ajax

Share Improve this question Follow asked Aug 3, 2012 at 7:24 user1261800user1261800 2

• I'm assuming your tabs are loaded already (if they're demand loaded, there will be issues, obviously.) Are you just trying to do something in your data property like: data: { "wmdVal": $("#wmd-preview").html(), 'nameYourField': $('#name').val() }? – Spencer Hoffman Commented Aug 3, 2012 at 7:41
• Please re-indent your JS code – tucuxi Commented Aug 3, 2012 at 8:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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'

本文标签： javascriptAjax submit various input values with jquery UI next button clickStack Overflow