У меня есть форма поверх всплывающего окна, и для отправки этой формы я должен написать собственный код
код формы поверх всплывающего окна:
<div id="add-role" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div id="bank-details-form" >
<div class="card">
<div class="card-header card-header-text" data-background-color="rose">
<h4 class="card-title">Add Role</h4>
</div>
<div class="user-form card-conten">
<div class="container-fluid">
<?php
$roleModel = new appmodels
olelist();
$form = ActiveForm::begin([
'layout' => 'horizontal',
'id' => 'role-form',
'enableClientValidation'=> false,
'fieldConfig' => [
'options' => [
'class' => 'form-group row',
],
'horizontalCssClasses' => [
'label' => 'col-sm-4 label-on-left',
'offset' => 'col-sm-offset-4',
'wrapper' => 'col-sm-6',
],
],
]); ?>
<div class="row form-group field-users-middel_name">
<?= $form->field($roleModel, 'role_name')->textInput(['maxlength' => true]) ?>
<?= $form->field($roleModel, 'status')->dropdownList(Yii::$app->params['status']) ?>
<?= User::showLoader() ?>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-6">
<?= Html::submitButton('Save', ['class' => 'btn btn-success center-block']) ?>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
</div>
</div>
Код Jquery:
$('#role-form').submit(function(event) {
event.preventDefault();
event.stopImmediatePropagation();
var roleName = $("#rolelist-role_name").val();
if(roleName != ""){
$(".loader-div").css({display : 'block'});
var data = $(this).serialize();
$.ajax({
url : "<?= Url::toRoute('rolelist/createajax') ?>",
type : 'POST',
data : data,
success : function(responce){
$(".loader-div").css({display : 'none'});
var res = JSON.parse(responce);
if(res.result){
$("#user-role_id").append('<option value="'+res.data.id+'">'+res.data.role_name+'</option>')
}
$("#add-role").modal("hide");
}
})
}
});
В окне проверки я вижу, что к форме прикреплены два события отправки, одно из которых является моим пользовательским, а другое - yii.activeForm.js.
Есть идеи, как удалить событие submit, прикрепленное activeForm?
Всего 2 ответа
Это потому, что вы связываете ActiveForm как обычную форму, когда вы используете Yii2 ActiveForm и она имеет свои собственные события, которые вы должны использовать.
Так что в вашем случае вы должны изменить
$('#role-form').submit(function(event) {
});
в
$('#role-form').on('beforeSubmit', function(event) {
});
и не забудьте добавить return false в конец события, которое вы связываете, ваш полный код должен выглядеть следующим образом
$('#role-form').on('beforeSubmit', function (event) {
event.preventDefault();
var roleName = $("#rolelist-role_name").val();
if (roleName != "") {
$(".loader-div").css({
display: 'block'
});
var data = $(this).serialize();
$.ajax({
url: "<?= Url::toRoute('rolelist/createajax') ?>",
type: 'POST',
data: data,
success: function (responce) {
$(".loader-div").css({
display: 'none'
});
var res = JSON.parse(responce);
if (res.result) {
$("#user-role_id").append('<option value="' + res.data.id + '">' + res.data.role_name + '</option>')
}
$("#add-role").modal("hide");
}
});
}
return false;
});
Установка 'validateOnSubmit' => false для ActiveForm работала для меня.