Question

我有以下表格：

<div>
  <form name="ajaxformname" id="ajaxform" action="/request" method="POST">
    AJAX:
    <input id="btn1" name="feeling" type="submit" value="Fine">
    <input id="btn2" name="feeling" type="submit" value="Neutral">
    <input id="btn3" name="feeling" type="submit" value="Bad">
  </form>
</div>

应该通过ajax发布到服务器。

以下是相关的javascript：

$('#ajaxform').submit(function (event) {
    event.preventDefault();
        var form = $(this); 
        var action = form.attr("action"), 
            method = form.attr("method"),
            data = form.attr("value");

    $.ajax({
        url: "/request",
        type: method,
        data: data
    });

现在 - 根据点击的三个按钮中的哪一个 - 我希望将它们的值发布到服务器。但是form.attr("value")只是给了我表单的值而不是输入字段的值。

有什么建议吗？一个解决方案是创建不同的形式，但似乎不是DRY ......

Answer 1

首先，如果你想使用表单的action属性，你应该在ajax请求的url参数中引用它：

col1   | col2                  |
sess-1 | read,meet,walk        |
sess-2 | watch,sleep,run,drive |

现在，对于单击的按钮，你应该使用它（这是一种解决方法，因为提交按钮不包含在表单序列化中，如果没有，我会用它代替）：

url: form.attr('action'),

这是工作示例：https://jsfiddle.net/68qLxLgm/1/

Answer 2

嗨请使用以下内容获取已点击的按钮的ID

$("input").click(function(e){
    var idClicked = e.target.id;
});

根据单击的按钮获取表单内的输入值

2 个答案: