Fatal编程技术网
  • javascript/
  • Javascript Jquery在一个页面上验证和提交更多表单

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

javascript php jquery html forms

Javascript Jquery在一个页面上验证和提交更多表单,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,所以我正在处理一些调查页面。首先，my makesurvey.php读取所有问题，然后创建用于编辑问题和创建新问题的页面。每个问题都有自己的形式，并有自己的提交方式。然后调查管理员可以在页面makessurvey.php上修复现有问题，还可以添加新问题，该问题将提交到handlesurvey.php，并对数据库进行更新。这意味着在一个页面上，我有20个带有提交按钮的表单。现在我意识到我遇到了更多的问题。调查将只由一名管理员处理。而这个调查应用程序需要动态工作，因为管理员可以输入一些新问题，以后可

所以我正在处理一些调查页面。首先，my makesurvey.php读取所有问题，然后创建用于编辑问题和创建新问题的页面。每个问题都有自己的形式，并有自己的提交方式。然后调查管理员可以在页面makessurvey.php上修复现有问题，还可以添加新问题，该问题将提交到handlesurvey.php，并对数据库进行更新。这意味着在一个页面上，我有20个带有提交按钮的表单。现在我意识到我遇到了更多的问题。调查将只由一名管理员处理。而这个调查应用程序需要动态工作，因为管理员可以输入一些新问题，以后可以删除一些问题。一段时间后，添加新问题，然后删除，依此类推

问题：

1.问题：在页面makesurvey上，当管理员想要编辑调查时，如何只生成一个jQuery函数，该函数将首先验证，然后将表单提交到handlesurvey.php。（管理员将一次编辑一个问题，然后按提交）。另一个选择是为每个表单生成如此多的js函数，但我认为这不是合适的方式，但我认为它可以很好地工作。 2.问题：当管理员添加/编辑一些问题时，我的handlesurvey.php如何知道
$\u POST[]
中的变量

生成的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>
您可以使用一些常见的类，比如对表单标记使用“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：将类添加到表单中：

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

<form id='updateQuestion2' class="sq_form" name='updateQuestion1' method='post' action=''>
</form>
在handlesurvey.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;
    }
}

<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>
我认为这是不言自明的，如果有什么不清楚的地方，请发表评论

编辑： 很抱歉，$\u帖子得到了正确的值，所以我认为jQuery也得到了正确的值。请参阅下面的更新代码：

在makesurvey.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;
    }
}

<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>
稍作更正，请将您的
$更改为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
        }
}
不要使用mysql，而是使用mysqli。为什么不使用jquery表单插件来轻松发布基于ajax的表单呢。它的行为类似于正常的表单post，但由ajax实现。你可以很容易地完成所有的验证和所有的事情。这不是很好，因为它总是得到第一种形式。所有其他输入域在每个表单中都有相同的名称。如何解决这个问题？我如何插入代码的图片只是为了检查复选框的值（默认值为空），但如果我选中，我想删除这个问题。所以在每个表单中，我都有一个带有uniq id的复选框。如何处理这种情况。我尝试了：但无法使用$（'：checkbox'）.mouseenter（函数（）{if（$（this）.prop（'checked'））{$（this.prop（'checked'，false）；}else{$（this.prop（'checked'，true）；}） 
 $.post( "handlesurvey.php", $("#"+form_id).serialize())
              .done(function( data ) {
              alert("You have changed question!");
          });

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
        }
}