【问题标题】:jQuery how to find button values on form submitjQuery如何在表单提交上查找按钮值
【发布时间】:2015-07-02 06:35:27
【问题描述】:

我有一个基本的时事通讯注册表单,其中包含一个电子邮件字段和两个按钮(订阅和取消订阅)。 我想将按钮值作为 ajax 数据的一部分提交,但 .serialize() 不包含按钮值,因为它们是特定于事件的。

这是我的代码: Javascript:

$('#newsletter_form').submit(function() {
    $.ajax({
        type:'POST',
        url:'/newsletter',
        data: $(this).serialize(),
        dataType:'json',
        success: function(data) {
            if(data['status'] == true) {
                alert(data['status']);
            }
            else {
                alert(data['error']);
            }
        }
    });
    return false;
});

HTML:

 <form id="newsletter_form"action="/newsletter/" method="post">
                <input type="text" name="email" value="Email Address" class="toggle"/>


                <button class="btn_grey" name="submit" type="submit" value="subscribe"><span>Subscribe</span></button>
                <button class="btn_grey" name="submit" type="submit" value="unsubscribe"><span>Unsubscribe</span></button>
   </form>

编辑 我通过在按钮上使用单击事件并使用 parent().serialize() 加上 attr("value") 来解决此问题。

 $('#newsletter_form button').click(function() {
        $.ajax({
            type:'POST',
            url:'/newsletter',
            data: $(this).parent('form').serialize() + '&submit='+ $(this).attr("value"),
            dataType:'json',
            success: function(data) {
                if(data['status'] == true) {
                    alert(data['status']);
                }
                else {
                    alert(data['error']);
                }
            }
        });
        return false;
    });

【问题讨论】:

  • 这个怎么样? &lt;input type="submit" name="submit" value="subscribe"/&gt;

标签: jquery ajax


【解决方案1】:

为什么不直接使用点击处理程序并创建自己的对象,因为您只有两个要发送的字段,这应该不是问题;

var data = {
    'email': $('input[name="email"]').val(),
    'submit': $(this).val()
}

data.serialize();

【讨论】:

    【解决方案2】:

    在按钮上使用单击处理程序,而不是在表单上使用提交处理程序。在发送到服务器的数据中添加this.value

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-07-23
      • 2016-08-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-04-10
      • 2023-03-29
      相关资源
      最近更新 更多