Почему работает только одна форма из двух?
Помогите, пожалуйста, сам я в javascript понимаю слабо. Сделал две аналогичных формы, запускаемых одним скриптом, кликами по разным ссылкам. По аналогии вот с этим: http://learn.javascript.ru/play/iyc7e
Но там обе формы работают как надо. У меня же во второй форме проверка телефона не происходит и данные не отправляются: http://test.novgood.ru/ Но если из кода убрать первую форму : <div id="frmCallback1" ... </div>, то вторая начинает работать как надо: http://test.novgood.ru/test.html В чём тут дело?? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Тест</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://img.apishops.org/SinglePageWebsites/custom/js/apishopsForm.js"></script> </head> <body> <a href="javascript:PopUpShow('1')">Форма 1</a> <a href="javascript:PopUpShow('2')">Форма 2</a> <div id="frmCallback1" style="display:none"> <div class="contentCallback"> <img src="http://www.iconsearch.ru/uploads/icons/fatcow/32x32/cross.png" class="close"> <p class="order_form">Форма 1</p> <div id="formContainer" style="overflow: hidden;"> <form action="" method="post" id="formExample"> <input type="hidden" name="apishopsFormCount" value="1"> <input type="hidden" name="apishopsFormFio" value="тест" pattern=".{3,}" class="name"> <label>Телефон </label> <input type="text" name="apishopsFormPhone" pattern=".{3,}" class="phone"> <input type="hidden" id="placeMail" pattern=".{3,}" name="apishopsFormAddress" placeholder> <input type="submit" value="отправить" class="submit"> </form> </div> </div> </div> <div id="frmCallback2" style="display:none"> <div class="contentCallback"> <img src="http://www.iconsearch.ru/uploads/icons/fatcow/32x32/cross.png" class="close"> <p class="order_form">Форма 2</p> <div id="formContainer" style="overflow: hidden;"> <form action="" method="post" id="formExample"> <input type="hidden" name="apishopsFormCount" value="1"> <input type="hidden" name="apishopsFormFio" value="тест" pattern=".{3,}" class="name"> <label>Телефон </label> <input type="text" name="apishopsFormPhone" pattern=".{3,}" class="phone"> <input type="hidden" id="placeMail" pattern=".{3,}" name="apishopsFormAddress" placeholder> <input type="submit" value="отправить" class="submit"> </form> </div> </div> </div> </body> </html> <script type="text/javascript"> $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); jQuery(document).ready(function() { $(".nav a").click(function(e) { e.preventDefault(); }); }); $(".nav a").click(function() { var pagePos = $(document).scrollTop(); var scrollTime = (pagePos - $($(this).attr('data-link')).offset().top) / 1.73; $("body,html").animate({ "scrollTop": $($(this).attr('data-link')).offset().top - 80 }, Math.abs(scrollTime)); }); function PopUpShow(popupId) { $("#frmCallback" + popupId).show(); } function PopUpHide() { $("#frmCallback1").hide(); $("#frmCallback2").hide(); } function OKShow() { $("#frmOK").show(); } function OKHide() { $("#frmOK").hide(); } $(".close").click(function(event) { PopUpHide(); OKHide(); }); </script> <script> $(function() { $('#formContainer').apishopsForm({ type: 'inline', /*тип открытия [normal|light|jquery-selector]*/ form: $('#formExample'), /*тип формы [normal|light|jquery-selector]*/ siteId: 384811, productId: 385677, price: 0, lang: 1, priceRound: 0, wpId: 0 }); $('.fancybox').fancybox({ fitToView: false, autoSize: false, width: 'auto', height: 'auto' }); }); </script> |
id="formExample" нельзя одинаковые в двух формах.
|
Если переименовываю id, то вообще всё перестаёт работать. Как можно сделать, чтобы работало?
|
<div id="formContainer" style="overflow: hidden;">
<form action="" method="post" id="formExample"> id не могут повторяться, они должны быть уникальны. Замените на: <div class="formContainer" style="overflow: hidden;"> <form action="" method="post" class="formExample"> и в селекторах '#formContainer', '#formExample' на '.formContainer', '.formExample' |
Ок, спасибо
|
Часовой пояс GMT +3, время: 23:54. |