Question

我有这个表格

<form method="post" name="lunch" id="lunch">

     <input type="number" id="people" name="people" onchange="calculo_lunch()" class="form-control">

     <input type="number" id="duration" name="duration" onchange="calculo_lunch()" class="form-control">

 </form>

我使用这个jquery脚本提交它

    $(function(){

        $("#lunch").submit(function(){

            //jquery code

            return false; // Evitar ejecutar el submit del formulario.
        })
    });

    $('input[type="number"]').on('change', function() { $("#lunch").trigger('submit'); })

当其中一个字段被更改时，我提交我的表单，但现在我需要在两个字段完成时触发此表单

Answer 1

这将检查每个“数字”类型输入并计算具有某些值的数字。如果具有值的输入数与输入数匹配，则表单提交。这适用于任意数量的输入，因此如果再添加10个输入，它仍然有效。

$('input[type="number"]').on('change', function() {
    //initialize counter
    var completed_fields = 0;

    //count up the number of completed number inputs
    $('#lunch').find('input[type="number"]').each(function(){
        if($(this).val()){
            completed_fields += 1;
        }
    });

    //test the number of completed fields vs the total number of fields
    if($('#lunch').find('input[type="number"]').length == completed_fields)
    {
        $("#lunch").trigger('submit');
    }
});

Answer 2

试试这个。

var fields = $('input[type="number"]'); //store all fields ref

fields.change(function() {
   if(fields.filter(function(){
      return !!$(this).val();
   }).length == field.length) { //all fields has values.
      $("#lunch").submit();
   }
})

Answer 3

$(function(){

    $("#lunch").submit(function(){
        //check if both values are whatever you need -->
        if (parseInt($('#people').val()) > 0 && parseInt($('#duration').val()) > 0){
              //jquery code
        }else{
             return;
        }

                   }
    });
        return false; // Evitar ejecutar el submit del formulario.
    })
});

$('input[type="number"]').on('change', function() { $("#lunch").trigger('submit'); })

Answer 4

您希望在触发submit事件之前确保每个输入都有一个值，并在DOM准备好的情况下绑定onChange事件。

$(function(){

    $("#lunch").submit(function(){

        //jquery code

        return false; // Evitar ejecutar el submit del formulario.
    }); // end submit
    $('input[type="number"]').on('change', function() { 
        if( $('input[type="number"]').filter(function() { return this.value == ''; }).length === 0 ) {
            $("#lunch").trigger('submit');
        }
    });
});

Answer 5

您可以在字段中使用html5必需标记：

<input type="number" id="people" name="people" onchange="calculo_lunch()" class="form-control" required>

如果字段为空则应该阻止提交..

完成所有字段后提交表单

5 个答案: