У меня есть php / ajax-форма, которая работает на 100% … но мне нужна одна и та же форма на той же странице. Конечно, каждая из форм будет идти к другому получателю.
Я попытался дублировать форму, и это кажется очень сложным! Я пробовал отправить дублированную форму (с большим количеством изменений в дублированную форму, чтобы попытаться заставить ее работать), но не успел я не знаю, правильно ли я делаю. Как форма идет, у меня есть кнопка при нажатии, она toggleslides div, которая содержит форму … заполнить форму, нажать submit и сообщение об успешном запуске ajax, говорящее спасибо
HTML ФОРМА:
<body> <div id="container"> <div id="accommodation_listing_options_box"> <ul id="accommodation_listing_options"> <li>Price Range: <a href="#" class="tooltip" style="cursor:help;" title="Mid-range Accommodation"><img src="../mid-range-yellow.png" width="28" height="19" align="absmiddle" style="padding-left:0px;" /></a></li> <li><a href="#">View Comments</a> <img src="../comments_bubble_small.png" width="18" height="16" align="absmiddle" style="padding-left:5px;" /></li> </ul> </div> <div id="quick_enquiry_box">Make Quick Enquiry</div> <div style="clear:both; width:710px;"></div> <div style="clear:both;"></div> <div id="slide_panel"> <div id="contact"> <div id="message"></div> <form method="post" action="contact.php" name="contactform" id="contactform"> <div id="my_contact_left"> <label for="name" accesskey="U"><span class="required">* </span>Name</label><br /> <input name="name" type="text" id="name" size="30" /> <br /> <label for="email" accesskey="E"><span class="required">* </span>Email</label><br /> <input name="email" type="text" id="email" size="30" /> <br /> <label for="phone" accesskey="P"><span class="required">* </span>Phone:</label><br /> <input name="phone" type="text" id="phone" size="30" /> <br /> <label for="dayin" accesskey="P">Day in:</label><br /> <input name="dayin" class="datepicker" type="text" id="dayin" size="30" /> <br /> <label for="dayout" accesskey="P">Day out:</label><br /> <input name="dayout" class="datepicker2" type="text" id="dayout" size="30" /> </div> <div id="my_contact_right"> <label for="comments" accesskey="C"><span class="required">* </span>Your Comments</label><br /> <textarea name="comments" cols="40" rows="3" id="comments" style="width: 350px; height:100px;"></textarea> <p><span class="required">*</span>Type the validation code in below</p> <div style="width:100px; height:40px; float:left;"><label for="verify" accesskey="V"> <img src="image.php" alt="Image verification" border="0"/></label></div> <div style="width:310px; height:40px; float:right;"><input name="verify" type="text" id="verify" size="6" value="" style="width: 50px;" /> <input type="submit" style="margin-left:112px;" class="submit" id="submit" value="Send it!" /></div> <div style="clear:both; width:410px;"></div> </div> <div style="clear:both; width:710px;"></div> </form> </div> <div id="quick_form_wrapper_close"><a href="#"><img src="../close-panel-button.gif" /></a></div> </div> </div> </body> Если я создаю дублируемую форму, то мне нужно изменить код HTML следующим образом:
action="contact.php" name="contactform" id="contactform"
чтобы:
action="contact2.php" name="contactform2" id="contactform2"
Это верно? Что-нибудь еще мне нужно изменить в HTML?
Перемещение на Javascript:
jQuery(document).ready(function(){ $('#contactform').submit(function(){ var action = $(this).attr('action'); $('#submit').attr('disabled','disabled').after('<img src="assets/ajax- loader.gif" class="loader" />'); $("#message").slideUp(750,function() { $('#message').hide(); $.post(action, { name: $('#name').val(), email: $('#email').val(), phone: $('#phone').val(), dayin: $('#dayin').val(), dayout: $('#dayout').val(), comments: $('#comments').val(), verify: $('#verify').val() }, function(data){ document.getElementById('message').innerHTML = data; $('#message').slideDown('slow'); $('#contactform img.loader').fadeOut('fast',function() {$(this).remove()}); $('#submit').removeAttr('disabled'); if(data.match('success') != null); $("#message").show().delay(5000).fadeOut(); } ); });
Нужно ли использовать идентификатор поля, дублирующий форму на той же странице? НАПРИМЕР:
$.post(action, { name2: $('#name2').val(), email2: $('#email2').val(), phone2: $('#phone2').val(), dayin2: $('#dayin2').val(), dayout2: $('#dayout2').val(), comments2: $('#comments2').val(), verify2: $('#verify2').val() },
Нужно ли делать какие-либо изменения в форме процесса PHP? Вот основная часть формы процесса php:
$name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $dayin = $_POST['dayin']; $dayout = $_POST['dayout']; $comments = $_POST['comments']; if (isset($_POST['verify'])) : $posted_verify = $_POST['verify']; $posted_verify = md5($posted_verify); else : $posted_verify = ''; endif; // Important Variables $session_verify = $_SESSION['verify']; if (empty($session_verify)) $session_verify = $_COOKIE['verify']; $error = ''; if(trim($name) == '') { $error .= '<li>Your name is required.</li>'; } if(trim($email) == '') { $error .= '<li>Your e-mail address is required.</li>'; } elseif(!isEmail($email)) { $error .= '<li>You have entered an invalid e-mail address.</li>'; } if(trim($phone) == '') { $error .= '<li>Your phone number is required.</li>'; } elseif(!is_numeric($phone)) { $error .= '<li>Your phone number can only contain digits.</li>'; } if(trim($comments) == '') { $error .= '<li>You must enter a message to send.</li>'; } if($session_verify != $posted_verify) { $error .= '<li>The verification code you entered is incorrect. </li>'; } if($error != '') { echo '<div class="error_message">Attention! Please correct the errors below and try again.'; echo '<ul class="error_messages">' . $error . '</ul>'; echo '</div>'; } else { if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); } // Advanced Configuration Option. // ie The standard subject will appear as, "You've been contacted by John Doe." $e_subject = 'You\'ve been contacted by ' . $name . '.'; // Advanced Configuration Option. // You can change this if you feel that you need to. // Developers, you may wish to add more fields to the form, in which case you must be sure to add them here. $msg = "You have been contacted by $name with regards to Accommodation. They passed verification and their message is as follows." . PHP_EOL . PHP_EOL; $msg .= "$comments" . PHP_EOL . PHP_EOL; $msg .= "You can contact $name via email, $email or via phone $phone." . PHP_EOL . PHP_EOL; $msg .= "We want to stay from the $dayin to the $dayout" . PHP_EOL . PHP_EOL; $msg .= "--------------------------------------------------------------------------- -" . PHP_EOL; if($twitter_active == 1) { $twitter_msg = $name . " - " . $comments . ". You can contact " . $name . " via email, " . $email ." or via phone " . $phone . "."; twittermessage($twitter_user, $twitter_msg, $consumer_key, $consumer_secret, $token, $secret); } $msg = wordwrap( $msg, 70 ); $headers = "From: $email" . PHP_EOL; $headers .= "Reply-To: $email" . PHP_EOL; $headers .= "MIME-Version: 1.0" . PHP_EOL; $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL; $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL; if(mail($address, $e_subject, $msg, $headers)) { echo "<fieldset>"; echo "<div id='success_page'>"; echo "<strong>Email Sent Successfully.</strong>"; echo "</div>"; echo "</fieldset>"; } else { echo 'ERROR!'; // Dont Edit. } }
Заранее спасибо! Очень ценю вашу помощь, потому что я пробовал в течение нескольких часов, и я еще не понял!
EDIT: МОЙ ТЕКУЩИЙ КЛАВИАТУР JAVASCRIPT:
jQuery(document).ready(function(){ $('.contactform').submit(function(){ var action = $(this).attr('action'); $('.submit').attr('disabled','disabled').after('<img src="assets/ajax- loader.gif" class="loader" />'); $("#message").slideUp(750,function() { $('#message').hide(); $.post(action, { name: $('.name').val(), email: $('.email').val(), phone: $('.phone').val(), dayin: $('.dayin').val(), dayout: $('.dayout').val(), comments: $('.comments').val(), verify: $('.verify').val() }, function(data){ document.getElementById('message').innerHTML = data; $('#message').slideDown('slow'); $('.contactform img.loader').fadeOut('fast',function() {$(this).remove()}); $('.submit').removeAttr('disabled'); if(data.match('success') != null); $("#message").show().delay(5000).fadeOut(); } ); }); return false; }); }); jQuery(document).ready(function(){ $('.contactform2').submit(function(){ var action = $(this).attr('action'); $('.submit').attr('disabled','disabled').after('<img src="assets/ajax- loader.gif" class="loader" />'); $("#message2").slideUp(750,function() { $('#message2').hide(); $.post(action, { name: $('.name').val(), email: $('.email').val(), phone: $('.phone').val(), dayin: $('.dayin').val(), dayout: $('.dayout').val(), comments: $('.comments').val(), verify: $('.verify').val() }, function(data){ document.getElementById('message2').innerHTML = data; $('#message2').slideDown('slow'); $('.contactform2 img.loader').fadeOut('fast',function() {$(this).remove()}); $('.submit').removeAttr('disabled'); if(data.match('success') != null); $("#message2").show().delay(5000).fadeOut(); } ); }); return false; }); });
МОЙ ТЕКУЩИЙ КОД JAVASCRIPT:
jQuery(document).ready(function(){ $('.contactform').submit(function(){ var action = $(this).attr('action'); $(this).children('.submit').attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />'); $(this).children("#message").slideUp(750,function() { $(this).children('#message').hide(); $.post(action, { name: $(this).children('.name').val(), email: $(this).children('.email').val(), phone: $(this).children('.phone').val(), dayin: $(this).children('.dayin').val(), dayout: $(this).children('.dayout').val(), comments: $(this).children('.comments').val(), verify: $(this).children('.verify').val() }, function(data){ document.getElementById('message').innerHTML = data; $(this).children('#message').slideDown('slow'); $(this).children('.contactform img.loader').fadeOut('fast',function(){$(this).remove()}); $(this).children('.submit').removeAttr('disabled'); if(data.match('success') != null); $(this).children("#message").show().delay(5000).fadeOut(); } ); }); return false; }); });того, какjQuery(document).ready(function(){ $('.contactform').submit(function(){ var action = $(this).attr('action'); $(this).children('.submit').attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />'); $(this).children("#message").slideUp(750,function() { $(this).children('#message').hide(); $.post(action, { name: $(this).children('.name').val(), email: $(this).children('.email').val(), phone: $(this).children('.phone').val(), dayin: $(this).children('.dayin').val(), dayout: $(this).children('.dayout').val(), comments: $(this).children('.comments').val(), verify: $(this).children('.verify').val() }, function(data){ document.getElementById('message').innerHTML = data; $(this).children('#message').slideDown('slow'); $(this).children('.contactform img.loader').fadeOut('fast',function(){$(this).remove()}); $(this).children('.submit').removeAttr('disabled'); if(data.match('success') != null); $(this).children("#message").show().delay(5000).fadeOut(); } ); }); return false; }); });
Вместо использования идентификаторов для селекторов jquery используйте классы. Вы можете присвоить всем формам одно и то же имя класса и поля, которые одинаковы, получить одинаковые классы.
Затем используйте их в своем jquery:
$('.contactform').submit(function(){ $.post(action, { name: $(this).children('.name').val(),
Он должен работать для многих экземпляров формы, которые у вас есть, потому что все поля ввода ссылаются на $ (this), который является переданной формой, независимо от имени или имени.
РЕДАКТИРОВАТЬ:
Это должно сработать для вас. Для любого числа форм это все, что вам нужно.
jQuery(document).ready(function(){ $('.contactform').submit(function(){ var action = $(this).attr('action'); $('.submit', this).attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />'); $('.message', this).slideUp(750,function() { $('.message', this).hide(); $.post(action, { name: $('.name', this).val(), email: $('.email', this).val(), phone: $('.phone', this).val(), dayin: $('.dayin', this).val(), dayout: $('.dayout', this).val(), comments: $('.comments', this).val(), verify: $('.verify', this).val() }, function(data){ $('.message', this).html(data); $('.message', this).slideDown('slow'); $('img.loader', this).fadeOut('fast',function() { $(this).remove(); }); $('.submit', this).removeAttr('disabled'); if(data.match('success') != null); $('.message', this).show().delay(5000).fadeOut(); }); }); return false; }); });