AJAX

Disable "Enter" in radio button area in web form

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2007

Posts: 56

Reputation: serendipity is an unknown quantity at this point

Solved Threads: 0

serendipity serendipity is offline

Offline

Junior Poster in Training

Disable "Enter" in radio button area in web form

Oct 15th, 2009

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:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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:

 Help with Code Tags 
 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.

•

Join Date: Aug 2009

Posts: 88

Reputation: Graphix is an unknown quantity at this point

Solved Threads: 20

Graphix

Offline

Junior Poster in Training

Oct 17th, 2009

Perhaps try something like this?:

 Help with Code Tags 
 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.

•

Join Date: Apr 2009

Posts: 885

Reputation: Airshow will become famous soon enough

Solved Threads: 127

Airshow

Offline

Practically a Posting Shark

Oct 17th, 2009

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:

 Help with Code Tags 
 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.

50% of the solution lies in accurately describing the problem!

•

Join Date: May 2007

Posts: 56

Reputation: serendipity is an unknown quantity at this point

Solved Threads: 0

serendipity serendipity is offline

Offline

Junior Poster in Training

Oct 18th, 2009

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