user4951834
user4951834

Reputation: 731

How to submit form with jQuery .submit?

I have the following code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
    <form method="post" id="theform" action="http://example.com" target="_blank">
        <input name="email" placeholder="email" type="text">
        <input id="submit" type="submit" value="submit">
    </form>
    <script type="text/javascript">
    jQuery(function() {
        jQuery('#submit').on('click', function(e) {
                e.preventDefault();
                jQuery('#theform').attr('disabled', 'disabled');
                //Code here
                jQuery('#theform').removeAttr('disabled').submit();
            }
        });

    });
    </script>
</body>

</html>

The form does not submit. Any idea what is up?

I know I could do an ajax call to manually submit the form to action URL and then use JavaScript to redirect to where I want to send the user in a new tab; however, I don't want to do that because popup blockers will eat up the JavaScript redirect. Hence, I have the form target="_blank" upon submit, which gets the user where I want to send them... if only the code worked.

Upvotes: 1

Views: 980

Answers (2)

gvmani
gvmani

Reputation: 1600

remove the line e.preventDefault(); from your onclick event handler.

Update: Sorry my bad that I didn't notice that you were explicitly trying to submit the form later in the code. Even though the above change will fix it, the actual issue is else where. Don't make any changes to the function just rename the submit button's id to something else and update the binding and the code should work. Working fiddle : http://jsfiddle.net/epednoat/

<body>
    <form method="post" id="theform" action="http://example.com" target="_blank">
        <input name="email" placeholder="email" type="text">
        <input id="smt" type="submit" value="submit">
    </form>
    <script type="text/javascript">
    jQuery(function() {
        jQuery('#smt').on('click', function(e) {
                e.preventDefault();
                jQuery('#theform').attr('disabled', 'disabled');
                //Code here
                jQuery('#theform').removeAttr('disabled').submit();
            }
        });

    });
    </script>
</body>

</html>

Upvotes: 1

SK.
SK.

Reputation: 4358

You can jQuery submit form with below code.

$( "#theform" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

With JavaScript

function submitform()
{
  document.theform.submit();
}

Upvotes: 0

Related Questions