Post a form using Javascript

Question

I have following form tag:

<form id="Form1" action="https://www.example.com/" method="post" runat="server">
            <asp:HiddenField ID="p" runat="server" Value="1" />
            <asp:HiddenField ID="msg" runat="server" Value="2"/>
            <asp:HiddenField ID="cha" runat="server" Value="3"/>
            <asp:HiddenField ID="lang" runat="server" Value="4"/>
            <asp:HiddenField ID="number" runat="server" Value="5"/>
            <asp:HiddenField ID="amo" runat="server" Value="6"/>
            <asp:HiddenField ID="cu" runat="server" Value="7"/>
            <asp:HiddenField ID="co" runat="server" Value="8"/>
            <asp:HiddenField ID="cl" runat="server" Value="9"/>
            <asp:HiddenField ID="crl" runat="server" Value="10"/>
            <asp:HiddenField ID="sature" runat="server" Value="11"/>
            <asp:HiddenField ID="mk" runat="server"/>
    <input type="submit" name="submit" value="Go" />
</form>

I would like to trigger the post action using JavaScript while page is loading!

I used following Javascript code to the Head tag to do so, but it is not working.

<script type="text/javascript">
    $(document).ready(function () {
        var myForm = document.getElementById('Form1');
        myForm.submit();
    });

</script>

Any suggestion?????

Edit1 : I tried provided solutions in this article but wasn't solving my problem.

Edit2 : following scripts are added to form. (Head Tag). are they sufficient for this?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

Seems suspicious. There must be a better way to accomplish what you want. — Tim Seguine, Dec 18 '13 at 22:41
As you already use jquery you can simply write `$('#Form1').submit();` Well have u included jquery? :-P — Markus Kottländer, Dec 18 '13 at 22:42
why do you send the user back content for the user to submit rather than submitting it for them from your server? — Kevin B, Dec 18 '13 at 22:42
Define "it is not working". Does the form not get submitted, or does it get submitted without any data? Form controls must have a name to be successful. — RobG, Dec 18 '13 at 22:45
@RobG: Not working: It is not posting the form. tried fiddler and nothing being recorded there as well! — amir moradifard, Dec 18 '13 at 22:49
I don't understand why that is directed at me. I didn't ask about that. — Tim Seguine, Dec 18 '13 at 22:49
Try pure JS: `window.onload=function(){document.forms['Form1'].submit();};`. If that doesn't work, there is something strange going on. — RobG, Dec 18 '13 at 23:11
It was strange from the beginning. Sorry this did not work as well. When I put an alert('test') it is working, but there should be something wrong with my form. Right? — amir moradifard, Dec 18 '13 at 23:21
@amirmoradifard—if you had included that in the original post it would have been pointed out directly. Do not give form controls names that are the same as form properties or methods. — RobG, Dec 19 '13 at 01:29

zachallia · Accepted Answer · 2013-12-18T23:36:07.977

To submit the form while the page is loading, put the script tag immediately after the form and do not wrap it in a document.ready (This answer is assuming you have jquery included in the head of the page, since you had it in your question)

<form id="Form1" action="https://www.example.com/" method="post" runat="server">
        <asp:HiddenField ID="p" runat="server" Value="1" />
        <asp:HiddenField ID="msg" runat="server" Value="2"/>
        <asp:HiddenField ID="cha" runat="server" Value="3"/>
        <asp:HiddenField ID="lang" runat="server" Value="4"/>
        <asp:HiddenField ID="number" runat="server" Value="5"/>
        <asp:HiddenField ID="amo" runat="server" Value="6"/>
        <asp:HiddenField ID="cu" runat="server" Value="7"/>
        <asp:HiddenField ID="co" runat="server" Value="8"/>
        <asp:HiddenField ID="cl" runat="server" Value="9"/>
        <asp:HiddenField ID="crl" runat="server" Value="10"/>
        <asp:HiddenField ID="sature" runat="server" Value="11"/>
        <asp:HiddenField ID="mk" runat="server"/>
        <input type="submit" name="submit" value="Go" />
</form>

<script type="text/javascript">
    $('#Form1').submit();
</script>

Thanks Zachallia, I tried this too but again nothing changed. I have provided the included script items in page. are they correct? — amir moradifard, Dec 18 '13 at 23:01
@amirmoradifard—You can remove the dependency on jQuery altogether using `document.forms['Form1'].submit();`. You don't need jQuerUI. — RobG, Dec 18 '13 at 23:13

score 1 · Answer 2 · answered Dec 18 '13 at 22:42

1

<script type="text/javascript">
    $(document).ready(function () {
        $('#Form1').submit();
    });

</script>

answered Dec 18 '13 at 22:42

KingKongFrog

13,946
21
75
124

score 1 · Answer 3 · answered Dec 18 '13 at 22:45

Using jQuery, do this on a $('#Form1').submit(function(){ \\HERE });

$.post("https://www.example.com/", $("#Form1").serialize(),  function() {
    alert("success");
}));

So in total:

\\Event that occurs when DOM is ready
$(document).ready(function () {
    \\Event binding that occurs when the element with ID `Form1` is submitted 
    $('#Form1').submit(function(){
        \\Calls the POST function in jQuery with the serialized form data
        $.post("https://www.example.com/", $("#Form1").serialize(),  function() {
            alert("success");
        })); 
    });
});

Thanks for the response. This is not working as well. I think the problem should be from somewhere else! — amir moradifard, Dec 18 '13 at 23:14

score 1 · Answer 4 · answered Dec 18 '13 at 22:46

1

if you are using jquery you can do this:

<script type="text/javascript">
    $(document).ready(function () {
        $('#Form1').submit();
    });

</script>

answered Dec 18 '13 at 22:46

oded

121
2

Post a form using Javascript

4 Answers4