CODEWITHSUNDEEP
javascriptjqueryforms
MatthewLee
MatthewLee

Reputation: 599

submit form on click event using jquery

So can someone please tell why neither of these options will actually submit the form? I am trying to do something more complicated but I have boiled it down to this to try and figure out why I can't seem to get this form to submit using a click event and submit()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
   $('#submitButton').click(function(e) {
        e.preventDefault();
        $("#testForm").submit();
    });

   $('#submitLink').click(function(e) {
        e.preventDefault();
        $("#testForm").submit();
    });
});
</script>
</head>

<body>
<form action="javascript:alert('submitted');" method="post" id="testForm">
    <label>Name</label>
    <input type="text" name="name" value="" />
    <input type="submit" name="submit" value="Submit" id="submitButton" />
    <p><a href="#" id="submitLink">Submit Form</a></p>
</form>

</body>
</html>

Thank you!

Upvotes: 14

Views: 112759

Answers (5)

bpeterson76
bpeterson76

Reputation: 12870

If you have a form action and an input type="submit" inside form tags, it's going to submit the old fashioned way and basically refresh the page. When doing AJAX type transactions this isn't the desired effect you are after.

Remove the action. Or remove the form altogether, though in cases it does come in handy to serialize to cut your workload. If the form tags remain, move the button outside the form tags, or alternatively make it a link with an onclick or click handler as opposed to an input button. Jquery UI Buttons works great in this case because you can mimic an input button with an a tag element.

Upvotes: 6

Gurudath BN
Gurudath BN

Reputation: 1411

Using jQuery button click

$('#button_id').on('click',function(){
     $('#form_id').submit();
 });

Upvotes: 5

tomahaug
tomahaug

Reputation: 1476

Do you need to post the the form to an URL or do you only need to detect the submit-event? Because you can detect the submit-event by adding onsubmit="javascript:alert('I do also submit');"

<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form>

Not sure that this is what you are looking for though.

Upvotes: 2

MillsJROSS
MillsJROSS

Reputation: 1239

Why not simply use the submit button to run the code you want. If your function returns false, it will cancel the submission.

$("#testForm").submit(function() {
    /* Do Something */
    return false;
});

Upvotes: 10

Kevin Mansel
Kevin Mansel

Reputation: 2381

it's because the name of the submit button is named "submit", change it to anything but "submit", try "submitme" and retry it. It should then work.

Upvotes: 14

Related Questions