1,105,538 Community Members

Auto button when user hits the Enter key

Member Avatar
nigelburrell
Light Poster
38 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
Josh Connerty
Posting Whiz
358 posts since Apr 2009
Reputation Points: 20 [?]
Q&As Helped to Solve: 29 [?]
Skill Endorsements: 1 [?]
 
0
 

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

Member Avatar
ShawnCplus
Code Monkey
1,564 posts since Apr 2005
Reputation Points: 456 [?]
Q&As Helped to Solve: 269 [?]
Skill Endorsements: 39 [?]
Team Colleague
 
0
 

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.

Member Avatar
Tulsa
Junior Poster in Training
77 posts since May 2009
Reputation Points: 1 [?]
Q&As Helped to Solve: 15 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
navi17
Junior Poster
120 posts since Oct 2007
Reputation Points: 5 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
Tulsa
Junior Poster in Training
77 posts since May 2009
Reputation Points: 1 [?]
Q&As Helped to Solve: 15 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
Josh Connerty
Posting Whiz
358 posts since Apr 2009
Reputation Points: 20 [?]
Q&As Helped to Solve: 29 [?]
Skill Endorsements: 1 [?]
 
0
 

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...

Member Avatar
nigelburrell
Light Poster
38 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
nigelburrell
Light Poster
38 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
1
 

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.

Member Avatar
1337cookie
Newbie Poster
9 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
1
 

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.

Member Avatar
nikesh.yadav
Posting Whiz in Training
220 posts since Feb 2008
Reputation Points: 4 [?]
Q&As Helped to Solve: 21 [?]
Skill Endorsements: 0 [?]
 
0
 
<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.

:)

Member Avatar
nigelburrell
Light Poster
38 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 
<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.

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

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?

Member Avatar
nigelburrell
Light Poster
38 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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...!?!

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

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'

Member Avatar
nigelburrell
Light Poster
38 posts since Jun 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
Josh Connerty
Posting Whiz
358 posts since Apr 2009
Reputation Points: 20 [?]
Q&As Helped to Solve: 29 [?]
Skill Endorsements: 1 [?]
 
0
 

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

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

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?

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article