0

我正在为带有 phonegap-android 的平板电脑开发一个反馈应用程序。在主页上,我有一个注册表单,在二级页面上,我有六个问题的星级评分,用户必须对每个问题进行评分。我想将结果存储在 MySQL 中。我的问题是我如何连接页面中的数据,因为我想确切地知道每个人投票来制作报告的确切内容。

第一页看起来 aprox。像这样:

<!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>&nbsp;</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">&nbsp;</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">&nbsp;</td>  <td valign="top" width="50">
   <input type="submit" value="Submit scores!" />  </td>
  <td valign="top" width="5">&nbsp;</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>
4

1 回答 1

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>&nbsp;</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">&nbsp;</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">&nbsp;</td>  <td valign="top" width="50">
                                    <input type="submit" value="Submit scores!" />  </td>
                                <td valign="top" width="5">&nbsp;</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>
于 2012-11-16T05:40:41.313 回答