Why am I seeing a value of "undefined" on screen when I submit form in jQuery Mobile?
Solution 1
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:
- Prevent the default action (ie the submission)
- 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") {...
}
);
});
});
Solution 2
The reason you get an undefined value is because you post to a non-valid jQuery mobile page. So make sure the server returns a valid jquery mobile HTML page.
Create your jquery mobile form
Set the attribute
action="/mobile.html"
andmethod="post"
(or get)Then make sure the page mobile.html (or whatever you want to call it) returns a valid jQuery mobile HTML page.
If you don't know what a valid jquery mobile HTML page is, check the jquery mobile website.
jini
Updated on July 13, 2022Comments
-
jini almost 2 years
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 = '[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>
-
jini over 12 yearsPhilip, thanks for the great suggesstion however jQuery Mobile prevents any ajax submissions once you get the "#" in the URL since this page was injected into the DOM. I wish i could do the above.
-
Philip Schweiger over 12 yearsThat's too bad - not sure how you will be able to reliably run any JS after submission, then, as it'll always be a race condition between your action page loading and the JS executing.