使用 jQuery 在 DIV 中提交表单

Question

我指的是类似于the one in this post 的问题，因为那里描述的解决方案对我不起作用。

起点是一个带有 jQ​​uery UI 选项卡的 HTML 页面（称为配置文件）：

<div id="tabs"> 
    <ul> 
        <li><a href="#realtab">Foo Bar</a></li> 
        <li><a href="?cmd=changePassword" title="pwd-settings">
                        <span> Dynamic tab </span>
            </a></li>
    </ul>
</div>

在 DIV 中呈现的 HTML 是：

<form method="post" id="subform" action="http://myhost.com/example.php">
    <input type="hidden" name="cmd" value="submitChangedPassword">

    <dl>
        <dt>PWD1</dt>
        <dd><input type="password" name="password" /></dd>

        <dt>PWD CHK</dt>
        <dd><input type="password" name="passwordChk" /></dd>

        <dt>&nbsp;</dt>
        <dd><input type="submit" value=" Apply " /></dd>
    </dl>
</form>

另外，我使用下面的JS脚本（基于引言中链接的帖子）：

$('#subform').submit(function() { // catch the form's submit event - should I use the form id?
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
        }
});
return false; // cancel original event to prevent form submitting
});

记录已提交，但行为因浏览器而异：

• IE、Firefox、Opera：将内容正确放入 DIV，非常棒！

• Safari、Chrome：内容正确，但整个页面都会刷新结果

请让我知道我做错了什么。非常感谢！

更新 1： 名为 pwd-settings 的 DIV 仅由选项卡界面创建。请注意，行为是相同的，即使我将其添加到 HTML（使用<div id ="pwd-settings"></div>）。

更新 2： 我还删除了上面的 JavaScript，所有浏览器都变成了“正确的内容，但刷新了整个页面”=“旧 URL，新内容”。一旦我将 JavaScript 添加到在 DIV 中呈现的 HTML 页面，它就开始在上述浏览器中工作。因此，我看到两个可能的错误原因：

1) JS 根本没有在浏览器出现错误或执行

2) DIV 内的 JS 不起作用，因为它寻址的 DIV 只存在于外部

Answer 1

jQuery 的serialize() 函数只获取<input> 元素。链接元素不是输入。调用$(this).serialize() 不会将<a> 元素的值添加到您的数据中。

您需要添加一个<input> 元素来保存该数据。也许试试

<input type="hidden" value="changePassword" name="cmd" />

编辑：你能发布完整的 html 吗？从现在看来，您的选择器不会选择表单，因为它甚至没有 id 属性....

Answer 2

这是我的猜测--

首先，您的表单上没有“操作”属性。所以 $(this).attr('action') 的 JS 行不返回任何内容。我不确定 jQuery Ajax 是如何处理的。

但我认为真正的问题是 example.php 脚本以及它如何处理您的调用。我不是 Ajax 专家，但我根本不会这样做。如果你把 showFile() 的东西取出来，然后回显 $_REQUEST['cmd']，它会起作用吗？

除此之外，我没有想法。但这不是浏览器的怪癖，这是您的代码的问题，我可以说这么多。

Answer 3

我终于找到了原因：加载问题中描述的JS时，某些浏览器（即有问题的浏览器）的行为会有所不同，因为表单尚不存在，因为稍后会加载选项卡的内容通过 Ajax。

因此解决方法是创建一个JS函数而不是上面的代码并适配按钮（提交变成按钮，引入onClick）：

<input type="button" value=" Apply " onClick="callMyFunction()" />

这也被 Safari 和 Chrome 正确处理。

非常感谢所有参与者！

Answer 4

解决此问题的最简单方法是在表单中添加隐藏输入：

<input type="hidden" name="cmd" value="checkPassword" id="cmd-field" />

如果此值需要根据显示的选项卡进行更改（尽管听起来并非如此），您可以在切换选项卡时动态更改它：

$("#invent-an-id-for-the-link-that-switches-to-this-tab").click(function() {
    $("#cmd-field").value("checkPassword");
});

Answer 5

Safari 拥有出色的网络开发工具。如果您运行的是 Windows 版本，则必须在 Preferences -> Advanced 中启用它。打开 Web Inspector 并检查您的请求/响应标头。

这不会直接指向解决方案，但目前没有什么可做的。获取这些标题并让我们保持更新！

Answer 6

看起来你的处理程序没有为后面的浏览器加载...由于表单的内容是动态的，你必须确保在设置表单的处理程序之前加载到 DOM 中。

您有 2 种可能的解决方案。

首先，加载选项卡内容后，加载您发布的脚本（查看 jquery 文档以了解选项卡事件加载：http://docs.jquery.com/UI/Tabs#event-load）。

其次，使用jquery live event on button click（目前不支持事件提交）。签出：http://docs.jquery.com/Events/live

第二种方案的代码：

$('#subform input:submit').live('click', function() { // catch the form's submit event - should I use the form id?
$.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    success: function(response) { // on success..
        $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
    }

}); 返回假； // 取消原始事件以防止表单提交 });

第一个解决方案

这些是我为使其正常工作所做的更改：

1. 从 tpl_overview.tpl 中删除 generic.js

2. 更改代码（@tpl_overview.tpl）：

   $(function() { $('#tabs').tabs() });

使用此代码：

 $(function() {
     $("#tabs").tabs( {
        load: function(event, ui) {
           // load specific script to handle form submission
           if ($(ui.tab).attr('href') == '#pwd-settings') {
              $.getScript('generic.js');
           }
        }
     } );
  });

这将在加载选项卡的内容后加载并执行 generic.js 脚本。

如果您发现自己这样做太多次，也许您可​​以在选项卡链接名称之后命名您的脚本...

让我们知道它是否有效！