Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 632
MatthewLee Avatar asked Jun 09 '11 21:06

MatthewLee


People also ask

How do I submit a form on click event?

In javascript onclick event , you can use form. submit() method to submit form. You can perform submit action by, submit button, by clicking on hyperlink, button and image tag etc. You can also perform javascript form submission by form attributes like id, name, class, tag name as well.

How can submit the form using jQuery?

Forms can be submitted either by clicking an explicit <input type="submit"> , <input type="image"> , or <button type="submit"> , or by pressing Enter when certain form elements have focus.

Which event is triggered when a form submit button is pressed?

The submit event fires when the user clicks a submit button ( <button> or <input type="submit">) or presses Enter while editing a field (e.g. <input type="text">) in a form. The event is not sent to the form when calling the form. submit() method directly.

What is submit handler in jQuery?

jQuery submit() MethodThe submit event occurs when a form is submitted. This event can only be used on <form> elements. The submit() method triggers the submit event, or attaches a function to run when a submit event occurs.


2 Answers

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.

like image 148
Kevin Mansel Avatar answered Oct 04 '22 19:10

Kevin Mansel


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;
});
like image 27
MillsJROSS Avatar answered Oct 04 '22 20:10

MillsJROSS