I’m developing a feedback app for a tablet with phonegap-android.
On the main page I have a registration form and on the secondary page I have a star rating with six questions where the user must rate each question. I want to store the results in MySQL. My question is how could I connect the data from the pages because I want to know exactly what each person vote to make a report.
First page looks aprox. like this:
<!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>
And this is the second one with the star rating:
</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>
You use jquery-mobile to have both the pages into one. based on the html5 tags, jqm can identify the pages.
On the success of the ajax call, $.mobile.changePage would be called which will display the page 2 (which is actually a div within the same page). You might want to check the jquery-mobile documentation for more details and function.
But here is the code at least to get you started.