CODEWITHSUNDEEP
jqueryajaxforms
Ogum
Ogum

Reputation: 379

How to manage many html forms and one script?

I have an html page built with bootstrap 3. On this page I have several forms. The main form processes the entire contents of the page, while all other forms present are used to enter a data in a mysql db without reloading the page. I don't have any knowledge of ajax and jquery, so i found this script ready to handle the forms without having to reload the page. The problem is that the script runs only with a form $("# myform") while I need many.

The question is, how do I manage various forms within this single script? Ps. to manage embedded forms I used the function html5 "form".

I hope I was clear

Thank you

Script:

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

the submit button for serverals forms:

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

main form for the page

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

Upvotes: 1

Views: 152

Answers (1)

johnny 5
johnny 5

Reputation: 21005

The forms that you want to get the script to work on would get a css class: 

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

and then you would modifiy to script to call validate like this

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

Now any form with the css class 'formValidation' will now have that script act upon it to handle the submit change it to:

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

Upvotes: 1

Related Questions