amir moradifard
amir moradifard

Reputation: 353

Post a form using Javascript

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>

Upvotes: 0

Views: 149

Answers (4)

zachallia
zachallia

Reputation: 1495

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>

Upvotes: 4

oded
oded

Reputation: 121

if you are using jquery you can do this:

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

</script>

Upvotes: 1

abc123
abc123

Reputation: 18753

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");
        })); 
    });
});

Upvotes: 1

KingKongFrog
KingKongFrog

Reputation: 14419

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

</script>

Upvotes: 1

Related Questions