javascript 当我在 jQuery Mobile 中提交表单时，为什么我在屏幕上看到“未定义”的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7787461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why am I seeing a value of "undefined" on screen when I submit form in jQuery Mobile?
提问by jini
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.
这是我的contactus.html 页面。我正在提交到服务器上的一个 php 页面，该页面将获取信息并发送电子邮件并表示感谢。当我提交表单时，即使我能够收到电子邮件，我在屏幕上看到的只是“未定义”。
<!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
这是服务器上contactus.php的代码
<?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>
采纳答案by Philip Schweiger
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.
我不确定您为什么会看到undefined，但我注意到您没有阻止默认提交操作。所以你的页面仍然会提交而不是执行 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.
- 防止默认操作（即提交）
- 序列化你的表单数据并通过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") {...
}
);
});
});
回答by Christophe
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.
您获得未定义值的原因是因为您发布到无效的 jQuery 移动页面。因此，请确保服务器返回有效的 jquery 移动 HTML 页面。
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.
创建您的 jquery 移动表单
设置属性
action="/mobile.html"和method="post"（或获取）然后确保页面 mobile.html（或任何您想调用的名称）返回一个有效的 jQuery mobile HTML 页面。
If you don't know what a valid jquery mobile HTML page is, check the jquery mobile website.
如果您不知道什么是有效的 jquery mobile HTML 页面，请查看 jquery mobile网站。
回答by PPShein
<script type="text/javascript">
$(document).ready(function() {
$("#contactus").submit(function(event) {
alert("page submitted");
})
});
</script>
You don't need to use above JS coding. Just use native Submit button. And check following link
你不需要使用上面的 JS 编码。只需使用本机提交按钮。并检查以下链接
