Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 1341

Oct 15th, 2009

Disable "Enter" in radio button area in web form

Expand Post »

I have a web form. I want the "enter" key disabled from sending the form so users have to SUBMIT in order to send form.
Have the following entered in the head:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function stopRKey(evt) { 
  var evt = (evt) ? evt : ((event) ? event : null); 
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
} 
 
document.onkeypress = stopRKey;
function stopRKey(evt) { 
  var evt = (evt) ? evt : ((event) ? event : null); 
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
} 

document.onkeypress = stopRKey;

It works great in the "text" form area which is in a table format. Sample:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<TR>
                  <TD align=right width=40%><FONT 
                  size=2><B>First Name:&nbsp;</b></FONT></TD>
                  <TD ><INPUT name=A-firstname></TD></tr>
<TR>                  <TD align=right width=40%><FONT 
                  size=2><B>Last Name:&nbsp;</b></FONT></TD>
                  <TD><INPUT name=B-lastname></TD></TR>
<TR>
                  <TD align=right width=40%><FONT 
                  size=2><B>First Name:&nbsp;</b></FONT></TD>
                  <TD ><INPUT name=A-firstname></TD></tr>
<TR>                  <TD align=right width=40%><FONT 
                  size=2><B>Last Name:&nbsp;</b></FONT></TD>
                  <TD><INPUT name=B-lastname></TD></TR>

When I get to the radio button area it doesn't work. It is NOT in a table format. Here's a sample of the radio button area:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
                  <p> 1.  The fundamental  building blocks of matter are atoms and _________.<BR> 
                  <INPUT type=radio value="a" name="1"> a. mass <BR>
                  <INPUT type=radio value="b" name="1"> b. protons <BR>
                  <INPUT type=radio value="c" name="1"> c. molecules <BR>
                  <INPUT type=radio value="d" name="1"> d. neutrons </p>
                  <p> 1.  The fundamental  building blocks of matter are atoms and _________.<BR> 
                  <INPUT type=radio value="a" name="1"> a. mass <BR>
                  <INPUT type=radio value="b" name="1"> b. protons <BR>
                  <INPUT type=radio value="c" name="1"> c. molecules <BR>
                  <INPUT type=radio value="d" name="1"> d. neutrons </p>

Any help would be greatly appreciated.

Similar Threads

Different action in different radio button ?? in JavaScript / DHTML / AJAX
Data binding to a Radio Button in C#
Radio button checked? in PHP
Validating radio button selection for login redirect in JavaScript / DHTML / AJAX
Radio Button and List in JSP

serendipity

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

58 posts
since May 2007

Permalink

Oct 17th, 2009

Re: Disable "Enter" in radio button area in web form

Perhaps try something like this?:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
...
...Header HTML
...
<script type="text/javascript">
function entersubmit(event) { 
if (window.event && window.event.keyCode == 13) { 
return false;
} else { 
if (event && event.which == 13) { 
return false;
} else { 
return false;
} 
}  
} 
</script>
<form>
                  <p> 1.  The fundamental  building blocks of matter are atoms and _________.<BR> 
                  <input type=radio value="a" name="1" onkeypress="entersubmit(event)"> a. mass <BR>
                  <input type=radio value="b" name="1" onkeypress="entersubmit(event)"> b. protons <BR>
                  <input type=radio value="c" name="1" onkeypress="entersubmit(event)"> c. molecules <BR>
                  <input type=radio value="d" name="1" onkeypress="entersubmit(event)"> d. neutrons </p>
</form>
...
...Footer HTML
...
...
...Header HTML
...
<script type="text/javascript">
function entersubmit(event) { 
if (window.event && window.event.keyCode == 13) { 
return false;
} else { 
if (event && event.which == 13) { 
return false;
} else { 
return false;
} 
}  
} 
</script>
<form>
                  <p> 1.  The fundamental  building blocks of matter are atoms and _________.<BR> 
                  <input type=radio value="a" name="1" onkeypress="entersubmit(event)"> a. mass <BR>
                  <input type=radio value="b" name="1" onkeypress="entersubmit(event)"> b. protons <BR>
                  <input type=radio value="c" name="1" onkeypress="entersubmit(event)"> c. molecules <BR>
                  <input type=radio value="d" name="1" onkeypress="entersubmit(event)"> d. neutrons </p>
</form>
...
...Footer HTML
...

EDIT 1: Also keep in mind that the usage of caps is depercated in XHTML.

EDIT 2: I also don't get the question. Atoms are build out of neutrons, elektrons and protons. Molecules are build out of atoms. And mass is just a wrong answer. Isn't the question wrong?

~G

Last edited by Graphix; Oct 17th, 2009 at 12:15 pm.

Graphix

Reputation Points: 82

Solved Threads: 74

Posting Pro in Training

Offline

401 posts
since Aug 2009

Permalink

Oct 17th, 2009

Re: Disable "Enter" in radio button area in web form

Serendipity,

The easiest way, in my experience, is not to use a submit button.

Instead, use a regular <input type="button" value="Submit" onclick"this.form.submit();"> . The script gives the necessary submit action.

Thus, the only way to submit the form should be for the user to click the "Submit" button (or to hit enter if/when it has focus).

I used to be sure that this technique was universally true, but you should test the latest crop of browsers to make sure. I could be out of date.

The slight downside is that <form ...... onsubmit="....."> (should you need it) will now not intercept the submission, but the workaround is also simple; modify the "Submit" button's onclick"this.form.submit();" to make submission conditional or whatever you would otherwise put in the form's onsubmit . If it gets complex, then write/call a function.

Here is a demo which you can use to do some testing:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
form { margin-top:20px; padding:12px; width:150px ; border:1px solid #999; }
</style>
 
<script>
function writeInputText(){
	document.f1.i1.value = 'ABCDEF';
	document.f2.i1.value = 'ABCDEF';
}
 
onload = function(){
	setTimeout("writeInputText()", 1000);
}
</script>
</head>
 
<body>
 
<form name="f1" action="">
<input name="i1" value="------"><br>
<input><br>
<input type="radio" name="x" value="1"><br>
<input type="radio" name="x" value="2"><br>
<input type="radio" name="x" value="3"><br>
<input type="button" value="My Submit" onclick="this.form.submit();"><br>
</form>
 
<form name="f2" action="">
<input name="i1" value="------"><br>
<input><br>
<input type="radio" name="x" value="1"><br>
<input type="radio" name="x" value="2"><br>
<input type="radio" name="x" value="3"><br>
<input type="Submit" value="HTML Submit"><br>
</form>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
form { margin-top:20px; padding:12px; width:150px ; border:1px solid #999; }
</style>

<script>
function writeInputText(){
	document.f1.i1.value = 'ABCDEF';
	document.f2.i1.value = 'ABCDEF';
}

onload = function(){
	setTimeout("writeInputText()", 1000);
}
</script>
</head>

<body>

<form name="f1" action="">
<input name="i1" value="------"><br>
<input><br>
<input type="radio" name="x" value="1"><br>
<input type="radio" name="x" value="2"><br>
<input type="radio" name="x" value="3"><br>
<input type="button" value="My Submit" onclick="this.form.submit();"><br>
</form>

<form name="f2" action="">
<input name="i1" value="------"><br>
<input><br>
<input type="radio" name="x" value="1"><br>
<input type="radio" name="x" value="2"><br>
<input type="radio" name="x" value="3"><br>
<input type="Submit" value="HTML Submit"><br>
</form>

</body>
</html>

Airshow

Last edited by Airshow; Oct 17th, 2009 at 1:14 pm.

Airshow

Sponsor

Reputation Points: 318

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,527 posts
since Apr 2009

Permalink

Oct 18th, 2009

Re: Disable "Enter" in radio button area in web form

Thanks Graphix & Airshow!Graphix, the "fundamental building blocks of matter" are atoms and molecules. You are right, atoms are made of protons, neutrons, electrons, and matter has mass, but is not made up of mass. Matter is also not made up of just protons, neutrons, or electrons. It is made up of atoms and molecules, and yes, molecules are made up of atoms! Hey, that's the point of multiple choice questions, isn't it? -- tricky tricky tricky!!!

serendipity

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

58 posts
since May 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Own html editor

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Best Way to Learn?

DaniWeb Message

Cancel Changes

User Name
Password