Кнопка вызова формы - добавляем в карточку товара или в каталог товаров
HTML
<button type="button" class="button btn-primary send-zakaz" data-item="{name}" data-bs-toggle="modal" data-bs-target="#zakazModal">
<i class="fa fa-shopping-cart"></i>
<span>Купить</span>
</button >HTML. Код формы
<div class="modal fade" id="zakazModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Купить в 1 клик</h4>
<button class="btn-close" type="button" data-bs-dismiss="modal"></button>
</div>
<div class="box-content">
<form method="get" class="form_call1">
<div class="row">
<div class="col-xs-12 text">
<h6>Модель: <span id="item"></span></h6>
</div>
<div class="col-xs-12 text-center mess" id="form_err1"></div>
<div class="col-xs-12 text-center mess" id="form_right1"></div>
<div class="col-xs-12">
<input id="name" maxlength="80" placeholder="Ваше Имя" type="text" />
</div>
<div class="col-xs-12">
<input id="phone" maxlength="80" placeholder="Телефон *" type="text" required/>
</div>
<div class="col-xs-12">
<button type="submit" autocomplete="off" class="zakaz-submit">Отправить заказ</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Валидация формы на jQuery
$(function() {
$('form.form_call1').submit(function(){
phone=$('input#phone').val();
name=$('input#name').val();
reg = /^\d[\d\(\)\ -]{5,14}\d$/;
item=$('#item').text();
err='';
if (phone =='') {err+='<span>Вы не указали свой телефон</span>';}
else if (!(reg.test(phone))) {err+=' <span>Неверно указан Телефон</span>';}
if (err!='') {
$('div#form_err').html(err); // показываем ошибку
} else {
$.get( "/forms/send-zakaz.php?phone="+phone+"&name="+name+"&item="+item, function( data ) { //указываем путь к обработчику отправки формы
$('div#form_right').html(data); // показываем подтверждение удачной отправки
setTimeout(function(){
location.reload();
}, 1000);
});
}
return false;
});
$('.send-zakaz').click(function() {
var nameg = $(this).data('item');
// Добавляем в id=item название товара
$('span#item').html(nameg);
// Добавляем в дополнительное поле input название товара
$('input[name=item]').val(nameg);
});
});