Question

我有以下ajax代码，它将名称/电子邮件/消息参数提交给“messageaction.cfm”模板，并在原始提交页面上显示相同的3个参数（工作正常）：

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
        function submitForm() {
            $.ajax({type:'POST', url:'messageaction.cfm', data:$('#ContactForm').serialize(), success: function(response) {
                $('#ContactForm').find('.form_result').html(response);
            }});

            return false;
        }
    </script>

            <form id="ContactForm" onsubmit="return submitForm();">
                Name: <input type="text" name="name" value=""><br> 
                Email: <input type="text" name="email" value=""><br> 
                Message:<br> <textarea style="width: 200px; height: 100px;" name="message"></textarea>
                <br>
                <input type="submit" name="Choice" id="Choice" value="One">
                <input type="submit" name="Choice" id="Choice" value="Two">
                <div class="form_result"></div>
            </form>

但是，我有2个提交按钮（相应的值为“One”和“Two”），并希望能够检测到哪一个被按下。在正常的提交表单（没有ajax）中，变量“Choice”会根据我单击的按钮正确显示相应的“One”或“Two”。但是在ajax形式中，“Choice”变量只显示相同的“0”（默认值），无论我按哪个按钮。

我已经尝试过2个其他ajax表单变体，但似乎无法传递输入提交按钮值的值。必须有一些非常基本的东西，我做错了，但我已经尝试了我能想到的一切。任何建议都将受到高度赞赏！

Answer 1

由于id是唯一的，name属性在同一form中也应该是唯一的，因此您应该更改：

<input type="submit" name="Choice" id="Choice" value="One">
<input type="submit" name="Choice" id="Choice" value="Two">

为：

<input type="submit" name="ChoiceOne" id="ChoiceOne" value="One">
<input type="submit" name="ChoiceTwo" id="ChoiceTwo" value="Two">

并使用您的AJAX代码再试一次。确保这次正确定位：）

Answer 2

在submit事件发生时，jQuery.serialize（）不知道单击了哪个按钮，因此在生成表单数据时可能会跳过这些按钮。

您还必须处理每个按钮的点击事件，然后手动传递按钮值。

另一种方法是在用户点击按钮时设置隐藏的表单字段值，因为在表单提交之前将处理按钮单击事件。

提交未使用Ajax传递的按钮值

2 个答案: