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.

Use a web developer tool to inspect your console's error log and see where that leads you. Also, make sure you understand what this really is in the data attribute of your $.ajax call. — Palpatim
– Palpatim, Commented Oct 6, 2014 at 15:56
What you assume type_form is - DOM element or jquery object? BTW: You cannot use $(this) construct in your function. — hindmost
– hindmost, Commented Oct 6, 2014 at 16:01
the problem right now is that it doesnt save the post data, is my issue, the jquery scripts works except for that — Davyt
– Davyt, Commented Oct 6, 2014 at 16:57

alquist42 · Accepted Answer · 2014-10-06 20:31:01Z

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.

rationalboss · Accepted Answer · 2014-10-06 16:12:28Z

1

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>

answered Oct 6, 2014 at 16:12

rationalboss

5,3973 gold badges32 silver badges50 bronze badges

2 Comments

Davyt Over a year ago

ok thanks, but i have a problem in here "data: $('#'+type_form).serialize()," if i put this it doesnt work, reloads my page, if i put "data: $(this).serialize()," works but i can get the post data in my php

Davyt Over a year ago

now it works the data: $('#'+type_form).serialize(), but it is empty

Collectives™ on Stack Overflow

Submit multiple forms same jquery script

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related