10

When a User Submits the form i want to stop the default behavior of the form. ie it should not reload. so that i can perform the AJAX request.

here is the code i used.

<script type="text/javascript">
    function validateForm()
    {
        return false;
    }
</script>
<form action="" name="contact" onsubmit="validateForm();">
    <input type="text" name="name" value="Enter Your Name..."/>
    <input type="submit" name="submit"/>
</form>

this does not stop the form from being submitted or reloaded. how do i achieve this?

1
  • You cannot return from an AJAX request. Commented Mar 1, 2011 at 4:45

5 Answers 5

18

It needs to be onsubmit="return validateForm()"

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

1 Comment

Short snippet for just preventing reload/clear of form: onsubmit="return false;"
6

You can use the onsubmit attribute as suggested, a more unobtrusive way is to use preventDefault() on the event object passed to the function bound to your onsubmit event:

function validateForm(e) {
    if (e.preventDefault) {
       e.preventDefault();
    }
    e.returnValue = false; // for IE
}

This only works if you bind the event listener to the form, instead of having onsubmit inline.

Edit: here's how you could bind an event listener to the form, which when triggered will pass an Event object (note this is the W3C style, this won't work in IE, but will give you an idea):

var form = document.getElementById('myform');
form.addEventListener('submit', validateForm, false);

When the submit event is triggered, it will call the validateForm function, passing the event object. Here's a really good article on Javascript events:

http://www.quirksmode.org/js/introevents.html

1 Comment

what is e in here? do i need to pass any parameter there?
4

You should use a return in the onsubmit hanlder of the form. Try this version:

<script type="text/javascript">
    function validateForm()
    {
        return false;
    }
</script>
<form action="" name="contact" onsubmit="return validateForm();">
    <input type="text" name="name" value="Enter Your Name..."/>
    <input type="submit" name="submit"/>

Comments

2

add a return in your event handler:

onsubmit="return validateForm();"

Otherwise the function executed, but doesn't tell the browser to halt processing.

Comments

0

Using jQuery:

$('form').on('submit', function() {
  // call functions to handle form
  return false;
});

Basically the same as the above solutions, but I prefer to keep my JS out of my HTML, even the "onsubmit" attribute.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.