Good day! Help is needed. My knowledge is not enough.
Landing is done . It is necessary in the section "Choose your signature" when you click on the "ORDER" button, a modal window with a feedback form should appear, in which the field "You have chosen a signature:" should automatically substitute the name of the signature on the button that was clicked.
Button trigger trigger:
<div class="btnfull btnfull-o #wrapper"> <p><a class="modalbox" href="#inline">ЗАКАЗАТЬ</a></p> </div> Form Code:
<div id="inline" class="form-container-pop"> <legend> <h2>Подача заявки</h2> </legend> <form action="#" method="post" id="contact" > <div class="input-prepend"> <input class="form-field input-medium focused txt" value="" id="name" type="text" placeholder="Введите имя"/> <div class="error-box"></div> </div> <div class="input-prepend"> <input class="form-field input-medium focused txt" value="" id="phon" type="text" placeholder="Введите номер телефона"/> <div class="error-box"></div> </div> <div class="input-prepend"> <label for="sign">Вами выбрана подпись:</label> <input class="form-field input-medium focused" value="Для идентификации личности" id="sign" type="text" placeholder="Для идентификации личности" readonly /> </div> <input type="submit" class="submit-button feedback" name="send" id="send" value="Заказать"> </form> </div> Js code:
$(document).ready(function() { $(".modalbox").fancybox(); $('input#name, input#phon').unbind().blur(function() { // Для удобства записываем обращения к атрибуту и значению каждого поля в переменные var id = $(this).attr('id'); var val = $(this).val(); // После того, как поле потеряло фокус, перебираем значения id, совпадающие с id данного поля switch (id) { // Проверка поля "Имя" case 'name': var rv_name = /^[a-zA-Zа-яА-Я]+$/; // используем регулярное выражение // Eсли длина имени больше 2 символов, оно не пустое и удовлетворяет рег. выражению, // то добавляем этому полю класс .not_error, // и ниже в контейнер для ошибок выводим слово " Принято", т.е. валидация для этого поля пройдена успешно if (val.length > 3 && val != '' && rv_name.test(val)) { $(this).addClass('not_error'); $(this).next('.error-box').text('Принято') .css('color', 'green') .animate({ 'paddingLeft': '10px' }, 400) .animate({ 'paddingLeft': '5px' }, 400); } // Иначе, мы удаляем класс not-error и заменяем его на класс error, говоря о том что поле содержит ошибку валидации, // и ниже в наш контейнер выводим сообщение об ошибке и параметры для верной валидации else { $(this).removeClass('not_error').addClass('error'); $(this).next('.error-box').html('поле "Имя" обязательно для заполнения<br>, длина имени должна составлять не менее 2 символов<br>, поле должно содержать только русские или латинские буквы') .css('color', 'red') .animate({ 'paddingLeft': '10px' }, 400) .animate({ 'paddingLeft': '5px' }, 400); } break; // Проверка телефона case 'phon': var rv_phon = /^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/; if (val != '' && rv_phon.test(val)) { $(this).addClass('not_error'); $(this).next('.error-box').text('Принято') .css('color', 'green') .animate({ 'paddingLeft': '10px' }, 400) .animate({ 'paddingLeft': '5px' }, 400); } else { $(this).removeClass('not_error').addClass('error'); $(this).next('.error-box').html('поле "Телефон" обязательно для заполнения<br>, поле должно содержать правильный email-адрес<br>') .css('color', 'red') .animate({ 'paddingLeft': '10px' }, 400) .animate({ 'paddingLeft': '5px' }, 400); } break; } // end switch(...) }); // end blur() // Теперь отправим наше письмо с помощью AJAX $('form#contact').submit(function(e) { // Запрещаем стандартное поведение для кнопки submit e.preventDefault(); // После того, как мы нажали кнопку "Отправить", делаем проверку, // если кол-во полей с классом .not_error равно 3 (так как у нас всего 3 поля), то есть все поля заполнены верно, // выполняем наш Ajax сценарий и отправляем письмо адресату if ($('.not_error').length == 2) { // Eще одним моментом является то, что в качестве указания данных для передачи обработчику send.php, мы обращаемся $(this) к нашей форме, // и вызываем метод .serialize(). // Это очень удобно, т.к. он сразу возвращает сгенерированную строку с именами и значениями выбранных элементов формы. $.ajax({ url: 'sendmessage.php', type: 'post', data: $(this).serialize(), beforeSend: function(xhr, textStatus) { $('form#contact :input').attr('disabled', 'disabled'); }, success: function(response) { $('form#contact :input').removeAttr('disabled'); $('form#contact :text').val('').removeClass().next('.error-box').text(''); alert(response); $('form#contact').fadeOut("fast", function() { $(this).before("<p><strong>Ваше сообщение отправлено!</strong></p>"); setTimeout("$.fancybox.close()", 1500); }); } }); } // Иначе, если количество полей с данным классом не равно значению 3, мы возвращаем false, // останавливая отправку сообщения в невалидной форме else { return false; } }); // end submit() }); // end script 
