>我有一个表单,我需要在对表单中的一个字段进行一些更改后立即提交表单,而无需用户单击更新或提交按钮。
我熟悉 AJAX,我可以使用按钮通过 AJAX 获取表单提交,但现在我需要将其更改为在用户在其中一个字段中键入内容后立即提交表单
目前,我正在将.keydown()
放在每个输入字段上,尽管它可以工作,但这会使脚本非常长,我想知道是否有更好的方法来处理它。这就是我对各个字段执行的操作以检测更改
if ($("#some_field").length) {
var timer = null;
$('#some_field').keydown(function () {
clearTimeout(timer);
timer = setTimeout(update, 1000)
});
function update(){
$.ajax({
...
...
...
}
});
}
}
我将非常感谢这里的任何帮助。
创建要用于处理表单提交的函数。它让您有机会决定是要使用 ajax 还是默认表单提交:
function submitForm() {
var form = $(this).closest('form')[0];
form.submit();
//or $.ajax( ... );
}
然后,只需对所有输入元素:input
(例如)或一个公共类使用一个选择器,并使用 input
事件,即使用户将文本粘贴到其中一个输入中,该事件也会捕获:
$(':input').on('input', submitForm);
更新
要侦听 jQuery UI 日期选择器事件,请添加change
事件,如下所示:
$(':input').on('input change', submitForm);
function submitForm() {
var form = $(this).closest('form')[0];
alert( 'About to submit form to ' + form.action );
//form.submit();
//or $.ajax( ... );
}
$(':input').on('input', submitForm);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="/form/update.php" method="post">
Field 1: <input type="text" name="field1"/><br>
Field 2: <input type="text" name="field2"/><br>
Field 3: <input type="text" name="field3"/><br>
</form>
$('.class-of-your-inputs').change(function(){
$("#you-form").ajaxSubmit({url: 'you_path.php', type: 'post'})
});
只需将所有内容放入keyup函数中并提交所有字段,在下一页上检查哪个字段有输入并做任何您想做的事情
$('.myinput').keyup(function(){
//eg:
var name = $('#name').val();
var email = $('#email').val();
//^variable ^gets value (val()) of field with this id
$.ajax({
....
//eg.
type : "POST",
data : {name : name, email : email}
....
});
您必须class="myinput"
输入字段,在我的示例中,名称的输入应该具有id="name"
。keyup 函数对具有类"myinput"的表单字段上的每个 keyup 事件做出反应,并将发送 ajax 请求。
此行选择
$('.myinput').keyup(function(){
//^class ^event
我认为在每个输入字段键控事件上调用 ajax 是个坏主意。您可以放置计数器显示用户必须在一定时间内填写表单。然后使用超时提交表单。如果填写了所有必填字段,则执行所需的任务。否则,您可以再次询问输入。