and so there is a form with ajax request with field validation for emptiness, and so when we fill in all the fields in one form and click send, Javascript checks all forms, and therefore the form is not sent. It is necessary that he only checked all fields in one form. Such forms 3 on the page. And Javascript checks everyone.

$(function() { //при нажатии на кнопку с id="send" $('#send').click(function() { //переменная formValid var formValid = true; //перебрать все элементы управления input $('input').each(function() { //найти предков, которые имеют класс .form-group, для установления success/error var formGroup = $(this).parents('.form-group'); //найти glyphicon, который предназначен для показа иконки успеха или ошибки var glyphicon = formGroup.find('.form-control-feedback'); //для валидации данных используем HTML5 функцию checkValidity if (this.checkValidity()) { //добавить к formGroup класс .has-success, удалить has-error formGroup.addClass('has-success').removeClass('has-error'); //добавить к glyphicon класс glyphicon-ok, удалить glyphicon-remove glyphicon.addClass('glyphicon-ok').removeClass('glyphicon-remove'); } else { //добавить к formGroup класс .has-error, удалить .has-success formGroup.addClass('has-error').removeClass('has-success'); //добавить к glyphicon класс glyphicon-remove, удалить glyphicon-ok glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok'); //отметить форму как невалидную formValid = false; } }); //если форма валидна, то if (formValid) { jQuery.ajax({ // Начала конструкции для работы с Ajax через jQuery type: "GET", // Метод, которым получаем данные из формы url: "/mail.php", // Обработчик формы. data: jQuery(".form").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные success: function(html) { // функция выполняемая при успешном отправлении данных $("#myCallback").modal('hide'); //закрываем окно $("#myrequery").modal('show'); //закрываем окно //setTimeout("('#myrequery').modal('hide')",2000); setTimeout(function() { $("#myrequery").modal('hide') }, 3000); $(".form")[0].reset(); // ресет формы $(".has-feedback").removeClass('has-success'); } }); } }); }); 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form"> <div class="form-group has-feedback"> <label for="summa">Сумма</label> <input type="text" id="summa" placeholder="4 500 000 сум" class="form-control" name="summa" required="required"> </div> <div class="form-group has-feedback"> <label for="avans">Аванс (%)</label> <input type="text" id="avans" placeholder="30%" class="form-control" name="avans" required="required"> </div> <div class="form-group has-feedback"> <label for="srok">Срок</label> <select name="srok" id="srok" class="form-control" required="required"> <option value="24month">24 месяца</option> <option value="3yearth">3 года</option> <option value="4yearth">4 года</option> <option value="5yearth">5 года</option> </select> </div> <div class="form-group has-feedback"> <label for="nick-name">Ваше имя</label> <input type="text" id="nick-name" placeholder="Ахмадбой" class="form-control" name="nick-name" required="required"> </div> <div class="form-group has-feedback"> <label for="phone-number">Ваш телефон</label> <input type="text" id="phone-number" placeholder="+99897 767-66-65" class="form-control" name="phone-number" required="required"> </div> <button class="btn send" type="button">Отправить</button> <p class="confident">Ваши контактные данные в безопаcности <br>и не будут переданы <a data-toggle="modal" data-target="#youConfiditional">третьим лицам</a> </p> </form>

  • It is not clear what the question is? - cheops
  • You write "and so there is a form" and where is this form? you don't have it in your question - MasterAlex
  • Look here. - Yuri
  • but the site cargo21vek.ru/jalol - Yuri

1 answer 1

Set for each input in each form its own class:

 $(document).ready(function(){ $('.send').click(function() { var dataform = $(this).attr('data-form'); $('input.' + dataform).each(function() { $("span").html($(this).attr("placeholder")); }) }) }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form form_1"> <div class="form-group has-feedback"> <label for="summa">Сумма</label> <input type="text" id="summa" placeholder="form_1" class="form-control form_1" name="summa" required="required"> </div> <button class="btn send" data-form="form_1" type="button">Отправить</button> </form> <form class="form form_2"> <div class="form-group has-feedback"> <label for="summa">Сумма</label> <input type="text" id="summa" placeholder="form_2" class="form-control form_2" name="summa" required="required"> </div> <button class="btn send" data-form="form_2" type="button">Отправить</button> </form> <form class="form form_3"> <div class="form-group has-feedback"> <label for="summa">Сумма</label> <input type="text" id="summa" placeholder="form_3" class="form-control form_3" name="summa" required="required"> </div> <button class="btn send" data-form="form_3" type="button">Отправить</button> </form> <br> <br> <span></span>