submit form on click event using jquery

Question

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!

Kevin Mansel · Accepted Answer · 2011-06-09 21:30:08Z

14

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.

answered Jun 9, 2011 at 21:30

Kevin Mansel

2,3911 gold badge16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StoriKnow Over a year ago

wait, what? why?... edit: here's why. Thank you!

MillsJROSS · Accepted Answer · 2011-06-09 21:31:16Z

10

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

answered Jun 9, 2011 at 21:31

MillsJROSS

1,2397 silver badges9 bronze badges

Comments

MeSo2 · Accepted Answer · 2020-02-10 06:24:22Z

6

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.

edited Feb 10, 2020 at 6:24

MeSo2

4641 gold badge7 silver badges20 bronze badges

answered Jun 9, 2011 at 21:26

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

3 Comments

MatthewLee Over a year ago

The action is just something I was using to test to see if the form was submitting, which it was not. In my actual code I am not doing an AJAX type transaction, I am submitting the form to the server and processing it with php. But before it gets processed I am using the Facebook api to see if the user wants to submit their post to their facebook wall as well. So, in effect, I need to give them time to response before it submits. The strange thing with the two examples I have above is neither one actually submits the form at all which makes no sense to me.

bpeterson76 Over a year ago

I'd imagine it'd be easier to do the Facebook check on the server side just prior to the form submit, then return false if the desired action is not submitting.

MatthewLee Over a year ago

Ok now I get it, the submit button inside the form tagswas breaking it for both options. When I remove the submit button, the link works as expected. Thanks bpetersen!

Gurudath BN · Accepted Answer · 2015-06-10 23:49:31Z

5

Using jQuery button click

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

edited Jun 10, 2015 at 23:49

answered Jun 10, 2015 at 22:14

Gurudath BN

1,41121 silver badges21 bronze badges

Comments

Alfred · Accepted Answer · 2012-08-17 16:21:50Z

2

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.

edited Aug 17, 2012 at 16:21

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

answered Jun 9, 2011 at 21:26

tomahaug

1,48611 silver badges13 bronze badges

1 Comment

MatthewLee Over a year ago

Thanks for the idea Henrik but I do want to actually submit the form

Collectives™ on Stack Overflow

submit form on click event using jquery

5 Answers 5

1 Comment

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related