3 forms in a single submit button

Question

3 forms in a single submit button

Navigation

#1 by (-1 votes)
#2 by (-2 votes)
#3 by (-2 votes)

1

Good afternoon, I have a code in html and js where I need to do a submit on 3 forms with just one button, because they are on different cardboards. I thought of doing the following in html:

<form id="form1" method="POST"></form>
<form id="form2" method="POST"></form>
<form id="form3" method="POST"></form>

<button id="submit-forms" type="button" class="btn btn-success>

And in JS:

$("#submit-forms").on("click" function(){
    $("#form1").submit();
    $("#form2").submit();
    $("#form3").submit();
});

But it did not work. Anyone have any ideas for solution?

javascript html html5

asked by anonymous 03.01.2019 / 14:37

3 answers

Subtracting 30 days from a given date in JavaScript [duplicate] Error connecting connection variable (PHP / MySQLi)

score -1 · Answer 1

I could send via Ajax with Jquery and get the data via GET (if it does not disrupt the security of your application):

var dados = '?'+$('#form1').serialize()+'&'+$('#form2').serialize()+'&'+$('#form3').serialize();

$.ajax({
    url: pagina+dados,
    success: function(response){
    },
    error: function(response){
    }
});

A little more about serialize: link

score -2 · Answer 2

I need to do a submit on 3 forms using just one button

See this comment which partially summarizes this answer:

"- When a form is submitted the page is" reloaded "to action , so I only see two ways, put it all together in a <form> only and handle it on the server, or send via JavaScript with AJAX ". @fernandosavio

When you the form, the browser automatically redirects to the page referenced in the action attribute of the form. Taking with it all the data entered (or not) in such form with the method referenced (or not) in attribute method ( get|post ).

Following this theory, it would not be feasible to do the submit on these three forms simply by calling them that way posted in the question:

$("#submit-forms").on("click" function(){
    $("#form1").submit();
    $("#form2").submit();
    $("#form3").submit();
});

Now, taking into account that:

"- my divs, created both for page layout and for organization, did not allow to be made just a form".

I will assume that of these three forms, one or more is part of the layout and the other (s) of the page in question. If I am right, it would be a beauty of a server-side mess to treat this all as a single form, whereas not always the fields ( input , select and similar) will be the same ...

The other idea, which I also consider to be the best option, is to do the submits with ajax . See my example:

$(function(){
    $('#submit-forms').on('click', function(e){

        // Formulário #1
        $.ajax({
            url: $('#form1').attr('action'),
            method: $('#form1').attr('method'),
            data: $('#form1').serialize(),
            dataType: 'html'
        })
        .done(function(ret){
            console.log(ret);
        })
        .fail(function(erro){
            console.log('Erro ao submeter o form: ');
            console.log(erro);
        });

        // Formulário #2
        $.ajax({
            url: $('#form2').attr('action'),
            method: $('#form2').attr('method'),
            data: $('#form2').serialize(),
            dataType: 'html'
        })
        .done(function(ret){
            console.log(ret);
        })
        .fail(function(erro){
            console.log('Erro ao submeter o form: ');
            console.log(erro);
        });

        // Formulário #3
        $.ajax({
            url: $('#form3').attr('action'),
            method: $('#form3').attr('method'),
            data: $('#form3').serialize(),
            dataType: 'html'
        })
        .done(function(ret){
            console.log(ret);
        })
        .fail(function(erro){
            console.log('Erro ao submeter o form: ');
            console.log(erro);
        });


    });
});

<!DOCTYPE html>
<html>
    <head>
        <title>Submit em 3 forms por LipESprY</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><formid="form1" action="trata_form1.php" method="get">
            <input type="text" name="dadosform1">
        </form>
        <form id="form2" action="trata_form2.php" method="post">
            <input type="text" name="dadosform2">
        </form>
        <form id="form3" action="trata_form3.php" method="post">
            <input type="text" name="dadosform3">
        </form>

        <button id="submit-forms" type="button" class="btn btn-success">Submit nos 3 formularios</button>

        <script type="text/javascript">
            // Aqui vai o script (na resposta coloquei os scripts no snippet)
        </script>
    </body>
</html>

Example Considerations:

I'm using jQuery 3.3.1 ;
I'm using PHP in the forms handling (the language was not posted in the question);
I totally ignored the dynamics in order to give you a very transparent idea. No complicated codes for your understanding to which I do not know the level;
I put the answers of each request in simple log in console . Then you adapt as needed;
After the submits the page will not be redirected and / or reloaded;

The pages that handle the forms and the project itself are available on my GitHub / LipESprY / sopt-3-forms-in-a-single-boot-submit .

score -2 · Answer 3

In the JS file try the following:

$("#form1").submit(function(event) {
    action(event);
});

$("#form2").submit(function(event) {
    action(event);
});

$("#form3").submit(function(event) {
    action(event);
});

function action(event)
{
    //ação requerida
}

The Event will be triggered after clicking the submit button. You do not need to "submit" the event capture methods within a "click".