¿Por qué veo un valor de "indefinido" en la pantalla cuando envío el formulario en jQuery Mobile?

Esta es mi página contactus.html. Me estoy enviando a una página php en el servidor que tomará la información y enviará un correo electrónico junto con las palabras de agradecimiento. Cuando envío el formulario, todo lo que veo está "indefinido" en la pantalla a pesar de que puedo recibir el correo electrónico.¿Por qué veo un valor de "indefinido" en la pantalla cuando envío el formulario en 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>

Este es el código para contactus.php en el servidor

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

Fuente

2011-10-16 jini

No estoy seguro de por qué se está viendo undefined, pero me di cuenta de que no están impidiendo el valor por defecto presentar la acción. por lo tanto, su página seguirá enviando en lugar de ejecutar JS.

Usted tendrá que hacer un par de cosas:

evitar la acción por defecto (es decir, la sumisión)
serializar los datos del formulario y enviarlo por ajax.

Así que en el código se vería algo como esto:

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

    }); 

});

Fuente

2011-10-17 02:32:09

Philip, gracias por la gran sugerencia, sin embargo, jQuery Mobile evita cualquier envío de ajax una vez que obtiene el "#" en la URL desde que esta página fue inyectada en el DOM. Desearía poder hacer lo anterior. – jini

Eso está muy mal: no estoy seguro de cómo podrá ejecutar cualquier JS confiablemente después del envío, ya que siempre será una condición de carrera entre la carga de la página de acción y la ejecución de JS. –

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

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

        alert("page submitted"); 


}) 

}); 
</script>

No es necesario utilizar por encima de JS codificación. Solo usa el botón Enviar nativo. Y comprobar siguiente enlace

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

Fuente

2011-10-17 02:09:54 ppshein

La razón por la que obtiene un valor indefinido se debe a que usted publique en una página móvil jQuery no válida. Por lo tanto, asegúrese de que el servidor devuelva una página HTML móvil jquery válida.

Cree su forma móvil jQuery
Establecer el atributo action="/mobile.html" y method="post" (o conseguir)
A continuación, asegúrese de que la mobile.html página (o como se quiera llamarlo) vuelve una página HTML móvil jQuery válida.

Si usted no sabe lo que es una página HTML móvil jQuery es válida, compruebe el jQuery Mobile website.

Fuente

2012-01-10 01:03:17 Christophe

¿Por qué veo un valor de "indefinido" en la pantalla cuando envío el formulario en jQuery Mobile?

Respuesta

Cuestiones relacionadas