Jquery在一个页面上验证并提交更多表单

时间:2014-01-08 08:19:01

标签: javascript php jquery html forms

所以我正在处理一些调查页面。首先,我的makesurvey.php会读取所有问题,然后创建用于编辑问题和创建新问题的页面。每个问题都是自己的形式,并且有自己的提交。然后调查管理员可以在页面上makessurvey.php修复现有的问题,也可以添加新的问题,这是对handleurvey.php进行subbmited更新数据库。这意味着在一个页面上我让我们说20个带有提交按钮的表单。现在我意识到我遇到了更多问题。该调查仅由一名管理员处理。而这个调查应用需要动态,因为管理员可以输入一些新问题,以后可以删除一些问题。一段时间后添加新问题,然后删除等等。

问题:

1.问题:在页面makeurvey当管理员想要编辑调查时如何制作一个jQuery函数,它将首先验证然后将submmit表单传递给handlesurvey.php。 (管理员将按时编辑一个问题并按提交)。另一种选择是为每个表单生成如此多的js函数,但我认为这不是合适的方式,但我认为它会正常工作。 2.问题:当管理员添加/编辑一些问题时,我的handleurvey.php应该知道哪个变量在$_POST[<some_variable>]中。

生成的makesurvey.php页面:

 <script type="text/javascript">
 $("form#updateQuestion").submit(function(){
var SloQuestion = $("#SloQuestion").val();
var typeQuestion=$('#typeQuestion').val();
var RadioValue1=$('#RadioValue1').val();
var RadioValue2=$('#RadioValue2').val();
var RadioValue3=$('#RadioValue3').val();
var RadioValue4=$('#RadioValue4').val();    

//HERE I WILL DO SOME VALIDATION

/*  $.post( "editSurveyHandle.php", $("form#updateQuestion").serialize())
          .done(function( data ) {
          alert("You have changed question!");
   /*     });
       return false;*/
 });      

 </script>
 </head>
 <html>
 <body>
 <form id='updateQuestion1' name='updateQuestion1' method='post' action=''>
 <input type='hidden' name='hidden' value='question1'/><table width='600px'><tr></tr>
 <tr><td width='50%' valign='top'><label for='question1'><h2>CURRENT QUESTION:          </h2></label></td></tr>
 <tr><td>SLOVENIAN </td><td width='50%' valign='top'> <label for='question1'>Some question 1 *</label></td></tr>
 <tr><td width='50%' valign='top'>TYPE QUESTION</td><td width='50%' valign='top'>RADIO BUTTON</td></tr>
 <tr><td><h4>DELETE QUESTION</h4></td><td><input type='checkbox' id='deleteQuestion' name='deleteQuestion' value='delete'/></td></tr>
 <tr><td><h4>CHANGE QUESTIOn</h4></td></tr>
 <tr><td><label>SLOVENIAN</label></td><td><input type='text' id='SloQuestion' name='SloQuestion' size='50' value ='Velikost sobe *'></td></tr>
 <tr><td>TYPE QUESTION </td><td><select id='typeQuestion' name='typeQuestion'>
 <option value='text'>Malo vnosno polje</option>
 <option value='textarea'>Textarea</option>
 <option selected='selected' value='radio'>Izbirino polje</option>
 </select></tr>
 <tr><td></td><td><input type='text' id='RadioValue0' name='RadioValue10' size='50' value ='Bad'></td></tr>
 <tr><td></td><td><input type='text' id='RadioValue1' name='RadioValue11' size='50' value ='Sufficiently'></td></tr>
 <tr><td></td><td><input type='text' id='RadioValue2' name='RadioValue12' size='50' value ='Dobro'></td></tr>
 <tr><td></td><td><input type='text' id='RadioValue3' name='RadioValue13' size='50' value ='Excelent'></td></tr>
 <tr><td></td><td><input type ='submit' id='submit' name='submit' value='Izvedi spremembe'/></td></tr>     
 </table>
 </form> 

 <form id='updateQuestion2' name='updateQuestion2' method='post' action=''>
 <input type='hidden' name='hidden' value='question2'/><table width='600px'><tr></tr>
 <tr><td width='50%' valign='top'><label for='question2'><h2>CURRENT QUESTION:</h2></label></td></tr>
 <tr><td>SLOVENIAN </td><td width='50%' valign='top'> <label for='question2'>Some question 2</label></td></tr>
 <tr><td width='50%' valign='top'>TYPE QUESTION</td><td width='50%' valign='top'>RADIO BUTTON</td></tr>
 <tr><td><h4>DELETE QUESTION</h4></td><td><input type='checkbox' id='deleteQuestion' name='deleteQuestion' value='delete'/></td></tr>
 <tr><td><h4>CHANGE QUESTIOn</h4></td></tr>
 <tr><td><label>SLOVENIAN</label></td>
 <td><input type='text' id='SloQuestion' name='SloQuestion' size='50' value ='Some question 2'></td></tr>
 <tr><td>TYPE QUESTION </td><td><select id='typeQuestion' name='typeQuestion'><option value='text'>Text field</option>
 <option value='textarea'>Textarea</option><option selected='selected' value='radio'>Radio</option></select></tr>
 <tr><td></td><td><input type='text' id='RadioValue0' name='RadioValue10' size='50' value ='Bad'></td></tr>
 <tr><td></td><td><input type='text' id='RadioValue1' name='RadioValue11' size='50' value ='Sufficiently'></td></tr>
 <tr><td></td><td><input type='text' id='RadioValue2' name='RadioValue12' size='50' value ='Dobro'></td></tr>
 <tr><td></td><td><input type='text' id='RadioValue3' name='RadioValue13' size='50' value ='Excelent'></td></tr>
 <tr><td></td><td><input type ='submit' id='submit' name='submit' value='Izvedi spremembe'/></td></tr>
 </table>
 </form> 

仍然是editSurvey.php页面(我添加了两个,因为我不能将所有文本放在一个textarea中)

 <form id='updateQuestion3' name='updateQuestion3' method='post' action=''>
 <input type='hidden' name='hidden' value='question3'/>
 <table width='600px'><tr></tr>
 <tr><td width='50%' valign='top'><label for='question3'><h2>CURRENT QUESTION:</h2></label></td></tr>
 <tr><td>SLOVENIAN </td><td width='50%' valign='top'> <label for='question3'>Some question 3</label></td></tr>
 <tr><td width='50%' valign='top'>TYPE QUESTION</td><td width='50%' valign='top'>RADIO BUTTON</td></tr>
 <tr><td><h4>DELETE QUESTION</h4></td><td><input type='checkbox' id='deleteQuestion' name='deleteQuestion' value='delete'/></td></tr>
 <tr><td><h4>CHANGE QUESTIOn</h4></td></tr>
 <tr><td><label>SLOVENIAN</label></td><td><input type='text' id='SloQuestion' name='SloQuestion' size='50' value ='Some question 3'></td></tr>
 <tr><td>TYPE QUESTION </td><td><select id='typeQuestion' name='typeQuestion'><option value='text'>Textfield</option>

TextareaRadio                                                 

我的handleurvey.php文件:

 if(isset($_POST["hiddenUpdateQuestion"])){
$username = 'root';
$password='';
$hostname='localhost';
$dbhandle = mysql_connect($hostname, $username, $password)
or die("Ni se mogoče povezati na MySQL");
$selcetedDB = mysql_select_db("amon_survey",$dbhandle);
mysql_query("set names 'utf8'");

// HERE I WILL ENTER LATER SOME QUERY 
mysql_close($dbhandle);
 }

3 个答案:

答案 0 :(得分:1)

您可以使用一些常见的类,对于表单标记使用“form”,对每个输入,textarea或radio使用“input”。然后循环每个输入元素验证并发送数据。

这应该是非常通用的:

$(".form").submit(function(){
    var data = [];
    var valid = true;

    // get data & validate
    $(this).find('.input').each(function () {
        if ($(this).val().length)
           data[] = $(this).val();
        else
           valid = false;
    });

    if (!valid)
        // set some errors
        return false;

    // send form data ....
}); 

答案 1 :(得分:1)

我不会给你完整的答案,但会引导你。

第1步:在表单中添加一个类:

<form id='updateQuestion1' class="sq_form" name='updateQuestion1' method='post' action=''>
</form>

<form id='updateQuestion2' class="sq_form" name='updateQuestion1' method='post' action=''>
</form>

步骤2:使用类选择器将onsubmit事件绑定到表单

$(".sq_form").submit(function(event) {
               var indata = $(this).serialize(); //the form data
               //do whatever validations you need to do by using using this keyword
               //Example: $(this).find('input')
});

答案 2 :(得分:1)

在你的handleurvey.php中:

if(isset($_POST["hidden"]))
{
    $username = 'root';
    $password='';
    $hostname='localhost';
    $dbhandle = mysql_connect($hostname, $username, $password)
    or die("Ni se mogoče povezati na MySQL");
    $selcetedDB = mysql_select_db("amon_survey",$dbhandle);
    mysql_query("set names 'utf8'");

    if($_POST["hidden"]=='question1'){
        //Here will be question1's query;
    }
    if($_POST["hidden"]=='question2'){
        //Here will be question2's query;
    }
}

我认为这是不言自明的,如果某些事情不清楚则予以评论。

编辑:

很抱歉,$ _POST正在获得正确的值,所以我认为jQuery也是如此。请参阅以下更新的代码:

在makesurvey.php中:

<script type="text/javascript">
$(document).ready(function() {
   $('form').submit(function(e){
       e.preventDefault();
        form_id = (this.id);
        var SloQuestion =$("#"+form_id+" #SloQuestion").val(); // it's basically saying to fetch the input value of the submitted form 
        var typeQuestion=$("#"+form_id+" #typeQuestion").val();
        var RadioValue1 =$("#"+form_id+" #RadioValue1").val();
        var RadioValue2 =$("#"+form_id+" #RadioValue2").val();
        var RadioValue3 =$("#"+form_id+" #RadioValue3").val();
        var RadioValue4 =$("#"+form_id+" #RadioValue4").val();    

        alert(SloQuestion);

    //If custom validation:
        //if(form_id='updateQuestion1')
        //{//validations for #updateQuestion1}
        //if(form_id='updateQuestion2')
        //{//validations for #updateQuestion2}

      $.post( "handlesurvey.php", $("form").serialize())
              .done(function( data ) {
              alert("You have changed question!");
          });       });  
});
</script> 


编辑(第2次):

我猜你根据下面的评论,你需要知道是否选中了删除问题复选框。

您可以通过以下方式了解:

var delVal = $("#"+form_id+" #deleteQuestion ").is(':checked'); 
alert(delVal); //returns true if checked, false if not checked

稍作修正,请将$.post更改为此,以便仅发送提交的表单:

 $.post( "handlesurvey.php", $("#"+form_id).serialize())
              .done(function( data ) {
              alert("You have changed question!");
          });

在你的php上:

if($_POST["hidden"]=='question1'){

        if(isset($_POST["deleteQuestion"]) && ($_POST["deleteQuestion"]=="delete"))
        {
            //Your delete query for question1
        }
}
    if($_POST["hidden"]=='question2'){

        if(isset($_POST["deleteQuestion"]) && ($_POST["deleteQuestion"]=="delete"))
        {
            //Your delete query for question2
        }
}