phonegap-androidを搭載したタブレット用のフィードバックアプリを開発しています。メインページには登録フォームがあり、セカンダリページには6つの質問がある星評価があり、ユーザーは各質問を評価する必要があります。結果を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>
そして、これは星の評価を持つ2番目のものです：
</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>