Привет, aлгoритм слeдующий: зaпoлняeтся фoрма, eё oтпрaвку пeрeхвaтывaeт jQuerи скрипт, прoвeряет и oтпрaвляeт бeз пeрeзaгрузки стрaницы в oбрaбoтчик.
Проблема следующая: после заполнения первой формы скрипт обрабатывает запрос и все ок, а после заполнения второй формы даже не заходит в скрипт и обновляет страницу.
<form role="form" action="" id="ajaxform" method="post" novalidate="novalidate">
<h3>Форма 1</h3>
<span class="form-title"></span>
<div class="user">
<input type="text" id="name" name="name" id='placeName' placeholder="Ваше имя">
<i class="fa fa-user"></i>
</div>
<div class="phone-form">
<input type="tel" id="number" name="phone" id='placePhone' " class="user_phone" placeholder="(___) ___ __ __" >
<i class="fa fa-phone-square"></i>
</div>
<div class="submit">
<input type="submit" class="btn-1" value="Заказать сейчас">
</div>
</form>
<form role="form" action="" id="ajaxform" method="post" novalidate="novalidate">
<h3>Форма 2</h3>
<span class="form-title"></span>
<div class="user">
<input type="text" id="name1" name="name" placeholder="Ваше имя">
<i class="fa fa-user"></i>
</div>
<div class="phone-form">
<input type="tel" id="number1" name="phone" id='placePhone' " class="user_phone" placeholder="(___) ___ __ __" >
<i class="fa fa-phone-square"></i>
</div>
<div class="submit">
<input type="submit" class="btn-1" value="Заказать сейчас">
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
jQuery(function($){
$("#number").mask("(999) 999-9999");
$("#number1").mask("(999) 999-9999");
$("#number2").mask("(999) 999-9999");
});
$("#ajaxform").submit(function(){
var form = $(this);
var data = form.serialize();
$.ajax({
type: 'POST',
url: 'mail.php',
dataType: 'json',
data: data,
beforeSend: function(data) {
form.find('input[type="submit"]').attr('disabled', 'disabled');
},
success: function(data){
if (data['error']) {
alert(data['error']);
} else {
PopUpHide('#popup-order');
PopUpShow('#popup-thanks');
$(form).trigger('reset');
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
},
complete: function(data) {
form.find('input[type="submit"]').prop('disabled', false);
}
});
return false;
});
});
</script>
