Javascript jQuery-如何在对表单进行Ajaxing时获取submit类型输入的值_Javascript_Jquery_Html_Ajax_Dom

Javascript jQuery-如何在对表单进行Ajaxing时获取submit类型输入的值

javascript jquery html ajax dom

Javascript jQuery-如何在对表单进行Ajaxing时获取submit类型输入的值,javascript,jquery,html,ajax,dom,Javascript,Jquery,Html,Ajax,Dom,假设我有以下代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title></title> <script src="http://aj

假设我有以下代码：

<!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>


$（文档）.ready（函数（）{
$（'#form1'）。提交（函数（）{
//让我们看看这些值
警报（$（this.serialize（））；
$.post（$（this.attr（'action'），$（this.serialize（）），函数（数据）{
//回拨时做些什么
});
返回false；
})
});

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

这是出于设计。

.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;
});

$("#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;
});

在非ajax表单中，只有单击表单时，提交按钮的值才会随表单一起发送。因此，如果你想用ajax模仿这种行为，你必须这样做：

$('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;
});

$("#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;
});

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

我使用以下解决方案：

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


执行行动1

您可以对任意数量的选项（名称、值）重复此操作，并且只要选择一个选项，表单就会提交。

确保页面在使用后重新加载。

有没有更好的方法来完成这项工作，而不是处理所有提交类型输入的所有点击，将它们的值附加到表单中？这种方法的问题是，我的表单上有很多提交类型的输入。你是说，我编写的代码只用于一个提交按钮？它可以扩展到更多。是的，我在所有重要的输入上设置了一个类来识别它们。非常感谢你！