Enter Key problem with Javascript using Ajax

Hi, I have created a simple AJAX comment posting system. When a user clicks the submit button, everything works perfectly and the message is sent to the server then retrieved with formatted message list without reloading the whole page.

But the problem is when user uses the ENTER key from the keyboard instead of clicking the submit button, the whole page will be reloaded again. Here is the following code for the form:

    <form id="quick_comment_form">
        <input type="hidden" name="parent_id" value="1" />
        <input type="hidden" name="user" value="John" />
        <input type="text" name="comment_text" value="" class="input_text" maxlength="50" />
        <input type="button" name="submit" value="Quick Comment" class="submit" onclick="sendComment(); return false;"/>
    </form>


So I would like to know if it is possible to let the enter key behave the same way when user clicks the submit button? If this is not possible, then is it possible to disable the ENTER key? Thank you.
santockiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

b0lsc0ttIT ManagerCommented:
santocki,

What does the sendComment() function (and supporting functions) look like?

Do you mean pressing Enter the first time (to submit) will reload the page after the AJAX script/process?  Since the "submit" button in the form is actually just a button the Enter key should not be submitting it.

Let me know if you have any questions or need more information.

b0lsc0tt
0
Michel PlungjanIT ExpertCommented:
enter in a textfield submits the form

Instead EITHER do this


    <form id="quick_comment_form" onSubmit="return false">
        <input type="hidden" name="parent_id" value="1" />
        <input type="hidden" name="user" value="John" />
        <input type="text" name="comment_text" value="" class="input_text" maxlength="50" />
        <input type="button" value="Quick Comment" class="submit" onclick="sendComment(); return false;"/>
    </form>

OR the more logical

    <form id="quick_comment_form" onSubmit="sendComment(); return false">
        <input type="hidden" name="parent_id" value="1" />
        <input type="hidden" name="user" value="John" />
        <input type="text" name="comment_text" value="" class="input_text" maxlength="50" />
        <input type="submit" value="Quick Comment" class="submit" />
    </form>

and NEVER EVER call something name="submit"
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
santockiAuthor Commented:
My ajax app is similar to a shoutbox. You type a short messge, then click the "submit" button so your message will be on the top of the shoutbox window. The only problem is that if I type the message then press the ENTER key, it will behave like a normal submit form, reloading the page again, but I don't want that behavior.

The javascript is:



var ajaxObj = new XMLHTTP("mybic_server.php");

function sendComment()
{
    var form_vars = ajaxObj.getForm('comment_function');
    ajaxObj.call('action=quick_comment'+form_vars, display_quick_comment);
}

function display_quick_comment(list)
{
    document.getElementById('quick_comment_list').innerHTML = list;
}



0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.