Не удается запретить автоматическую отправку формы дважды после клика - PullRequest
Новая
       78

Не удается запретить автоматическую отправку формы дважды после клика

0 голосов
/ 19 сентября 2019

В первый раз, когда я отправляю один из триггеров, дублирующая отправка выполняется, но последующие происходят только один раз.

Я использовал метод protectDefault (), но все равно отправляется дважды в первый раз, а последующие отправляются только один раз.

Форма 

<?php $form = ActiveForm::begin(['id' => 'verify_form']); ?>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Identity Type <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'type')->dropDownList($identitiesModel->identityTypes(), [
                'prompt' => 'Select an identity',
                'class' => 'form-control',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Identification Number <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'identificationId')->textInput([
                'class' => 'form-control',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Last name <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'lastname')->textInput([
                'class' => 'form-control',
                'placeholder'=> 'Last name',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">First name <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'firstname')->textInput([
                'class' => 'form-control',
                'placeholder'=> 'First name',
                'required' => true
            ])->label(false) ?>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label">Date of Birth <span class="error">*</span></label>
            <?php echo $form->field($identitiesModel, 'date_of_birth')->widget(DatePicker::className([
                'options' => [
                    'placeholder' => 'Select date of birth',
                    'class' => 'form-control',
                ],
                'pluginOptions' => [
                    'format' => 'Y-m-d',
                    'todayHighlight' => true,
                ]
            ]))->label(false) ?>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <button type="submit" class="btn btn-success subBtn">Search</button>
            <button type="reset" class="btn btn-default clearBtn">Clear</button>
        </div>
    </div>
</div>

<?php ActiveForm::end(); ?>


JS Code
$(document).ready(function(){
 $('#verify_form').submit(function(event){
        event.preventDefault()

        $('.otherResult').empty();
        let x = $('#verify_form #verificationform-date_of_birth').val();
        if(x.length == 0){
            swalFunc('info','Oops...','Date of birth must be filled');
            return false;
        } 

        $('#verify_form .subBtn').attr('disabled', true);
        let formValues = $(this).serialize();        
            let link = '".Url::toRoute("api/verification-search")."';
            $.ajax({
                type: 'POST',
                url: link,
                data: formValues,
                beforeSend: function(){           
                   $('.loadImage').css({'display': 'block'}); 
                },
                success:function(data){
                    $('#verify_form .subBtn').removeAttr('disabled');
                    socket.emit('identity', data);
                },
                complete:function(){
                    $('.loadImage').css({'display': 'none'});
                }  
            });
            return false;
    });
})

Я ожидал, что вызов ajax будет вызываться один раз при каждом запуске кнопки отправки, но приведенный выше код отправляется дважды при первом запуске, даже если кнопка отправкищелкнули один раз, и это приводит к дублированию записей.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2019

Причина, по которой он запускался дважды, заключалась в том, что во вкладках отображалось несколько форм.Таким образом, код ниже решил мою проблему с несколькими логиками 

$(document).on('submit', 'form', function(e){
    e.preventDefault();


    let x = $(this).closest('form').attr('id');
    console.log(x);
    return false;
});
0 голосов
/ 20 сентября 2019

Самый простой способ - просто отключить кнопку с помощью jquery после отправки.

try 

$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
...