Это моя страница contactus.html. Я отправляю на php-страницу на сервере, которая должна взять информацию и отправить электронное письмо вместе с благодарностью. Когда я передаю форму, все, что я вижу, является «неопределенным» на экране, хотя я могу получить электронное письмо.
<!DOCTYPE html> <html> <head> <title>Contact Us</title> <link rel="stylesheet" href="css/latestjquerymobile.css" /> <link rel="stylesheet" type="text/css" href="css/jquery.mobile.simpledialog.min.css" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/latestjquerymobile.js"></script> <script type="text/javascript" src="js/jquery.mobile.simpledialog.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#contactus").submit(function(event) { alert("page submitted"); }) }); </script> </head> <body> <div data-role="page" data-theme="e" id="contactus"> <div data-role="header" data-position="fixed"> <h1>Contact Us</h1> <a href="home.html" data-icon="back" class="ui-btn-left" data-ajax="false">Back</a> <a href="home.html" data-icon="home" class="ui-btn-right" data-ajax="false">Home</a> </div><!-- /header --> <div data-role="content"> <div align="center"> <form action="http://testsite.com/contactus.php" name="contactus" id="contactus" method="post"> <fieldset> <div data-role="fieldcontain"> <label for="name"> Name:</label> <input id="name" name="name" type="text" /> <label for="email">Email:</label> <input id="email" name="email" type="text" /> <label for="contact">Contact:</label> <input id="contact" name="contact" type="text" /> <label for="message">Message:</label> <textarea rows="4" cols="50" id="message" name="message"></textarea> <br /> <button type="submit" name="submit" value="submit-value">Send</button> </fieldset> </div> </form> <div><br><br> <a href="http://www.facebook.com/Apsession"><img src="images/facebook.png" border="0" /></a> <a href="http://twitter.com/ApsessionMobile"><img src="images/twitter.png" border="0" /></a> </div> </div> </div><!-- /content --> </div><!-- /page --> </body> </html> Это код для contactus.php на сервере
<?php $ToEmail = 'test@testemail.com'; $EmailSubject = 'Contact Form Submission from testsite.com'; $mailheader = "From: ".$_POST["email"]."\r\n"; $mailheader .= "Reply-To: ".$_POST["email"]."\r\n"; $mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; $MESSAGE_BODY = "Name: ".$_POST["name"]."<br>"; $MESSAGE_BODY .= "Email: ".$_POST["email"]."<br>"; $MESSAGE_BODY .= "Contact: ".$_POST["contact"]."<br>"; $MESSAGE_BODY .= "Message: ".$_POST["message"]."<br>"; mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); ?> <html> <body> THANK YOU </body> </html>
Я не уверен, почему вы видите undefined , но я заметил, что вы не препятствуете действию отправки по умолчанию. поэтому ваша страница все равно будет отправляться, а не выполнять JS.
Вам нужно сделать пару вещей:
Таким образом, в коде он будет выглядеть примерно так:
$(document).ready(function() { //Cache DOM reference var form = $("#contactus"); form.submit(function(event) { //Prevent the form from regular (non-js) submission event.preventDefault(); //Serialize your data, using jQuery to make it easer var data = form.serialize(); //Submit via ajax $.post( form.attr('action'), data, function(response) { //You should modify your PHP to return a success or error code, then //handle appropriately here - eg if (response === 'success") {... } ); }); });
Причина, по которой вы получаете неопределенное значение, заключается в том, что вы отправляете сообщение на недействительную мобильную страницу jQuery. Поэтому убедитесь, что сервер возвращает допустимую HTML-страницу jquery mobile.
Создайте свою мобильную форму jquery
Установите атрибут action="/mobile.html" и method="post" (или получите)
Затем убедитесь, что страница mobile.html (или все, что вы хотите назвать) возвращает действительную jQuery мобильную HTML-страницу.
Если вы не знаете, какая действительная jQuery мобильная HTML-страница, проверьте веб-сайт jquery mobile.
<script type="text/javascript"> $(document).ready(function() { $("#contactus").submit(function(event) { alert("page submitted"); }) }); </script>
Вам не нужно использовать выше JS-кодирование. Просто используйте встроенную кнопку «Отправить». И проверьте следующую ссылку