为什么我看到“未定义”的值我在jQuery Mobile中提交表单时在屏幕上？

本文介绍了为什么我看到“未定义”的值我在jQuery Mobile中提交表单时在屏幕上？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的contactus.html页面。我提交到服务器上的一个php页面，它将获取信息并发送电子邮件，并说谢谢。当我提交表格时，即使我能收到电子邮件，我在屏幕上看到的都是未定义。

This is my contactus.html page. I am submitting to a php page on the server that is to take the information and send email alongw ith saying thank you. When I do submitthe form, all I see is "undefined" on screen even though I am able to get the email.

<!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的代码

This is the code for contactus.php on server

<?php
$ToEmail = '[email protected]';
$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。

I'm not sure why you're seeing undefined, but I noticed you are not preventing the default submit action. so your page will still submit rather than executing JS.

你需要做几件事：

阻止默认操作（即提交）

序列化表单数据并通过ajax提交。

所以在代码中它看起来像这样：

So in code it would look something like this:

$(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 Mobile中提交表单时在屏幕上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！