1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

post multiple forms with a single button press with javascript

Discussion in 'JavaScript' started by w47w47, Sep 2, 2011.

  1. #1
    hi,

    i want to make a script which would post multiple forms with a single click.

    please help me to start.
     
    w47w47, Sep 2, 2011 IP
  2. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #2
    <button onclick="document.getElementsByTagName('form')[0].submit();document.getElementsByTagName('form')[1].submit();" />

    this will submit first two forms in html page. 0 and 1 are indexes of forms.

    You cna also use:
    <form id="id1" ...> ...</form>
    <form id="id2" ...> ...</form>
    and then
    <button onclick="document.getElementById('id1').submit();document.getElementById('id2').submit();" />
     
    Jan Novak, Sep 2, 2011 IP
  3. babushkyn

    babushkyn Member

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    2
    Trophy Points:
    26
    #3
    Will it even work? After first form submit, won't the site reload and not send other POST data?
     
    babushkyn, Sep 2, 2011 IP
  4. w47w47

    w47w47 Peon

    Messages:
    255
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    this doesn't work, i tryed it like this:

    <html>
    <head>
    </head>
    <body>
    
    <?php
    if(isset($_POST['one'])){echo '1';}
    if(isset($_POST['two'])){echo '2';}
    ?>
    
    <button onclick="document.getElementsByTagName('form')[0].submit();document.getElementsByTagName('form')[1].submit();" />test 1</button>
    
    <form method="post" id="one" name="one"></form>
    <form method="post" id="two" name="two"></form>
    
    <button onclick="document.getElementById('one').submit();document.getElementById('two').submit();" />test 2</button>
    
    </body>
    </html> 
    PHP:
     
    w47w47, Sep 2, 2011 IP
  5. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #5
    Try
    
    
    [COLOR=#000000][B]<?php[/B][/COLOR]
    [COLOR=#b1b100]if[/COLOR][COLOR=#009900]([/COLOR][URL="http://www.php.net/isset"][COLOR=#990000]isset[/COLOR][/URL][COLOR=#009900]([/COLOR][COLOR=#000088]$_POST[/COLOR][COLOR=#009900][[/COLOR][COLOR=#0000ff]'one'[/COLOR][COLOR=#009900]][/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR][COLOR=#b1b100]echo[/COLOR] [COLOR=#0000ff]'1'[/COLOR][COLOR=#339933];[/COLOR][COLOR=#009900]}[/COLOR]
    [COLOR=#b1b100]if[/COLOR][COLOR=#009900]([/COLOR][URL="http://www.php.net/isset"][COLOR=#990000]isset[/COLOR][/URL][COLOR=#009900]([/COLOR][COLOR=#000088]$_POST[/COLOR][COLOR=#009900][[/COLOR][COLOR=#0000ff]'two'[/COLOR][COLOR=#009900]][/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900]{[/COLOR][COLOR=#b1b100]echo[/COLOR] [COLOR=#0000ff]'2'[/COLOR][COLOR=#339933];[/COLOR][COLOR=#009900]}[/COLOR]
    [COLOR=#000000][B]?>
    [/B][/COLOR]
    <form method="post" id="form1">
    <input type="text" id="one" value="one" />
    </form>
    <form method="post" id="form2">
    <input type="text" id="two" value="two" />
    </form>
    
    Code (markup):
     
    Rukbat, Sep 2, 2011 IP
  6. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #6
    It will display anything, because you are trying to read value of <form> tag and not elements in the form...
     
    Jan Novak, Sep 2, 2011 IP
  7. HalvinCarris

    HalvinCarris Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I doubt it will work, after submitting the first form, the second form won't trigger (or, the second form WILL triger, ignoring the first post request).
     
    HalvinCarris, Sep 3, 2011 IP
  8. w47w47

    w47w47 Peon

    Messages:
    255
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    i tryed it now like this:

    <html>
    <head>
    </head>
    <body>
    
    <?php
    if(isset($_POST['one'])){echo '1';}
    if(isset($_POST['two'])){echo '2';}
    ?>
    
    <button onclick="document.getElementById('one').submit();document.getElementById('two').submit();" />test</button>
    
    <form method="post"><input type="text" id="one" name="one" value="one" /></form>
    <form method="post"><input type="text" id="two" name="two" value="two" /></form>
    
    </body>
    </html> 
    PHP:
    but nothing get echoed. not even 1 form.
     
    w47w47, Sep 3, 2011 IP
  9. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #9
    What parameters are being sent to the PHP form? (Look in your Firewbug console. If you're writing PHP without Firebug and FirePHP, come back when you've installed them and can at least put a fb::log() line in your code. You're a carpenter with no hammer and no saw.)

    If it were me, I'd use no form at all, and send the values to the PHP page by Javascript entirely.
     
    Rukbat, Sep 3, 2011 IP
  10. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #10
    without testing I suppose this should work fine:
    
    <html>
    <head>
    </head>
    <body>
    
    <?php
    if(isset($_POST['one'])){echo '1';}
    if(isset($_POST['two'])){echo '2';}
    ?>
    
    <button onclick="document.getElementById('form1').submit();document.getElementById('form2').submit();" />test</button>
    
    <form method="post" id="form1"><input type="text" id="one" name="one" value="one" /></form>
    <form method="post" id="form2"><input type="text" id="two" name="two" value="two" /></form>
    
    </body>
    </html>
    Code (markup):
     
    Jan Novak, Sep 3, 2011 IP
  11. hotnoob

    hotnoob Member

    Messages:
    96
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    28
    #11
    you can not submit two forms at the same time.

    however, what you can do, is use javascript to take the fields of the forms and create a new form, and THEN! submit that form.

    here i just wrote this now lol... its a lot of code :S
    i don't feel like testing it, but it should at least give you an idea of how it works.
    i tried to put as many comments in as i could to make sure its understandable.

    Javascript portion
    
    <script>
        function submitForms(formIds, action, method, enctype )
        {
            if (typeof enctype == 'undefined')
            {
              enctype = '';
            }
            //create new form and assign attributes
            var newForm = document.createElement('form');
            newForm.setAttribute('action', action);
            newForm.setAttribute('method', method);
            newForm.setAttribute('enctype', enctype);
            newForm.style.display = 'none';
    
    
            //this will hold the innerhtml
            var html = '';
            for(var i = 0; i < formIds.length; i++)
            {
                //get the form
                var form = document.getElementById(formIds[i]);
                //this is just to make it easier to work with
                var childNodes = form.childNodes;
                //loop through the childnodes looking for data to add to the new form
                for(var e = 0; e < childNodes.length; e++)
                {
                  //make sure its an input, so we only send what we have to
                  if(childNodes[e].tagName == 'input')
                  {
                    var type='hidden';
                    //because file inputs act differently, we need to check for them
                    if(childNodes[e].getAttribute('type') == 'file')
                    {
                        type = 'file';
                    }
                    //dont need double quotes for type because we know it wont have any spaces
                    html += '<input type='+type+' name="'+childNodes[e].name'" value="'+childNodes[e].value+'">';
                  }
                }
            }
            newForm.innerHTML = html;
            //because of this your page must have a body
            document.getElementsByTagName('body')[0].appendChild(newForm);
            //you might have to get the new form again, im pretty sure that you dont have to though.
            newForm.submit();
        }
    </script>
    
    Code (markup):
    Example forms
    
    <form id=form1>
        <input type=text name=one />
        <input type=text name=two />
    </form>
    <form id=form2>
        <input type=text name=three />
    </form>
        
    <input type=button onClick="submit(['form1'], ['form2'], '', 'post');" value="submit" />
    
    Code (markup):
    your probably going to need to fiddle around with it a bit; i tried to make it as flexible as possible.
    hope its not too complex lol.
     
    hotnoob, Sep 7, 2011 IP
  12. nusrin

    nusrin Greenhorn

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #12
    Will it even work?
     
    nusrin, Sep 21, 2011 IP
  13. webbdesigner

    webbdesigner Guest

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    This is NOT going to work. After one submit() call the form is submitted, and the second will not be sent.You are going to need AJAX for this.
     
    webbdesigner, Sep 24, 2011 IP
  14. SheetalCreation

    SheetalCreation Peon

    Messages:
    42
    Likes Received:
    1
    Best Answers:
    3
    Trophy Points:
    0
    #14
    you can not submit two forms at the same time.
    however, what you can do, is use javascript to take the fields of the forms and create a new form, and THEN! submit that form.
    I have written sample code for you. I have tested it as well its working fine.

    HTML page :

    <html>
    <head>
    </head>
    <body>
    <form action="mfs.php" method="post">
    <input type="text" id="one" name="one" value="" />
    </form>
    <form action="mfs.php" method="post">
    <input type="text" id="two" name="two" value="" />
    </form>
    <button name="submit" value="submit" id="button" onclick="fun();"/>
    <div id="mydiv">
    </div>
    <script type="text/javascript">
    var one = document.getElementById("one");
    function fun(){
    var forms = document.getElementsByTagName("form");
    var form = document.createElement("form");
    var textbox1 = document.createElement("input");
    var textbox2 = document.createElement("input");
    textbox1.setAttribute("name","one");
    textbox1.setAttribute("type","text");
    textbox1.setAttribute("value",document.getElementById("one").value);
    textbox2.setAttribute("name","two");
    textbox2.setAttribute("type","text");
    textbox2.setAttribute("value",document.getElementById("two").value);
    form.appendChild(textbox1);
    form.appendChild(textbox2);
    form.setAttribute("action","mfs.php");
    form.setAttribute("method","post");
    //document.appendChild(form);
    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(form);
    form.submit();
    }

    </script>
    </body>

    </html>


    PHP code for same :

    <?php
    $one = $_POST["one"];
    $two = $_POST["two"];
    echo "$one $two";
    ?>

    This is working fine. I hope it will help you :)
     
    SheetalCreation, Sep 27, 2011 IP
  15. JohnnySchultz

    JohnnySchultz Peon

    Messages:
    277
    Likes Received:
    4
    Best Answers:
    7
    Trophy Points:
    0
    #15
    submitting two forms at once will never work, it will only execute one of them. like HalvinCarris said, it will cancel the second one or cancel the first one then submit the second one..

    it's like clicking a link and clicked a different link while the page has not yet been redirected completely..

    if you want to submit it simultaneously, you may want to try submitting it via AJAX.. just a suggestion..
     
    JohnnySchultz, Oct 3, 2011 IP