Ajax使用jquery UI下一次按钮提交各种输入值

我目前正在使用jquery ui选项卡和ajax / post提交而不刷新页面。 通过一些指导,我可以在单击下一个按钮时获得div #wmd-preview 。 问题是,当在各个选项卡中单击下一个按钮时,我还要同时提交其他字段。

单击下一个按钮时,如何在不同选项卡中提交各种输入字段的输入值? 例

(对于某些测试,我目前使用keyup和timer设置提交其他输入字段)

JS- NEXT / Previous按钮与submit / ajax合并

  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("Next Page »"); } if (i != 0) { prev = i; $(this).append("« Prev Page"); } }); $('.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; }); });  

HTML

 
<input type="text" id="title" name="title" size="60" autocomplete="off" value=""/>
<input type="text" id="name" name="name" size="60" autocomplete="off" value=""/>

PHP

  <? if (isset($_POST['title'])){ $wmdVal = $_POST['title']; echo ('

Title Echo result:

'.$wmdVal.'
'); } if (isset($_POST['wmdVal'])){ $wmdVal = $_POST['wmdVal']; echo ('

Description Echo result:

'.$wmdVal.'
'); } if (isset($_POST['name'])){ $name = $_POST['name']; echo ('

Description Echo result:

'.$name.'
'); } ?>

据我所知,无论字段是在标签中还是隐藏的,只要它们有ID,就可以得到它们。 在使用时,例如: $('#bla').val() ,它将搜索整个页面,直到它找到ID为“bla”的元素。

因此,只需将其添加到data option ,如下所示:

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

尝试:

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

应该工作(未经测试)

更新:

在查看了您网站的源代码之后,我想我发现了问题。 从单击下一个按钮的结果中你可以理解,有一个$ _POST [‘title’]变量(isset),但它是空的。 所以在ajax请求中有一个问题,这一行:

“title”:$(“#title”)。html()

你不是在寻找那个input fieldhtml() 。 你在寻找val()

将上面的行更改为:

“title”:$(“#title”)。val()

现在应该工作,如果没有,请更新我

如果要在更改选项卡时运行AJAX POST。 您必须删除此条件: if(currentTab == 0){ 。 因为这个强制代码运行,就在选择第一个TAB时。

除此之外,您还可以发布您想要的任何数据。 您只需将它们传递给ajax的“data:”属性即可。 由于它们是全球性的和独特的,您可以通过其ID来调用它们中的任何一个。 像那样:

 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. 

现在好像你在问’为什么没有在’标题回声结果:’区域打印。

我认为下一步可能是:

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

这会给你一些输出,但我想可能不是你想要的输出。 也许在’标题回音区’回复你想要的内容