I press enter on a text field and it submits the form?

[MythicFrost]

Hey, I'm building a website now, I've got a local server setup.

I have "signup.html" which has a list of text fields in a table, and a signup button at the bottom...

The signup button, has type="button" instead of "submit", and onclick I run a javascript function which compares if the password & confirm password are the same, and the e-mail & confirm e-mail are the same, and if they are not, it alerts them and nothing happens... If everything is correct, it changes the type of the button to submit, and it does what it's supposed to do, and we go to my signuser.php page, which creates the fields in my database.

However, if I select a text field like my e-mail text field, and I press Enter... we go straight to signuser.php and I can't figure out why! (or how to stop it)

Each text field has onkeyup="textchanged(ID_OF_TEXTFIELD)", this doesn't do much yet, has some blank IF statements.

The form I have's method is set to post, and action to signuser.php

EDIT: even with the sign up button commented out, it still runs, and also even without the onkeyup event for the text fields

Does anyone know why this is happening?

Kind Regards

 

[Me1000]

Because the form doesn't require a submit button to submit. The form itself does the submitting. The submit button only tells the form to submit.
You need to intercept the submit itself.

inside your form tag add the on submit attribute.

<form action="blah.php" name="myForm" onSubmit="return checkForm()">

That would be the inline way to do it, then checkForm() would get called anytime the form got submitted (allowing you to leave the submit button alone). If checkForm returns false the form won't be submitted if it returns true then it will...

I hope this helps,

 

[Cerebrus' Maw]

I have this function in my .js file, which is called from my html page.

//Stops the form submitting if the user hits enter
function stopEnter(e)
{
    var key = window.event ? e.keyCode : e.which;
    if (key == 13) //enter
   {
       return false;
   }
return true;
}

I use this to stop my form from submitting if the user hits enter, so only clicking the submit button will allow the submission

<form name="test" class="test" onsubmit="stopEnter(event);">
<inputs and anything else />
</form>


Should do it....

 

[angelwatt]

The others have supplied some good advice. I only wanted to add that you should always make sure the form will still function when the visitor has JavaScript disabled (like I do). With the suggestions given you can have JavaScript make some client-side checks, but it shouldn't require JavaScript to be enabled just to submit the form. You'll have to check all the data server side anyways, even if you do require JavaScript. There's no reason to block out visitors. This is a concept known as Progressive Enhancement (Alt).