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 field
的html()
。 你在寻找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); }
这会给你一些输出,但我想可能不是你想要的输出。 也许在’标题回音区’回复你想要的内容