Intereting Posts

Передача переменной с PHP на javascript и на html-форму

У меня есть одна, по общему признанию, очень незначительная проблема с формой контакта, которую я установил в WordPress, используя форму jQuery, jQuery и PHP Mail для отправки электронного письма с формой.

Чтобы заменить мою текущую форму контакта, которая выполняет проверку pHp на странице контактной формы, а затем отправляет с помощью PHP Mail, я разработал следующую простую форму html 5 (которую можно увидеть на этой странице: http: //edge.donaldjenkins .net / контакт ):

<form id="contact" method="post" action=""> <fieldset> <label for="name">Name</label> <input type="text" name="name" placeholder="Your Name" title="Enter your name" class="required"> <label for="email">E-mail</label> <input type="email" name="email" placeholder="yourname@domain.com" title="Enter your e-mail address" class="required email"> <label for="phone">Phone</label> <input type="tel" name="phone" placeholder="ex. (555) 555-5555"> <label for="website">Website</label> <input type="url" name="url" placeholder="http://"> <label for="message">Question/Message</label> <textarea name="message"></textarea> <label for="checking" class="hidden">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" class="hidden"> <input type="submit" name="submit" class="button" id="submit" value="Send Message" /> </fieldset> 

Затем я использую jQuery validate [jquery.validate.js] и формы [jquery.form.js] для выполнения проверки на стороне клиента:

 <script src="js/jquery.validate.js"></script> <script src="js/jquery.form.js"></script> <script> $(function(){ $('#contact').validate({ submitHandler: function(form) { $(form).ajaxSubmit({ url: 'send-message.php', success: function() { $('#contact').hide(); $('#instructions').hide(); $('#status').show(); $('#popular-posts').show(); $('#status').append("<p>Thanks! Your request has been sent. One will try to get back to you as soon as possible.</p>") } }); } }); }); </script> 

После проверки, приведенный выше сценарий использует функцию ajaxSubmit jQuery.form для отправки даты на страницу PHP-сервера send-message.php (причина в том, что javascript не может отправлять электронную почту). Я использую этот файл PHP для выполнения второй проверки данных на стороне сервера (хотя это, вероятно, избыточно, поскольку, поскольку установка использует javascript для передачи данных на сервер, можно смело предположить, что никто не будет возможность использования формы без javascript включен). Он также выполняет проверку captcha чек на данные в скрытом поле ввода, добавленном в форму. Затем отправляется электронное письмо:

 <?php //invoke wp_load in order to use WordPress wp_mail plugin function instead of mail for better authentification of the sent email require_once("/path/to/wp-load.php"); //Check to see if the honeypot captcha field was filled in if(trim($_POST['checking']) !== '') { $captchaError = true; $errors .= "\n Error: Captcha field filled in"; } else { //Check to make sure that the name field is not empty if(trim($_POST['name']) === '') { $errors .= "\n Error: Name field empty"; $hasError = true; } else { $name = strip_tags($_POST['name']); } //Check to make sure sure that a valid email address is submitted if(trim($_POST['email']) === '') { $emailError = 'You forgot to enter your email address.'; $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[AZ]{2,4}$", trim($_POST['email']))) { $errors .= "\n Error: Message field empty"; $hasError = true; } else { $email = strip_tags($_POST['email']); } //Check to make sure comments were entered if(trim($_POST['message']) === '') { $errors .= "\n Error: Message field empty"; $hasError = true; } else { $phone = strip_tags($_POST['phone']); $url = strip_tags($_POST['url']); if(function_exists('stripslashes')) { $message = stripslashes(trim($_POST['message'])); } else { $message = strip_tags($_POST['message']); } } //If there is no error, send the email if(!isset($hasError)) { // Send Message $emailTo = 'me@mydomain.com'; $subject = 'Contact Form Submission from '.$name; $body = "Name: $name \n\nEmail: $email \n\nPhone: $phone \n\nWebsite: $url \n\nMessage: $message"; $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email; wp_mail($emailTo, $subject, $body, $headers); $alert = 'Thanks! Your request has been sent. One will try to get back to you as soon as possible.'; } else { $alert = $errors; } } ?> по <?php //invoke wp_load in order to use WordPress wp_mail plugin function instead of mail for better authentification of the sent email require_once("/path/to/wp-load.php"); //Check to see if the honeypot captcha field was filled in if(trim($_POST['checking']) !== '') { $captchaError = true; $errors .= "\n Error: Captcha field filled in"; } else { //Check to make sure that the name field is not empty if(trim($_POST['name']) === '') { $errors .= "\n Error: Name field empty"; $hasError = true; } else { $name = strip_tags($_POST['name']); } //Check to make sure sure that a valid email address is submitted if(trim($_POST['email']) === '') { $emailError = 'You forgot to enter your email address.'; $hasError = true; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[AZ]{2,4}$", trim($_POST['email']))) { $errors .= "\n Error: Message field empty"; $hasError = true; } else { $email = strip_tags($_POST['email']); } //Check to make sure comments were entered if(trim($_POST['message']) === '') { $errors .= "\n Error: Message field empty"; $hasError = true; } else { $phone = strip_tags($_POST['phone']); $url = strip_tags($_POST['url']); if(function_exists('stripslashes')) { $message = stripslashes(trim($_POST['message'])); } else { $message = strip_tags($_POST['message']); } } //If there is no error, send the email if(!isset($hasError)) { // Send Message $emailTo = 'me@mydomain.com'; $subject = 'Contact Form Submission from '.$name; $body = "Name: $name \n\nEmail: $email \n\nPhone: $phone \n\nWebsite: $url \n\nMessage: $message"; $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email; wp_mail($emailTo, $subject, $body, $headers); $alert = 'Thanks! Your request has been sent. One will try to get back to you as soon as possible.'; } else { $alert = $errors; } } ?> 

Сервер отслеживает, были ли обнаружены ошибки или успешно отправлено письмо в переменной $ alert.

После завершения функции pHp скрипт скрывает форму со страницы контакта и отображает ранее скрытый элемент html, к которому он добавляет предупреждающее сообщение.

Проблема, которую я не могу решить, заключается в том, что javascript меняет формулировку этого сообщения оповещений, чтобы определить, было ли письмо отправлено или не было успешно отправлено, потому что я не знаю, как передать необходимую переменную pHp ($ alert), содержащую список сообщения об ошибках в процессе сервера PHP для скрипта для вставки на странице контактной формы. Конечно, опять же, это очень теоретическая проблема, поскольку по причинам, указанным выше, маловероятно, что сообщение с ошибкой даже достигло этапа PHP в первую очередь.

Я пробовал вставить следующий код в конец файла PHP, безрезультатно:

 <script type="text/javascript"> alert = <?php echo $alert; ?>; </script> 

Последняя попытка не вызывает ошибок в Firebug, но значение переменной не передается. Любые идеи или мысли приветствуются.

UPDATE : я добавил эту диаграмму рабочего процесса, чтобы уточнить настройку для этой проблемы: введите описание изображения здесь

Related of "Передача переменной с PHP на javascript и на html-форму"

В send-message.php поместите текст предупреждения в IDd <div /> :

 <div id="statusmsg" style="display: none"> <?php echo $alert ?> </div> 

Тогда ваш Javascript на вызывающей странице должен выглядеть так:

 <script type="text/javascript"> $(function() { $('#contact').validate({ submitHandler: function(form) { $(form).ajaxSubmit({ url: 'send-message.php', success: function(data) { $('#contact').hide(); $('#instructions').hide(); $('#status').show(); $('#popular-posts').show(); // Make DOM object from result var $DOMObj = $(data); // Retrieve status message, if any var $status = $('#statusmsg', $DOMObj); // Show status message, if any if ($status) { $status .css('display', '') .appendTo('#status'); } } }); } }); }); </script> 

Надеюсь, вы увидите, как я использовал параметр для обратного вызова success для извлечения содержимого HTML ответа AJAX-запроса, расположенного в div statusmsg и добавляя его к соответствующему элементу на вызывающей странице.

Более оптимально, send-message.php будет печатать JSON, а не HTML, делая этот процесс немного проще. Я оставлю это как упражнение для читателя .. по крайней мере в этом вопросе.

Вы хотите вернуть успех или отказ электронной почты в ответ на вызов AJAX.

В этом примере примера вы можете просто вернуть false или true . Если вам нужна дополнительная информация, верните строку JSON, такую ​​как …

 { "success": true, "something": ["something", "something-else"] } 

Вы можете легко превратить массив в JSON в PHP с помощью json_encode() .