我有以下表格:
<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")
只是给我表单的值,而不是输入字段的值。
有什么建议吗?一个解决方案是创建不同的表单,但这似乎并不干燥......
最佳答案
首先,如果你想使用表单的action属性,你应该在ajax请求的url参数中引用它:
url: form.attr('action'),
现在,对于单击的按钮,您应该使用它(这是一种解决方法,因为提交按钮不包含在表单序列化中,如果没有,我会使用它):
$(function () {
//When any of the buttons is clicked, we store in the form data the clicked button value
$('#ajaxform').on('click', 'input[type=submit][name=feeling]', function(e) {
$(this.form).data('clicked', this.value);
});
$('#ajaxform').submit(function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr("method"),
data: { clickedButton : form.data('clicked') } //Retrieve the button clicked value from the form data
});
});
});
这里是工作示例:https://jsfiddle.net/68qLxLgm/1/
关于javascript - 根据单击的按钮获取表单内的输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30981677/