2011-10-16 28 views
7

Đây là trang contactus.html của tôi. Tôi đang gửi một trang php trên máy chủ đó là để có các thông tin và gửi email alongw ith nói cảm ơn bạn. Khi tôi gửi biểu mẫu, tất cả những gì tôi thấy là "không xác định" trên màn hình mặc dù tôi có thể nhận được email.Tại sao tôi thấy giá trị "không xác định" trên màn hình khi tôi gửi biểu mẫu trong jQuery Mobile?

<!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> 

Đây là mã cho contactus.php trên máy chủ

<?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> 

Trả lời

4

Tôi không chắc chắn lý do tại sao bạn đang thấy undefined, nhưng tôi nhận thấy bạn không chặn mặc định nộp hành động. do đó, trang của bạn sẽ vẫn gửi thay vì thực thi JS.

Bạn sẽ cần phải làm một vài điều:

  1. Ngăn chặn hành động mặc định (tức là nộp hồ sơ)
  2. Serialize dữ liệu mẫu của bạn và gửi nó qua ajax.

Vì vậy, trong mã nó sẽ giống như thế này:

$(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") {... 
      }  
     ); 

    }); 

}); 
+0

Philip, cảm ơn cho suggesstion tuyệt vời tuy nhiên jQuery Mobile ngăn chặn bất kỳ đệ trình ajax khi bạn nhận được "#" trong URL kể từ khi trang này được tiêm vào DOM. Tôi ước tôi có thể làm như trên. – jini

+0

Đó là quá xấu - không chắc chắn làm thế nào bạn sẽ có thể chạy đáng tin cậy bất kỳ JS sau khi gửi, sau đó, vì nó sẽ luôn luôn là một điều kiện chủng tộc giữa tải trang hành động của bạn và thực thi JS. –

0
<script type="text/javascript"> 
    $(document).ready(function() { 

        $("#contactus").submit(function(event) { 

        alert("page submitted"); 


}) 

}); 
</script> 

Bạn không cần phải sử dụng trên JS mã hóa. Chỉ cần sử dụng nút Gửi gốc. Và kiểm tra sau liên kết

http://jquerymobile.com/test/docs/forms/forms-sample.html

4

Lý do bạn nhận được một giá trị không xác định là bởi vì bạn gửi đến một trang di động jQuery không hợp lệ. Vì vậy, hãy chắc chắn rằng máy chủ trả về một trang HTML di động jquery hợp lệ.

  1. Tạo hình điện thoại di động của bạn jquery

  2. Đặt thuộc tính action="/mobile.html"method="post" (hoặc nhận)

  3. Sau đó, chắc chắn rằng các mobile.html trang (hoặc bất cứ điều gì bạn muốn gọi nó) lợi nhuận một trang HTML di động jQuery hợp lệ.

Nếu bạn không biết trang HTML di động jquery hợp lệ là gì, hãy kiểm tra điện thoại di động jquery website.

Các vấn đề liên quan