Auto button when user hits the Enter key

[nigelburrell]

Hi

I am developing a login screen for my website, with usercode and password fields, and a Login button.

I need to know how I can make the Login button automatically submit when the user hits the Enter key in either field (as apposed to the user clicking the Login button, which already works).

Thanks

Nigel

[Josh Connerty]

Can you post the form it is most likley the way you have structured the form.

[ShawnCplus]

Browsers do that by default. They will submit the form you're currently on when you hit enter(unless you're in a textbox) you don't have to do anything special.

[Tulsa]

hi
i think you want that login form submit that user press enter key after entering password right.
so i pu one example here where i call javascript function on keypress of textbox

<input name="login2" type="password" class="form" id="login2" maxlength="30" style="width:180" onKeyPress="return entersubmit(this,event)"/>

<script type="text/javascript">
function entersubmit(field,e)
{	
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	else return true;

	if (keycode == 13)
  	{ 
		//alert('hi');
		if(Email.validate() && Passwd.validate())
		{
				field.form.action="userlogin";
				field.form.submit();
				return false;
		}		
  }
	else
   		return true;
}

</script>

Thanks

[navi17]

yes there is no need of such code.
when you click on enter in textbox forms is automatically submitted.

[Tulsa]

hi
Yes
when we click on enter in textbox forms is automatically submitted only in "google chrome" browser
so for i.e and mozila browser we need to use this type of code as per my view..

Thanks

[Josh Connerty]

No you don't...

At least I don't...

Should do it fine, I presume nigelburrell (if he is still alive) has made a little cock up in his form, the idea is that it submits the current form...

[nigelburrell]

hi
i think you want that login form submit that user press enter key after entering password right.
so i pu one example here where i call javascript function on keypress of textbox

<input name="login2" type="password" class="form" id="login2" maxlength="30" style="width:180" onKeyPress="return entersubmit(this,event)"/>

<script type="text/javascript">
function entersubmit(field,e)
{	
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	else return true;

	if (keycode == 13)
  	{ 
		//alert('hi');
		if(Email.validate() && Passwd.validate())
		{
				field.form.action="userlogin";
				field.form.submit();
				return false;
		}		
  }
	else
   		return true;
}

</script>

Thanks

Thanks for your code Tulsa, it works great.

[nigelburrell]

No you don't...

At least I don't...

Should do it fine, I presume nigelburrell (if he is still alive) has made a little cock up in his form, the idea is that it submits the current form...

What I found is that if the form contains only one textbox, then hitting Enter worked. But the moment I included two or more textboxes, in this case, a username and password textbox, then I needed the OnKey trigger code on the password textbox. I call the javascript from this to submit the current form and it works well now.

Thanks for your help.

[1337cookie]

Using JavaScript is excessive as all HTML forms should submit when pressing enter (Provided they are setup properly). If you post the source of your form. I'm sure someone here (perhaps myself) can help fix it.

[nikesh.yadav]

<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="text" name="login2" id="login2" />
  </label>  
</form>

make the changes as you wish but its work when user hit the enter key after filling the field.

but you want to put submit button u also put that with in the form tag.

:)

[nigelburrell]

<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="text" name="login2" id="login2" />
  </label>  
</form>

make the changes as you wish but its work when user hit the enter key after filling the field.

but you want to put submit button u also put that with in the form tag.

:)

Ok, it's very strange but now I'm finding that sometimes it works, and sometimes it doesn't, about a 50% success rate!! This is either when I hit Enter (in the password field) or clicking the Submit button the form (I call the same form by the way with code to process the POST vars...

if (isset($_POST['form_submitted'])) { // if form has been submitted

Here's a sample of my form code...

<form action="http://www.mywebsite.com/index.php?option=com_content&view=article&id=24" method="post" name="login">

<input type="text" name="email" maxlength="60" size="28" class="input"> 

<input type="password" name="pass" maxlength="30" size="24" class="input" onkeypress="if (event.keyCode == 13) {this.form.submit();}"> 

<input type="hidden" name="form_submitted" value="true">

<a class="buttonfxgrey" href="#" onclick="javascript:this.blur();document.login.submit();">Login</a>

<input type="checkbox" name="remember_me"> Keep me logged in on this computer  <a href="javascript:LearnMorePopup()">(learn more)</a>

</form>

Any ideas what's going wrong? Sometimes it works and processes the form, sometimes it doesn't and just reloads the page without doing anything.

For automatic submission on enter, I thought you needed a submit button. Perhaps I'm wrong? You seem to have a link. Is this so you can style it with CSS? You can style buttons with CSS too.

The link isn't to ajax, so why are you using a link instead of a button?

[nigelburrell]

For automatic submission on enter, I thought you needed a submit button. Perhaps I'm wrong? You seem to have a link. Is this so you can style it with CSS? You can style buttons with CSS too.

The link isn't to ajax, so why are you using a link instead of a button?

Well in this case the hidden button is the submit button which is triggered by the link...

<input type="hidden" name="form_submitted" value="true">

And yes, I'm using a link to style with CSS. I didn't know I could style buttons with CSS as well...!?!

I thought the hidden input couldn't accept anything coz it's hidden?

Try this for a simple button style:

http://www.dynamicdrive.com/style/csslibrary/item/stylish-submit-buttons/

There are loads of other examples - just google 'submit button css'

[nigelburrell]

I thought the hidden input couldn't accept anything coz it's hidden?

Try this for a simple button style:

http://www.dynamicdrive.com/style/csslibrary/item/stylish-submit-buttons/

There are loads of other examples - just google 'submit button css'

The input button is hidden because apparently it's still needed (triggered) upon form submit.

Thanks for the helpful link.

[Josh Connerty]

If you were using JavaScript then you could remove it but if you are using just HTML then yes you would still need it.

The input button is hidden because apparently it's still needed (triggered) upon form submit.

I may be a bit slow here (probably!), but why do you need this hidden input anyway? It doesn't seem to do anything, does it?