Form submit and Ajax call

Question

I am having a problem when submitting a form.

Here is the situation

<form ....>

    <input type="text" id="ajax"> <img onclick="saveTextBox">

    <input type="text">
    <input type="text">
    <input type="text">

</form>

In the above form when the img is click on I call an Ajax script to save the button. That's OK.

What I need is when I am focus on textbox Ajax call ajaxscript (without click img).

I add an jQuery to manage key=13 and call the script BUT the problem is that run the Ajax script AND submits the form too.

How can I override the form sumit when I am focus on Ajax text box and hit enter key?

Answer 1

Return false.

Answer 2

First. Scrap the image and replace it with a real submit button.

Then. Handle all the JS interaction in the onsubmit event for the form element. Cancel the default action, so that the JS runs and the normal form submission doesn't (when JS is available).

In short: be pragmatic, build on something that works, and intercept events at the right moment. Don't ignore the primary purpose of an element and create an entirely new way to trigger something it does already.

Answer 3

Sample event function that will stop the submit event:

function submitHandler() {
    // do ajax stuff here

    return false;
}