形式DIV使用jQuery提交(Form submit in DIV using jQuery)

2019-10-17 06:25发布

我指的是类似问题的一个在这个岗位 ,因为该解决方案描述有没有为我工作。

其出发点是一个HTML网页(称为配置文件)使用jQuery UI选项卡:

<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,火狐,歌剧:正确的内容为DIV,优秀的!

  • Safari浏览器,Chrome浏览器:正确的内容,但整个页面被刷新的结果

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

更新1:只由标签界面创建的DIV名为PWD的设置。 请注意,该行为是相同的,即使我把它添加到HTML(用<div id ="pwd-settings"></div>

更新2:我也删除了JavaScript的上方,所有的浏览器变成了“正确的内容,但整个页面刷新” =“旧的URL,新的内容。” 当我加入JavaScript来的DIV中呈现的HTML页面,它开始在上述浏览器工作。 因此,我看到两个可能的错误原因:

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

2)DIV中的JS不起作用,因为它解决了其中仅存在外部的DIV

Answer 1:

jQuery的序列化()函数只得到<input>元素。 链接元素不是一个输入。 呼唤$(this).serialize()不会在价值增加<a>元素到您的数据。

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

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

编辑:您可以发布完整的HTML? 从外观上来看,现在,你的选择会不会选择形式,因为它甚至没有一个id属性....



Answer 2:

这是我的猜测 -

首先,你没有你的窗体上的“行动”属性。 所以JS线$(本).attr(“行动”)不返回任何东西。 我不知道的jQuery的Ajax如何处理。

但我认为,真正的问题是使用example.php脚本,它是如何处理您的来电。 我不是Ajax专家,但那不是我会做所有的方式。 如果你拿出的演出文件()的东西,只是回声$ _REQUEST [“加利福尼亚”],它的工作原理?

除此之外,我的想法。 但它不是浏览器的一个怪癖,它是你的代码的问题,我只能说那么多。



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浏览器拥有优秀的Web开发工具。 如果你正在运行的Windows版本中,你必须启用它在设置 - >高级。 打开Web检查,并检查您的请求/响应头。

这不会直接指向解决方案,但现在没有太多去。 获取这些头,并保持我们更新了!



Answer 6:

看起来你是处理程序没有被加载为后者的浏览器......由于表单的内容是动态的,你得确保设置表单的处理程序之前加载到DOM。

你有2个可能的解决方案。

首先,一旦标签的内容加载,加载您发布(用于制表事件负载检查jQuery的文档:在一段脚本http://docs.jquery.com/UI/Tabs#event-load )。

二,(目前不支持事件提交)按钮点击使用jQuery的现场直播。 退房: 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?
    }

}); 返回false; //取消原始事件,以防止形式提交});

第一个解决方案

这些都是我做得到它的工作的变化:

  1. 卸下tpl_overview.tpl generic.js
  2. 更改代码(@ tpl_overview.tpl):

    $(函数(){$( '#标签')的选项卡()。});

与此代码:

 $(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脚本。

如果你看到自己这样做太多次了,也许你可以命名标签链接名称后您的脚本...

让我们知道它是否有效!



文章来源: Form submit in DIV using jQuery