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

2021-12-27 00:00:00 php javascript jquery-mobile

这是我的 contactus.html 页面.我正在提交到服务器上的一个 php 页面，该页面将获取信息并发送电子邮件并表示感谢.当我提交表单时，尽管我能够收到电子邮件，但我在屏幕上看到的只是未定义".

<头><title>联系我们</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("页面提交");})});<身体><div data-role="page" data-theme="e" id="contactus"><div data-role="header" data-position="fixed"><h1>联系我们</h1><a href="home.html" data-icon="back" class="ui-btn-left" data-ajax="false">返回</a><a href="home.html" data-icon="home" class="ui-btn-right" data-ajax="false">首页</a></div><!--/header --><div data-role="内容"><div align="center"><form action="http://testsite.com/contactus.php" name="contactus" id="contactus" method="post"><字段集><div data-role="fieldcontain"><label for="name">名称:</label><input id="name" name="name" type="text"/><label for="email">电子邮件:</label><input id="email" name="email" type="text"/><label for="contact">联系人:</label><input id="contact" name="contact" type="text"/><label for="message">消息:</label><textarea rows="4" cols="50" id="message" name="message"></textarea><br/><button type="submit" name="submit" value="submit-value">发送</button></fieldset>
</表单><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><!--/content --></div><!--/page -->

这是服务器上contactus.php的代码

<身体>谢谢

解决方案

我不知道你为什么看到 undefined，但我注意到你没有阻止默认提交操作.所以你的页面仍然会提交而不是执行 JS.

您需要做几件事:

  1. 阻止默认操作(即提交)
  2. 序列化您的表单数据并通过 ajax 提交.

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

$(document).ready(function() {//缓存DOM引用var form = $("#contactus");表单.提交(功能(事件){//防止表单常规(非js)提交event.preventDefault();//序列化你的数据，使用jQuery让它更容易var data = form.serialize();//通过ajax提交$.post(form.attr('动作'),数据，功能(响应){//您应该修改您的PHP以返回成功或错误代码，然后//在这里适当地处理 - 例如 if (response === 'success") {...});});});

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>

This is the code for contactus.php on server

<?php 
$ToEmail = 'test@testemail.com'; 
$EmailSubject = 'Contact Form Submission from testsite.com'; 
$mailheader = "From: ".$_POST["email"]."
"; 
$mailheader .= "Reply-To: ".$_POST["email"]."
"; 
$mailheader .= "Content-type: text/html; charset=iso-8859-1
"; 
$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>

解决方案

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.

You'll need to do a couple things:

  1. Prevent the default action (ie the submission)
  2. Serialize your form data and submit it via 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") {...
          }    
        );

     });

});

相关文章