Submit multiple forms same jquery script

Question

I have multiple forms and I want all of them to be processed by a single jquery script, of course I have php functions that work correctly, I tried them separately.

This is my script:

function proceso_form(type_form, id_div_error){

    var url = "my_url.php?form="+type_form; //functions
    var response = document.getElementById(id_div_error);

        response.innerHTML="<img src='img/loader.gif' style='margin-right: 5px;'/>Loading ..."; //
        response.style.display='block';

        $.ajax({
               type: "POST",
               url: url,
               data: $(this).serialize(), //ID form
               success: function(data)
                {
                    if (data==1){
                        window.location.reload();
                    }else{
                        response.innerHTML=data; // show PHP response.
                    }
                }
        });

        return false;
};

My form looks like this

<form id="contacto" name="contacto" method="post" onsubmit="proceso_form('contacto', 'cargando')">
                <input type="text"  name="name"class="form-control">
                <input type="text"  name="phone" class="form-control">
                <input type="email" name="email" class="form-control">
                <textarea style="height:100px;margin-bottom:0px" name="messaje" class="form-control"></textarea>

                <input style="margin-top:5px" type="submit" class="btn btn-block" value="SEND">
                </form>

I think my problem is that I can't put my script in the onsubmit, but honestly I have no idea.

Answer 1

Your html must look like

<form id="contacto" name="contacto" method="post" onsubmit="return proceso_form(this, 'cargando')">
...
</form>

And inside the function:

function proceso_form(form, id_div_error){

    var $form = $(form);
    var url = "my_url.php?form="+$form.attr('id'); //functions
    var response = document.getElementById(id_div_error);

    response.innerHTML="<img src='img/loader.gif' style='margin-right: 5px;'/>Loading ..."; //
    response.style.display='block';

    $.ajax({
           type: "POST",
           url: url,
           data: $form.serialize(), //ID form
           success: function(data)
            {
                if (data==1){
                    window.location.reload();
                }else{
                    response.innerHTML=data; // show PHP response.
                }
            }
    });

    return false;
};

By passing this to the function you passing the whole form reference.

Hope it will help.

Answer 2

First, it should be:

<form id="contacto" name="contacto" method="post" onsubmit="return proceso_form('contacto', 'cargando')">

The return keyword there is important.

Next, data: $(this).serialize(), //ID form should be:

data: $('#'+type_form).serialize(), //ID form

So, your script should look like this:

<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<form id="contacto" name="contacto" method="post" onsubmit="return proceso_form('contacto', 'cargando')">
<input type="text"  name="name" class="form-control">
<input type="text"  name="phone" class="form-control">
<input type="email" name="email" class="form-control">
<textarea style="height:100px;margin-bottom:0px" name="messaje" class="form-control"></textarea>

<input style="margin-top:5px" type="submit" class="btn btn-block" value="SEND">
</form>
<div id="cargando"></div>


<script>
function proceso_form(type_form, id_div_error){

    var url = "my_url.php?form="+type_form; //functions
    var response = document.getElementById(id_div_error);

        response.innerHTML="<img src='img/loader.gif' style='margin-right: 5px;'/>Loading ..."; //
        response.style.display='block';

        $.ajax({
               type: "POST",
               url: url,
               data: $('#'+type_form).serialize(), //ID form
               success: function(data)
                {
                    if (data==1){
                        window.location.reload();
                    }else{
                        response.innerHTML=data; // show PHP response.
                    }
                }
        });

        return false;
};
</script>