radek.k
28-03-2013, 08:23
Witam wszystkich,
mam pewien problem z formularzem kontaktowy. Do strony kontaktu poprzez dodanie własnego modułu HTML dodaje rusztowanie formularza kontaktowego. W sekcji HEAD strony mam odwołanie do formularza za pośrednictwem JS. Mam również skrypt PHP, który przesyła wiadomość. Tu wszystko się zgoda. Problem pojawia się przy wysyłce wiadomości. Informacja o błędzie lub udany przesłaniu wiadomości powinna się wyświetlać w <div> formularza na podstronie kontaktu. U mnie komunikat pokazuje się w nowej karcie. To samo tyczy się sytuacji w której użytkownik nie wypełni wszystkich wymaganych pól. Zamiast podświetlenia się nie uzupełnionego pola (skrypt powinien dodać klasę) dostaje komunikat w nowej karcie jakie pola nie zostały wypełnione. Gdzieś mi się to wszystko gubi, ale za chiny nie wiem gdzie. Stronę stawiam w najbardziej banalny sposób, mam szablon i muszę go tylko podłączyć pod Joomla. Proszę o pomoc :blink:, plisssssss
Poniżej kody;
HEAD-dla formularza
<script type="text/javascript"> $(document).ready(function(){
.
.
/fragment kodu odpowiedzialnego za coś innego/
.
.
. $('#submit').click(function () { //Get the data from all the fields var name = $('input[name=name]'); var email = $('input[name=email]'); var phonenumber = $('input[name=phonenumber]'); var website = $('input[name=website]'); var projectbudget = $('input[name=projectbudget]'); var timeframe = $('input[name=timeframe]'); var youreinterestedin = $('input[name=youreinterestedin]'); var howdidyouhearaboutus = $('input[name=howdidyouhearaboutus]'); var comment = $('textarea[name=comment]'); //Simple validation to make sure user entered something //If error found, add hightlight class to the text field if (name.val()=='') { name.addClass('hightlight'); return false; } else name.removeClass('hightlight'); if (email.val()=='') { email.addClass('hightlight'); return false; } else email.removeClass('hightlight'); if (comment.val()=='') { comment.addClass('hightlight-message'); return false; } else comment.removeClass('hightlight-message'); //organize the data properly var data = 'name=' + name.val() + '&email=' + email.val() + '&phonenumber=' + phonenumber.val() + '&website=' + website.val() + '&projectbudget=' + projectbudget.val() + '&timeframe=' + timeframe.val() + '&youreinterestedin=' + youreinterestedin.val() + '&howdidyouhearaboutus=' + howdidyouhearaboutus.val() + '&comment=' + encodeURIComponent(comment.val()); //disabled all the text fields $('.text').attr('disabled','true'); //show the loading sign document.getElementById("submit").disabled=true; document.getElementById("submit").value='Please Wait..'; //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "contact-form.php", //GET method is used type: "GET", //pass the data data: data, //Do not cache the page cache: false, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide the form $('.contact-form-div').fadeOut('slow'); //show the success message $('.done').fadeIn('slow'); //if process.php returned 0/false (send mail failed) } else alert('Sorry, unexpected error. Please try again later.'); } }); //cancel the submit button default behaviours return false; }); })
</script>
DIV formularza
<div class="contact-form orbit-slide" data-thumb="images/contact-form.png" style="display: block; left: 0px; z-index: 3; opacity: 1;"><div class="done"><strong style="color: #e44d26;">Dziękujemy za przesłanie wiadomości!</strong><br> skontaktujemy się w najbliższym czasie.</div><form method="post" action="contact-form.php"><div class="twelve columns contact-form-div"><div class="eight columns mobile-four-760"><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/62.png" border="0" alt="Contact Name"></span></div> <div class="ten mobile-three columns"><input type="text" placeholder="Imię i Nazwisko / Nazwa firmy" name="name" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/53.png" border="0" alt="Contact Email"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Adres E-mail" name="email" value=""></div></div></div><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/44.png" border="0" alt="Phone Number"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Telefon kontaktowy" name="phonenumber" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/102.png" border="0" alt="Website"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Strona WWW" name="website" value=""></div></div></div><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/71.png" border="0" alt="Project Budget"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Planowany budżet" name="projectbudget" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/159.png" border="0" alt="Timeframe"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Czas realizacji zlecenia" name="timeframe" value=""></div></div></div><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/158.png" border="0" alt="You're interested in?"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Zakres prac" name="youreinterestedin" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/128.png" border="0" alt="How did you hear about us?"></span></div><div class="ten mobile-three columns"><input id="subject" placeholder="Temat" type="text" name="howdidyouhearaboutus" value=""></div></div></div></div><div class="four columns last-column mobile-four-760"><textarea placeholder="Treść wiadomości" name="comment"></textarea></div><div class="twelve columns submit-760"><input id="submit" class="button radius secondary submit-wide" type="submit" value="Wyślij wiadomość"></div></div></form></div>
Skrypt PHP formularza
<?php
//Retrieve form data. //GET - user submitted data using AJAX//POST - in case user does not support javascript, we'll use POST instead$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];$phonenumber = ($_GET['phonenumber']) ?$_GET['phonenumber'] : $_POST['phonenumber'];$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];$projectbudget = ($_GET['projectbudget']) ?$_GET['projectbudget'] : $_POST['projectbudget'];$timeframe = ($_GET['timeframe']) ?$_GET['timeframe'] : $_POST['timeframe'];$youreinterestedin = ($_GET['youreinterestedin']) ?$_GET['youreinterestedin'] : $_POST['youreinterestedin'];$howdidyouhearaboutus = ($_GET['howdidyouhearaboutus']) ?$_GET['howdidyouhearaboutus'] : $_POST['howdidyouhearaboutus'];$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
//flag to indicate which method it uses. If POST set it to 1if ($_POST) $post=1;
//Simple server side validation for POST data, of course, you should validate the emailif (!$name) $errors[count($errors)] = 'Please enter your name.';if (!$email) $errors[count($errors)] = 'Please enter your email.'; if (!$comment) $errors[count($errors)] = 'Please enter your comment.';
//if the errors array is empty, send the mailif (!$errors) {
//recipient $to = 'Biuro <biuro@biuro.pl>'; //sender $from = $name . ' <' . $email . '>'; //subject and the html message $subject = 'Comment from ' . $name; $message = ' <!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></head> <body> <table> <tr><td>Name:</td><td>' . $name . '</td></tr> <tr><td>Email:</td><td>' . $email . '</td></tr> <tr><td>Phone Number:</td><td>' . $phonenumber . '</td></tr> <tr><td>Website:</td><td>' . $website . '</td></tr> <tr><td>Project Budget:</td><td>' . $projectbudget . '</td></tr> <tr><td>Timeframe:</td><td>' . $timeframe . '</td></tr> <tr><td>You Are Interested In:</td><td>' . $youreinterestedin . '</td></tr> <tr><td>How did you hear about us:</td><td>' . $howdidyouhearaboutus . '</td></tr> <tr><td>Message:</td><td>' . nl2br($comment) . '</td></tr> </table> </body> </html>';
//send the mail $result = sendmail($to, $subject, $message, $from); //if POST was used, display the message straight away if ($_POST) { if ($result) echo 'Dziękujemy za przesłanie wiadomości! Skontaktujemy się w najbliższym czasie.'; else echo 'Uppppssss! Coś się wysypało '; //else if GET was used, return the boolean value so that //ajax script can react accordingly //1 means success, 0 means failed } else { echo $result; }
//if the errors array has values} else { //display the errors message for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>'; echo '<a href="form.php">Back</a>'; exit;}
//Simple mail function with HTML headerfunction sendmail($to, $subject, $message, $from) { $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n"; $headers .= 'From: ' . $from . "\r\n"; $result = mail($to,$subject,$message,$headers); if ($result) return 1; else return 0;}
?>
mam pewien problem z formularzem kontaktowy. Do strony kontaktu poprzez dodanie własnego modułu HTML dodaje rusztowanie formularza kontaktowego. W sekcji HEAD strony mam odwołanie do formularza za pośrednictwem JS. Mam również skrypt PHP, który przesyła wiadomość. Tu wszystko się zgoda. Problem pojawia się przy wysyłce wiadomości. Informacja o błędzie lub udany przesłaniu wiadomości powinna się wyświetlać w <div> formularza na podstronie kontaktu. U mnie komunikat pokazuje się w nowej karcie. To samo tyczy się sytuacji w której użytkownik nie wypełni wszystkich wymaganych pól. Zamiast podświetlenia się nie uzupełnionego pola (skrypt powinien dodać klasę) dostaje komunikat w nowej karcie jakie pola nie zostały wypełnione. Gdzieś mi się to wszystko gubi, ale za chiny nie wiem gdzie. Stronę stawiam w najbardziej banalny sposób, mam szablon i muszę go tylko podłączyć pod Joomla. Proszę o pomoc :blink:, plisssssss
Poniżej kody;
HEAD-dla formularza
<script type="text/javascript"> $(document).ready(function(){
.
.
/fragment kodu odpowiedzialnego za coś innego/
.
.
. $('#submit').click(function () { //Get the data from all the fields var name = $('input[name=name]'); var email = $('input[name=email]'); var phonenumber = $('input[name=phonenumber]'); var website = $('input[name=website]'); var projectbudget = $('input[name=projectbudget]'); var timeframe = $('input[name=timeframe]'); var youreinterestedin = $('input[name=youreinterestedin]'); var howdidyouhearaboutus = $('input[name=howdidyouhearaboutus]'); var comment = $('textarea[name=comment]'); //Simple validation to make sure user entered something //If error found, add hightlight class to the text field if (name.val()=='') { name.addClass('hightlight'); return false; } else name.removeClass('hightlight'); if (email.val()=='') { email.addClass('hightlight'); return false; } else email.removeClass('hightlight'); if (comment.val()=='') { comment.addClass('hightlight-message'); return false; } else comment.removeClass('hightlight-message'); //organize the data properly var data = 'name=' + name.val() + '&email=' + email.val() + '&phonenumber=' + phonenumber.val() + '&website=' + website.val() + '&projectbudget=' + projectbudget.val() + '&timeframe=' + timeframe.val() + '&youreinterestedin=' + youreinterestedin.val() + '&howdidyouhearaboutus=' + howdidyouhearaboutus.val() + '&comment=' + encodeURIComponent(comment.val()); //disabled all the text fields $('.text').attr('disabled','true'); //show the loading sign document.getElementById("submit").disabled=true; document.getElementById("submit").value='Please Wait..'; //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "contact-form.php", //GET method is used type: "GET", //pass the data data: data, //Do not cache the page cache: false, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //hide the form $('.contact-form-div').fadeOut('slow'); //show the success message $('.done').fadeIn('slow'); //if process.php returned 0/false (send mail failed) } else alert('Sorry, unexpected error. Please try again later.'); } }); //cancel the submit button default behaviours return false; }); })
</script>
DIV formularza
<div class="contact-form orbit-slide" data-thumb="images/contact-form.png" style="display: block; left: 0px; z-index: 3; opacity: 1;"><div class="done"><strong style="color: #e44d26;">Dziękujemy za przesłanie wiadomości!</strong><br> skontaktujemy się w najbliższym czasie.</div><form method="post" action="contact-form.php"><div class="twelve columns contact-form-div"><div class="eight columns mobile-four-760"><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/62.png" border="0" alt="Contact Name"></span></div> <div class="ten mobile-three columns"><input type="text" placeholder="Imię i Nazwisko / Nazwa firmy" name="name" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/53.png" border="0" alt="Contact Email"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Adres E-mail" name="email" value=""></div></div></div><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/44.png" border="0" alt="Phone Number"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Telefon kontaktowy" name="phonenumber" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/102.png" border="0" alt="Website"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Strona WWW" name="website" value=""></div></div></div><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/71.png" border="0" alt="Project Budget"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Planowany budżet" name="projectbudget" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/159.png" border="0" alt="Timeframe"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Czas realizacji zlecenia" name="timeframe" value=""></div></div></div><div class="six columns first-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/158.png" border="0" alt="You're interested in?"></span></div><div class="ten mobile-three columns"><input type="text" placeholder="Zakres prac" name="youreinterestedin" value=""></div></div></div><div class="six columns middle-column mobile-two-670"><div class="row collapse"><div class="two mobile-one columns"><span class="prefix"><img src="/images/icons/40px/128.png" border="0" alt="How did you hear about us?"></span></div><div class="ten mobile-three columns"><input id="subject" placeholder="Temat" type="text" name="howdidyouhearaboutus" value=""></div></div></div></div><div class="four columns last-column mobile-four-760"><textarea placeholder="Treść wiadomości" name="comment"></textarea></div><div class="twelve columns submit-760"><input id="submit" class="button radius secondary submit-wide" type="submit" value="Wyślij wiadomość"></div></div></form></div>
Skrypt PHP formularza
<?php
//Retrieve form data. //GET - user submitted data using AJAX//POST - in case user does not support javascript, we'll use POST instead$name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];$phonenumber = ($_GET['phonenumber']) ?$_GET['phonenumber'] : $_POST['phonenumber'];$website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];$projectbudget = ($_GET['projectbudget']) ?$_GET['projectbudget'] : $_POST['projectbudget'];$timeframe = ($_GET['timeframe']) ?$_GET['timeframe'] : $_POST['timeframe'];$youreinterestedin = ($_GET['youreinterestedin']) ?$_GET['youreinterestedin'] : $_POST['youreinterestedin'];$howdidyouhearaboutus = ($_GET['howdidyouhearaboutus']) ?$_GET['howdidyouhearaboutus'] : $_POST['howdidyouhearaboutus'];$comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
//flag to indicate which method it uses. If POST set it to 1if ($_POST) $post=1;
//Simple server side validation for POST data, of course, you should validate the emailif (!$name) $errors[count($errors)] = 'Please enter your name.';if (!$email) $errors[count($errors)] = 'Please enter your email.'; if (!$comment) $errors[count($errors)] = 'Please enter your comment.';
//if the errors array is empty, send the mailif (!$errors) {
//recipient $to = 'Biuro <biuro@biuro.pl>'; //sender $from = $name . ' <' . $email . '>'; //subject and the html message $subject = 'Comment from ' . $name; $message = ' <!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></head> <body> <table> <tr><td>Name:</td><td>' . $name . '</td></tr> <tr><td>Email:</td><td>' . $email . '</td></tr> <tr><td>Phone Number:</td><td>' . $phonenumber . '</td></tr> <tr><td>Website:</td><td>' . $website . '</td></tr> <tr><td>Project Budget:</td><td>' . $projectbudget . '</td></tr> <tr><td>Timeframe:</td><td>' . $timeframe . '</td></tr> <tr><td>You Are Interested In:</td><td>' . $youreinterestedin . '</td></tr> <tr><td>How did you hear about us:</td><td>' . $howdidyouhearaboutus . '</td></tr> <tr><td>Message:</td><td>' . nl2br($comment) . '</td></tr> </table> </body> </html>';
//send the mail $result = sendmail($to, $subject, $message, $from); //if POST was used, display the message straight away if ($_POST) { if ($result) echo 'Dziękujemy za przesłanie wiadomości! Skontaktujemy się w najbliższym czasie.'; else echo 'Uppppssss! Coś się wysypało '; //else if GET was used, return the boolean value so that //ajax script can react accordingly //1 means success, 0 means failed } else { echo $result; }
//if the errors array has values} else { //display the errors message for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>'; echo '<a href="form.php">Back</a>'; exit;}
//Simple mail function with HTML headerfunction sendmail($to, $subject, $message, $from) { $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n"; $headers .= 'From: ' . $from . "\r\n"; $result = mail($to,$subject,$message,$headers); if ($result) return 1; else return 0;}
?>