提交表单而不点击更新或提交按钮

时间:2014-11-14 14:21:09

标签: javascript php jquery ajax forms

我有一个表单,只要对表单中的某个字段进行了一些更改,我就需要提交表单,而无需用户点击更新或提交按钮。

我熟悉AJAX,我可以使用按钮通过AJAX提交表单,但是我现在需要将其更改为在用户在其中一个字段中输入内容时提交表单

目前我将.keydown()放在每个输入字段上虽然它有效,但这使得脚本真的很长,我想知道是否有更好的方法来处理它。这就是我正在对各个字段进行检测更改

if ($("#some_field").length) {
    var timer = null;
    $('#some_field').keydown(function () {
        clearTimeout(timer);
        timer = setTimeout(update, 1000)
    });

    function update(){
        $.ajax({
            ...
            ...
            ...
    }
});
}
}

我真的很感激这里的任何帮助。

4 个答案:

答案 0 :(得分:1)

$('.class-of-your-inputs').change(function(){
   $("#you-form").ajaxSubmit({url: 'you_path.php', type: 'post'})
});

答案 1 :(得分:1)

创建要用于处理表单提交的函数。它让您有机会决定是否要使用ajax或默认表单提交:

function submitForm() {
   var form = $(this).closest('form')[0];
   form.submit();
   //or $.ajax( ... );
}

然后只为所有输入元素:input使用一个选择器,或者使用公共类,并使用input事件,即使用户将文本粘贴到其中一个输入中,它也会捕获:

$(':input').on('input', submitForm);

<强>更新

要收听jQuery UI datepicker事件,请按以下方式添加change事件:

$(':input').on('input change', submitForm);

&#13;
&#13;
function submitForm() {
        var form = $(this).closest('form')[0];
        alert( 'About to submit form to ' + form.action );
       //form.submit();
       //or $.ajax( ... );
    }

    $(':input').on('input', submitForm);
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

将所有内容放入一个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

答案 3 :(得分:0)

我认为在每个输入字段keyup事件上调用ajax是个坏主意。 您可以在一段时间内显示用户必须填写表单的计数器。 然后使用超时提交表单。 如果填写了所有必填字段,则执行所需的任务。 否则你可以再次询问输入。