Question

假设我有以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function(){
            $('#form1').submit(function(){

                // Let's see the values
                alert($(this).serialize());

                $.post($(this).attr('action'), $(this).serialize(), function(data){

                    // Do something on callback

                });

                return false;
            })
        });

    </script>
</head>
<body>
    <form action="http://example.com/bla" method="POST" id="form1">
        <input type="hidden" name="ipt1" value="1"/>
        <input type="submit" name="sbt" value="2"/>
    </form>
</body>
</html>

当我序列化表单的值时，单击提交的输入类型的值不存在。在ajaxifying我的表单时如何处理这种情况？

Answer 1

在非ajax表单中，提交按钮的值仅与表单一起发送（如果单击它）。因此，如果你想用ajax模仿这种行为，你必须这样做：

$("#submit_button").click(function() {
    var data = $("#my_form").serialize();
    data += data.length ? "&" : ""; // check if empty
    data += escape($(this).attr("name"))+"="+escape($(this).val());
    // ...
    return false;
});

这会将提交按钮的序列化数据附加到序列化表单数据。

Answer 2

这是设计的。 .serialize()方法不会序列化submit类型的输入。

不幸的是，你拥有它的方式将无法访问事件的来源。您最好的选择是连接所有提交，然后附加源数据，如下所示：

$('input:submit').bind('click', function(){    

var data = $("#form1").serialize();
data += "&"+escape($(this).attr("name"))+"="+escape($(this).val());

alert(data);
$.post($('#form1').attr('action'), data, function(data) {
//do something
});

return false;
});

Answer 3

我正在使用以下解决方案：

<input type="radio" name="action" value="action_1" style="display:none"></input>
<button type="submit" onclick="this.previousElementSibling.checked=true" >Do Action 1</button>

对于任意数量的选择（名称，值）重复此操作，选择一个表单即可立即提交。确保使用后重新加载页面。

jQuery - 如何在ajaxifying表单时获取类型提交的输入值

3 个答案: