Question

我有一个用bootstrap 3构建的html页面。在这个页面上我有几个表单。主窗体处理页面的整个内容，而所有其他窗体用于在不重新加载页面的情况下在mysql数据库中输入数据。我对ajax和jquery没有任何了解，所以我发现这个脚本已准备好处理表单而无需重新加载页面。问题是脚本只能以 $（“＃myform”）形式运行，而我需要很多。

问题是，如何在这个单一脚本中管理各种表单？ PS。管理嵌入式表单我使用函数html5“form”。

我希望我很清楚

谢谢

脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery-  1.7.1.min.js"></script>   
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#myform").validate({
        debug: false,
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Please let us know who you are.",
            email: "A valid email will help us get in touch with you.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});
</script>

HTML：

 <form id="frmAddProduct" action="processProduct.php?action=addProduct" method="post" enctype="multipart/form-data" name="frmAddProduct"></form> 
 <form id="myform" name="myform" action="" method="post"></form>

多种形式的提交按钮：

  <input type="text" name="form1" id="form1" value="" placeholder="" form="myform">  
  <input type="submit" name="submit" value="Submit" class="btn btn-sm btn-success" form="myform">

页面的主要表单

 <button class="btn btn-info" id="btnAddProduct" type="button" onClick="checkAddProductForm();" form="frmAddProduct">
        <i class="ace-icon fa fa-check bigger-110"></i>
            Add
            </button>

Answer 1

您希望让脚本处理的表单将获得一个css类：

<form id="frmAddProduct" class='formValidation' action="processProduct.php?action=addProduct" method="post" enctype="multipart/form-data" name="frmAddProduct"></form> 
<form id="myform" class='formValidation' name="myform" action="" method="post"></form>

然后你会修改脚本来调用这样的验证

$(".formValidation").validate({
      // your code here
});

现在任何带有css类'formValidation'的表单现在都会让该脚本处理它以处理提交更改为：

$('.formValidation').on('submit', function () {
    $.post('process.php', $(this).serialize(), function(data) {
        $('#results').html(data);
    });
})

如何管理许多html表单和一个脚本？

1 个答案: