我正在为带有phonegap-android的平板电脑开发一个反馈应用程序。 在主页面上我有一个注册表格,在二级页面上,我有六个问题的星级评分,用户必须对每个问题进行评分。我想将结果存储在MySQL中。我的问题是如何连接页面中的数据,因为我想知道每个人投票的确切报告。
第一页看起来很有用。像这样:
<!DOCTYPE html>
<html>
<head>
<title>Contact with Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#form').validate({
rules:{
"name":{
required:true,
maxlength:40
},
"email":{
required:true,
email:true,
maxlength:100
},
"message":{
required:true
}},
messages:{
"name":{
required:"This field is required"
},
"email":{
required:"This field is required",
email:"Please enter a valid email address"
},
"message":{
required:"This field is required"
}},
submitHandler: function(form){
$(form).ajaxSubmit({
target: '#preview',
success: function() {
$('#formbox').slideUp('fast');
}
});
}
})
});
</script>
<style type="text/css">
ul
{
list-style:none;
width:100%;
margin: 0;
padding: 0;
}
ul li
{
padding-top:5px;
padding-bottom:5px;
margin-bottom:10px;
clear:left;
position: relative;
}
ul li label
{
width:20%;
display: block;
margin-right:2%;
text-align:left;
line-height:22px;
}
ul li span.error
{
font: 11px arial;
color:red;
margin-left:8px;
line-height:22px;
}
ul li span.passerror
{
display: block;
font: 11px arial;
color:red;
margin-left:8px;
line-height:22px;
}
ul li .shortfield{
width: 45px;
}
</style>
</head>
<body>
<a href="http://9lessons.info">http://9lessons.info</a>
<div id="preview"></div>
<div id="formbox">
<form name="form" id="form" action="submit.php" method="post">
<ul id="ngothastyle3">
<li>
<label>Name</label>
<input type="text" name="name" class="" maxlength="40" />
</li>
<li>
<label>Email</label>
<input type="text" name="email" class="" maxlength="100" />
</li>
<li>
<label>Message</label>
<textarea name="message" rows="5" cols="45" class=""></textarea>
</li>
<li>
<label> </label>
<input type="submit" value="Submit">
</li>
</ul>
</form> </div>
</body>
</html>
这是第二个获得星级评分的人:
</head>
<body>
<div id="tab-Testing">
<script>
$(function(){
$('#tab-Testing form').submit(function(){
$('.test',this).html('');
$('input',this).each(function(){
if(this.checked) $('.test',this.form).append(''+this.name+': '+this.value+'<br/>');
});
return false;
});
});
</script>
<div class="Clear"> </div>
<form id="form1">
<strong style='font-size:150%'>Test 1</strong> - A blank form
<table width="100%" cellspacing="10"> <tr>
<td valign="top" width="">
<table width="100%">
<tr>
<td valign="top" width="50%">
<div class="Clear">
Intrebarea 1:bla bla bla
<input class="star required" type="radio" name="test-1-rating-1" value="1"/>
<input class="star" type="radio" name="test-1-rating-1" value="2"/>
<input class="star" type="radio" name="test-1-rating-1" value="3"/>
<input class="star" type="radio" name="test-1-rating-1" value="4"/>
<input class="star" type="radio" name="test-1-rating-1" value="5"/>
</div>
<br/>
<div class="Clear">
Intrebarea 2:bla bla bla
<input class="star required" type="radio" name="test-1-rating-2" value="1"/>
<input class="star" type="radio" name="test-1-rating-2" value="2"/>
<input class="star" type="radio" name="test-1-rating-2" value="3"/>
<input class="star" type="radio" name="test-1-rating-2" value="4"/>
<input class="star" type="radio" name="test-1-rating-2" value="5"/>
</div>
<br/>
<div class="Clear">
Intrebarea 3:bla bla bla
<input class="star required" type="radio" name="test-1-rating-3" value="1"/>
<input class="star" type="radio" name="test-1-rating-3" value="2"/>
<input class="star" type="radio" name="test-1-rating-3" value="3"/>
<input class="star" type="radio" name="test-1-rating-3" value="4"/>
<input class="star" type="radio" name="test-1-rating-3" value="5"/>
</div>
<br>
<div class="Clear">
Intrebarea 4:bla bla bla
<input class="star required" type="radio" name="test-1-rating-4" value="1" title="Worst"/>
<input class="star" type="radio" name="test-1-rating-4" value="2" title="Bad"/>
<input class="star" type="radio" name="test-1-rating-4" value="3" title="OK"/>
<input class="star" type="radio" name="test-1-rating-4" value="4" title="Good"/>
<input class="star" type="radio" name="test-1-rating-4" value="5" title="Best"/>
</div>
<br/>
<div class="Clear">
Intrebarea 5:bla bla bla
<input class="star required" type="radio" name="test-1-rating-5" value="1"/>
<input class="star" type="radio" name="test-1-rating-5" value="2"/>
<input class="star" type="radio" name="test-1-rating-5" value="3"/>
<input class="star" type="radio" name="test-1-rating-5" value="4"/>
<input class="star" type="radio" name="test-1-rating-5" value="5"/>
</div>
<br/>
<div class="Clear">
Intrebarea 6:bla bla bla
<input class="star required" type="radio" name="test-1-rating-6" value="1" />
<input class="star" type="radio" name="test-1-rating-6" value="2" />
<input class="star" type="radio" name="test-1-rating-6" value="3" />
<input class="star" type="radio" name="test-1-rating-6" value="4" />
<input class="star" type="radio" name="test-1-rating-6" value="5" />
</div>
</td>
</tr>
</table>
</td>
<td valign="top" width="5"> </td> <td valign="top" width="50">
<input type="submit" value="Submit scores!" /> </td>
<td valign="top" width="5"> </td> <td valign="top" width="160">
<u>Test results</u>:<br/><br/>
<div class="test Smaller">
<span style="color:#FF0000">Results will be displayed here</span>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
答案 0 :(得分:1)
您使用jquery-mobile将这两个页面合二为一。基于html5标签,jqm可以识别页面。
关于ajax调用的成功,将调用$ .mobile.changePage,它将显示第2页(实际上是同一页面中的div)。您可能需要查看jquery-mobile文档以获取更多详细信息和功能。
但这里的代码至少可以帮助你入门。
<!-- language-all: lang-html -->
<html>
<head>
<title>Contact with Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function () {
$('#form').validate({
rules: {
"name": {
required: true,
maxlength: 40
},
"email": {
required: true,
email: true,
maxlength: 100
},
"message": {
required: true
}},
messages: {
"name": {
required: "This field is required"
},
"email": {
required: "This field is required",
email: "Please enter a valid email address"
},
"message": {
required: "This field is required"
}},
submitHandler: function (form) {
$("#form1").ajaxSubmit({
target: '#preview',
success: function () {
$('#formbox').slideUp('fast');
$.mobile.changePage("#two");
}
});
}
})
});
$(function () {
$('#tab-Testing form2').submit(function () {
$('.test', this).html('');
$('input', this).each(function () {
if (this.checked)
$('.test', this.form).append('' + this.name + ': ' + this.value + '<br/>');
});
return false;
});
});
</script>
<style type="text/css">
ul
{
list-style:none;
width:100%;
margin: 0;
padding: 0;
}
ul li
{
padding-top:5px;
padding-bottom:5px;
margin-bottom:10px;
clear:left;
position: relative;
}
ul li label
{
width:20%;
display: block;
margin-right:2%;
text-align:left;
line-height:22px;
}
ul li span.error
{
font: 11px arial;
color:red;
margin-left:8px;
line-height:22px;
}
ul li span.passerror
{
display: block;
font: 11px arial;
color:red;
margin-left:8px;
line-height:22px;
}
ul li .shortfield{
width: 45px;
}
</style>
</head>
<body>
<div data-role="page" id="one">
<div data-role="content" >
<a href="http://9lessons.info">http://9lessons.info</a>
<div id="preview"></div>
<div id="formbox">
<form name="form" id="form1" action="submit.php" method="post">
<ul id="ngothastyle3">
<li>
<label>Name</label>
<input type="text" name="name" class="" maxlength="40" />
</li>
<li>
<label>Email</label>
<input type="text" name="email" class="" maxlength="100" />
</li>
<li>
<label>Message</label>
<textarea name="message" rows="5" cols="45" class=""></textarea>
</li>
<li>
<label> </label>
<input type="submit" value="Submit">
</li>
</ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="two" data-theme="a">
<div data-role="content" data-theme="a">
<div id="tab-Testing">
<div class="Clear"> </div>
<form id="form2">
<strong style='font-size:150%'>Test 1</strong> - A blank form
<table width="100%" cellspacing="10"> <tr>
<td valign="top" width="">
<table width="100%">
<tr>
<td valign="top" width="50%">
<div class="Clear">
Intrebarea 1:bla bla bla
<input class="star required" type="radio" name="test-1-rating-1" value="1"/>
<input class="star" type="radio" name="test-1-rating-1" value="2"/>
<input class="star" type="radio" name="test-1-rating-1" value="3"/>
<input class="star" type="radio" name="test-1-rating-1" value="4"/>
<input class="star" type="radio" name="test-1-rating-1" value="5"/>
</div>
<br/>
<div class="Clear">
Intrebarea 2:bla bla bla
<input class="star required" type="radio" name="test-1-rating-2" value="1"/>
<input class="star" type="radio" name="test-1-rating-2" value="2"/>
<input class="star" type="radio" name="test-1-rating-2" value="3"/>
<input class="star" type="radio" name="test-1-rating-2" value="4"/>
<input class="star" type="radio" name="test-1-rating-2" value="5"/>
</div>
<br/>
<div class="Clear">
Intrebarea 3:bla bla bla
<input class="star required" type="radio" name="test-1-rating-3" value="1"/>
<input class="star" type="radio" name="test-1-rating-3" value="2"/>
<input class="star" type="radio" name="test-1-rating-3" value="3"/>
<input class="star" type="radio" name="test-1-rating-3" value="4"/>
<input class="star" type="radio" name="test-1-rating-3" value="5"/>
</div>
<br>
<div class="Clear">
Intrebarea 4:bla bla bla
<input class="star required" type="radio" name="test-1-rating-4" value="1" title="Worst"/>
<input class="star" type="radio" name="test-1-rating-4" value="2" title="Bad"/>
<input class="star" type="radio" name="test-1-rating-4" value="3" title="OK"/>
<input class="star" type="radio" name="test-1-rating-4" value="4" title="Good"/>
<input class="star" type="radio" name="test-1-rating-4" value="5" title="Best"/>
</div>
<br/>
<div class="Clear">
Intrebarea 5:bla bla bla
<input class="star required" type="radio" name="test-1-rating-5" value="1"/>
<input class="star" type="radio" name="test-1-rating-5" value="2"/>
<input class="star" type="radio" name="test-1-rating-5" value="3"/>
<input class="star" type="radio" name="test-1-rating-5" value="4"/>
<input class="star" type="radio" name="test-1-rating-5" value="5"/>
</div>
<br/>
<div class="Clear">
Intrebarea 6:bla bla bla
<input class="star required" type="radio" name="test-1-rating-6" value="1" />
<input class="star" type="radio" name="test-1-rating-6" value="2" />
<input class="star" type="radio" name="test-1-rating-6" value="3" />
<input class="star" type="radio" name="test-1-rating-6" value="4" />
<input class="star" type="radio" name="test-1-rating-6" value="5" />
</div>
</td>
</tr>
</table>
</td>
<td valign="top" width="5"> </td> <td valign="top" width="50">
<input type="submit" value="Submit scores!" /> </td>
<td valign="top" width="5"> </td> <td valign="top" width="160">
<u>Test results</u>:<br/><br/>
<div class="test Smaller">
<span style="color:#FF0000">Results will be displayed here</span>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>