Проверьте, заполнены ли все необходимые входные данные, и отправьте форму автоматически

В моей форме я хочу, чтобы, когда все необходимые поля ( .required-entry) будут заполнены, автоматически отправить форму без нажатия на кнопку Отправить.

<div id="billing-form">
    <fieldset>
        <div class="field form-group">
            <input type="text" class="input-text form-control required-entry" id="name" />
        </div>
        <div class="field form-group">
            <input type="text" class="input-text form-control required-entry" id="mid-name" />
        </div>
    </fieldset>
</div>
<div class"button-container">
    <button type="button" title="Continue" id="btn-continue" class="button btn-continue" onclick="billing.save()">Continue</button>
</div>

1 ответ

  1. Это плохая идея, чтобы сумбить форму, когда входные данные заполнены, но вы можете показать следующую форму, когда текущие входные данные форм заполнены. Для этого используйте данный код.

    $("#form1 input").on("keyup change", function(){
        var inputValidate = true;
        $("#form1 input").each(function(index, element){   		
            if ($(element).val() == "")
               inputValidate = false;
        });
        
        if (inputValidate)
            $("#form2").show();
        else
            $("#form2").hide();
    });
    #form2 {
        display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <form id="form1">     
        <div>
            <label>Form 1</label>
        </div>
        <div>
            <label>Firstname</label>
            <input type="text" />
        </div>
        <div>
            <label>Lastname</label>
            <input type="text" />
        </div>
    </form>
    <br />
    <form id="form2">     
        <div>
            <label>Form 2</label>
        </div>
        <div>
            <label>Birthday</label>
            <input type="text" />
        </div>
        <div>
            <label>Country</label>
            <input type="text" />
        </div>
    </form>