我有一个名为orderproductForm的表单和未定义数量的输入。
我想用jQuery。get或ajax或类似的东西会通过ajax调用一个页面，并发送orderproductForm表单的所有输入。
我想有一种方法是
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
然而，我不知道确切地所有表单输入。是否有一个特性，功能或一些东西，只是发送所有的表单输入?
当前回答
有几件事你需要记住。
1. 有几种提交表单的方法
使用提交按钮 按enter键 通过在JavaScript中触发提交事件 可能更多取决于设备或未来的设备。
因此，我们应该绑定到表单提交事件，而不是按钮单击事件。这将确保我们的代码在现在和未来的所有设备和辅助技术上都能工作。
2. Hijax
用户可能没有启用JavaScript。hijax模式在这里很好，我们使用JavaScript温和地控制表单，但如果JavaScript失败，则保持表单可提交。
我们应该从表单中提取URL和方法，因此如果HTML发生了变化，我们不需要更新JavaScript。
3.低调的JavaScript
使用event. preventdefault()而不是return false是很好的实践，因为它允许事件冒泡。这使得其他脚本可以绑定到事件中，例如可以监视用户交互的分析脚本。
速度
理想情况下，我们应该使用外部脚本，而不是内联插入脚本。我们可以使用脚本标记在页面的头部部分链接到它，或者在页面的底部链接到它，以提高速度。脚本应该悄悄地增强用户体验，而不是妨碍用户体验。
Code
假设你同意上面的所有建议，并且你想要捕获提交事件，并通过AJAX (hijax模式)处理它，你可以这样做:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
你可以手动触发表单提交，只要你喜欢通过JavaScript使用类似的东西:
$(function() {
$('form.my_form').trigger('submit');
});
编辑:
我最近不得不这样做，最后写了一个插件。
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
添加一个data-autosubmit属性到你的表单标签，然后你可以这样做:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});
其他回答
JavaScript
(function ($) {
var form= $('#add-form'),
input = $('#exampleFormControlTextarea1');
form.submit(function(event) {
event.preventDefault();
var req = $.ajax({
url: form.attr('action'),
type: 'POST',
data: form.serialize()
});
req.done(function(data) {
if (data === 'success') {
var li = $('<li class="list-group-item">'+ input.val() +'</li>');
li.hide()
.appendTo('.list-group')
.fadeIn();
$('input[type="text"],textarea').val('');
}
});
});
}(jQuery));
HTML
<ul class="list-group col-sm-6 float-left">
<?php
foreach ($data as $item) {
echo '<li class="list-group-item">'.$item.'</li>';
}
?>
</ul>
<form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
<p class="form-group">
<textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
</p>
<button type="submit" class="btn btn-danger">Add new item</button>
</form>
我真的很喜欢superluminary的这个答案，尤其是他在jQuery插件中包装解决方案的方式。所以感谢superluminary提供了一个非常有用的答案。在我的例子中，我想要一个插件，它允许我在插件初始化时通过选项来定义成功和错误事件处理程序。
这就是我想到的:
;(function(defaults, $, undefined) {
var getSubmitHandler = function(onsubmit, success, error) {
return function(event) {
if (typeof onsubmit === 'function') {
onsubmit.call(this, event);
}
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function() {
if (typeof success === 'function') {
success.apply(this, arguments);
}
}).fail(function() {
if (typeof error === 'function') {
error.apply(this, arguments);
}
});
event.preventDefault();
};
};
$.fn.extend({
// Usage:
// jQuery(selector).ajaxForm({
// onsubmit:function() {},
// success:function() {},
// error: function() {}
// });
ajaxForm : function(options) {
options = $.extend({}, defaults, options);
return $(this).each(function() {
$(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
});
}
});
})({}, jQuery);
这个插件允许我很容易地在页面上“ajaxify”html表单，并提供onsubmit，成功和错误事件处理程序，用于实现表单提交状态的用户反馈。这使得插件可以这样使用:
$('form').ajaxForm({
onsubmit: function(event) {
// User submitted the form
},
success: function(data, textStatus, jqXHR) {
// The form was successfully submitted
},
error: function(jqXHR, textStatus, errorThrown) {
// The submit action failed
}
});
请注意，成功和错误事件处理程序接收到的参数与从jQuery ajax方法的相应事件接收到的参数相同。
你可以像下面这样在提交函数上使用这个。
HTML表单
<form class="form" action="" method="post">
<input type="text" name="name" id="name" >
<textarea name="text" id="message" placeholder="Write something to us"> </textarea>
<input type="button" onclick="return formSubmit();" value="Send">
</form>
jQuery功能:
<script>
function formSubmit(){
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var dataString = 'name='+ name + '&message=' + message;
jQuery.ajax({
url: "submit.php",
data: dataString,
type: "POST",
success: function(data){
$("#myForm").html(data);
},
error: function (){}
});
return true;
}
</script>
详情及样品请访问: http://www.spiderscode.com/simple-ajax-contact-form/
这不是OP问题的答案， 但如果你不能使用静态形式的DOM，你也可以这样尝试。
var $form = $('<form/>').append(
$('<input/>', {name: 'username'}).val('John Doe'),
$('<input/>', {name: 'user_id'}).val('john.1234')
);
$.ajax({
url: 'api/user/search',
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
data: $form.serialize(),
success: function(data, textStatus, jqXHR) {
console.info(data);
},
error: function(jqXHR, textStatus, errorThrown) {
var errorMessage = jqXHR.responseText;
if (errorMessage.length > 0) {
alert(errorMessage);
}
}
});
另一个类似的使用form元素上定义的属性的解决方案:
<form id="contactForm1" action="/your_url" method="post">
<!-- Form input fields here (do not forget your name attributes). -->
</form>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
</script>
