Php 具有星级的表单通过ajax插入mysql
我正在为一款搭载phonegap android的平板电脑开发一款反馈应用程序。 在主页上,我有一个注册表格,在第二页,我有一个星级评分,有六个问题,用户必须对每个问题进行评分。我想将结果存储在MySQL中。我的问题是如何连接页面中的数据,因为我想知道每个人投票制作报告的确切内容 第一页看起来差不多。像这样:Php 具有星级的表单通过ajax插入mysql,php,javascript,jquery,ajax,cordova,Php,Javascript,Jquery,Ajax,Cordova,我正在为一款搭载phonegap android的平板电脑开发一款反馈应用程序。 在主页上,我有一个注册表格,在第二页,我有一个星级评分,有六个问题,用户必须对每个问题进行评分。我想将结果存储在MySQL中。我的问题是如何连接页面中的数据,因为我想知道每个人投票制作报告的确切内容 第一页看起来差不多。像这样: <!DOCTYPE html> <html> <head> <title>Contact with Valid
<!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>
与验证部门的联系
$('document').ready(函数(){
$(“#表单”)。验证({
规则:{
“姓名”:{
要求:正确,
最大长度:40
},
“电子邮件”:{
要求:正确,
电子邮件:是的,
最大长度:100
},
“信息”:{
必填项:true
}},
信息:{
“姓名”:{
必填:“此字段为必填字段”
},
“电子邮件”:{
必填项:“此字段为必填项”,
电子邮件:“请输入有效的电子邮件地址”
},
“信息”:{
必填:“此字段为必填字段”
}},
submitHandler:函数(表单){
$(表格).ajaxSubmit({
目标:“#预览”,
成功:函数(){
$(“#formbox”).slideUp('fast');
}
});
}
})
});
保险商实验室
{
列表样式:无;
宽度:100%;
保证金:0;
填充:0;
}
ulli
{
垫面:5px;
垫底:5px;
边缘底部:10px;
清除:左;
位置:相对位置;
}
ul li标签
{
宽度:20%;
显示:块;
保证金权利:2%;
文本对齐:左对齐;
线高:22px;
}
ulli span.错误
{
字体:11px arial;
颜色:红色;
左边距:8px;
线高:22px;
}
ul li span.passeror
{
显示:块;
字体:11px arial;
颜色:红色;
左边距:8px;
线高:22px;
}
李.肖特菲尔德{
宽度:45px;
}
-
名称
-
电子邮件
-
消息
-
这是第二个星级的:
</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>
$(函数(){
$('#选项卡测试表单')。提交(函数(){
$('.test',this.html('');
$('input',this).each(函数(){
如果(this.checked)$('.test',this.form).append(''+this.name+':'+this.value+'
');
});
返回false;
});
});
测试1-空白表格
IntreBeara 1:bla bla bla bla
IntreBeara 2:bla bla bla bla
IntreBeara 3:bla bla bla bla
IntreBeara 4:bla bla bla bla
IntreBeara 5:bla bla bla bla
IntreBeara 6:bla bla bla bla
测试结果:
结果将显示在此处
您可以使用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>
与验证部门的联系
$('document').ready(函数(){
$(“#表单”)。验证({
规则:{
“姓名”:{
要求:正确,
最大长度:40
},
“电子邮件”:{
要求:正确,
电子邮件:是的,
最大长度:100
},
“信息”:{
必填项:true
}},
信息:{
“姓名”:{
必填:“此字段为必填字段”
},
“电子邮件”:{
必填项:“此字段为必填项”,
电子邮件:“请输入有效的电子邮件地址”
},
“信息”:{
必填:“此字段为必填字段”
}},
submitHandler:函数(表单){
$(“#fo