Jump to content
xisto Community
TavoxPeru

How To Disable The Enter Key Of An Input Text Box

Recommended Posts

Hi everybody, i don't know if this is the correct place to post this topic so in case it is not please mods move it to the correct place, thanks.

 

I have a page with a FORM that contains one or more INPUT TEXT boxes, a standard SELECT box, a standard SUBMIT button, a standard BUTTON button, and some hidden TEXT boxes, that will be used to Edit or to Add a record from a MySql database as usual, in Edit mode this form will get all the information from the database and in Add mode simply will fill it with default values, this page will be opened with the window.open() javascript function when someone clicks a button (one to ADD and another to EDIT) on the main page, so, it is like a Pop up window.

 

Also this page -the openend one- have attached an Ajax page that is used to validate that the value of one of the TEXT boxes is unique and do not exists on the database to prevent duplicates. The SELECT box acts as a one to many relation and gets its values from another table, the SUBMIT button will save the data on the database and the BUTTON simply will cancel and send back to the previous page discarding any change.

 

This is my code, i don't include an included file with some php functions, my session code and my database connection settings because they are irrelevant.

 

form page

<?php// session code, include file and database connection settins go here$bo="<body class='bodyedicion' onload='valida()'>";// data from the database for the SELECT BOX$query_rsContinente = "SELECT idcontinente, continente FROM continente WHERE activo = 'S' ORDER BY continente.idcontinente ASC";$rsContinente = mysql_query($query_rsContinente) or die(mysql_error());$row_rsContinente = mysql_fetch_assoc($rsContinente);$totalRows_rsContinente = mysql_num_rows($rsContinente);// php variables that hold the data from the database$mode=(!isset($_POST[mode])) ? "" : $_POST[mode];$idpais=(!isset($_POST[idpais])) ? "" : $_POST[idpais];$idcontinente=(!isset($_POST[idcontinente])) ? "" : $_POST[idcontinente];$pais=(!isset($_POST[pais])) ? "" : $_POST[pais];$pais1=(!isset($_POST[pais1])) ? "" : $_POST[pais1];if ($modo=="grabar") { // save data to the database	$pais=(string) safeString(trim($pais));	if ($accion=="a") { // when adding a new record		$cadena="insert into pais(pais,idcontinente, fecha, hora, creador) values ('$pais',$idcontinente, curdate(), curtime()," . $_SESSION["idusuario"] . ")";	}		if ($accion=="m") { // when editing a record		$cadena="update pais set pais='$pais', idcontinente=$idcontinente where idpais=$idpais";	}	$rs = mysql_query($cadena) or die("Error... query failed.\n" . mysql_errno(). ": " . mysql_error() . "<br /><br /><a href=\"java script:history.back();\">Go back</a>"); 	$bo="<body class='bodyedicion' onload='window.opener.recarga();window.close()'>";}else {	if ($accion=="m") { // edit record		$idpais=(int) ($codigo);		$cadena="select idpais, pais, idcontinente from pais where idpais=$idpais";		$rs = mysql_query($cadena);		$row = mysql_fetch_array($rs);		$idpais=(int) $row["idpais"];		$pais=$row["pais"];		$pais1=$row["pais"];		$idcontinente=(int) $row["idcontinente"];	}	else $pais1="";}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ a Country</title><link rel="stylesheet" href="hojaestilo/@data001.css" type="text/css"><style type="text/css">#ajaxDiv { font-size:10px;font-weight:bold}</style><script type="text/javascript">function valida() {	document.a.aceptar.style.display="inline";	if (document.a.pais.value=="") document.a.aceptar.style.display="none";	document.a.pais.focus();}function ajaxFunction(){	var ajaxRequest;		try{		ajaxRequest = new XMLHttpRequest();	} catch (e){		try{			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");		} catch (e) {			try{				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");			} catch (e){				alert("Your browser broke!");				return false;			}		}	}	ajaxRequest.onreadystatechange = function(){		if(ajaxRequest.readyState == 4){			var ajaxDisplay = document.getElementById('ajaxDiv');						var response = ajaxRequest.responseText.split("|");			ajaxDisplay.innerHTML = response[0];			var TheCode = response[1];			if (TheCode == 1) {				document.a.aceptar.style.display="none";				document.a.pais.style.borderColor="red";				document.a.pais.style.borderStyle="double";				document.a.pais.focus();				document.a.esvalido.value="0";			}			else {				document.a.aceptar.style.display="inline";				document.a.pais.style.borderColor="#80a0a0";				document.a.pais.style.borderStyle="solid";				document.a.esvalido.value="1";			}		}	}	var unique  = document.getElementById('pais').value;	var actual = document.getElementById('pais1').value;	var table  = 'pais';	var field  = 'pais';	var queryString = "?table="+table+"&unique="+unique+"&actual="+actual+"&field="+field;	ajaxRequest.open("GET", "checkunique.php" + queryString, true);	ajaxRequest.send(null); }function verifica(){ 	if(document.a.esvalido.value=="0" || document.a.pais.value=="") {		document.a.pais.focus();		return false;	}	return true;}</script></head><?php echo $bo;?><table class="tituloedicion" width="100%" border="0" cellpadding="2" cellspacing="0"><tr><td>ADD/EDIT  PAÍSES</td></tr></table><form name="a" method="post" onsubmit="return verifica();"><table class="tablaedicion" width="100%" border="0" cellpadding="2" cellspacing="4">   <tr>   <td class='textoedicion' width="32%">PAÍS</td>   <td><input type="text" name="pais" id="pais" class='textos' value="<?php echo $pais;?>" size="40" maxlength="40" onkeyup="valida()" onblur="ajaxFunction()"><span id='ajaxDiv'></span></td>   </tr>   <tr>		<td class='textoedicion' width="32%">CONTINENTE</td>		<td><select name="idcontinente" id="idcontinente" class="textos" size="1" style="width:167px">		<?php		do {		?>			<option value="<?php echo $row_rsContinente['idcontinente']?>"<?php if (!(strcmp($row_rsContinente['idcontinente'],$idcontinente))) {echo "SELECTED";} ?>><?php echo $row_rsContinente['continente']?></option>		<?php		} while ($row_rsContinente = mysql_fetch_assoc($rsContinente));		$rows = mysql_num_rows($rsContinente);		if($rows > 0) {			mysql_data_seek($rsContinente, 0);			$row_rsContinente = mysql_fetch_assoc($rsContinente);		}		?></select></td>	</tr></table><input type='text' name='modo' value='grabar' style="visibility:hidden;display:none"><input type='text' name='idpais' value="<?php echo $idpais;?>" style="visibility:hidden;display:none"><input type='text' name='pais1' id='pais1' value="<?php echo $pais1;?>" style="visibility:hidden;display:none"><input type='text' name='esvalido' id='esvalido' value="0" style="visibility:hidden;display:none"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="100%" align="center" valign="middle" class='textoBotones'><input type="submit" class='botonGr' name="aceptar" value="SAVE" > <input type="button" class='botonGr' name="cancelar" value="CANCEL" onClick="window.close()"></td></tr></table></form></body></html>
checkunique.php (ajax page)

<?php// session code, include file and database connection settins go here$t=$_GET["table"]; // name of the table$u= $_GET["unique"]; // unique value to check$a=$_GET["actual"]; // actual value of the filed$c=$_GET["field"]; // name of the unique field$u = mysql_real_escape_string($u);$sql = "SELECT $c from $t WHERE $c='$u'";$total_registros=mysql_num_rows(mysql_query($sql)); // total records countif ($total_registros>0) {	if( $a=="") {		$display_string = "Error|1";	}	else {		if ($a==$u)			$display_string = "Ok|0";		else			$display_string = "Error|1";	}}else {	$display_string = "Ok|0";}echo $display_string;?>
What i need is a way to disable the ENTER key when any of the TEXT boxes gets focused so if it is pressed do not submit the form simply goes to the next input of the form, only when the SUBMIT button gets focused and the ENTER key is pressed or when i click on it the form will be submitted.

 

Best regards,

Share this post


Link to post
Share on other sites

Why? Nobody uses the enter key to skip through fields online, they use either tab or the mouse. Besides, it would be easier just to fire them back with a validation error for not completing fields if they were to press enter to try and toggle fields.

Share this post


Link to post
Share on other sites

I've tried something like this before by putting the form tag to return false. This way, it will not submit even when ENTER in the input field.

<form onSubmit="return false;">

And for the submit button, you can add an onClick function that return false too. Then add an AJAX listener for that button to perform your list of functions. I can only think of such methods to deal with your case.


<input type="submit" value="submit" onclick="return false;" id="submit1234"><script type="text/javascript">Event.observe("submit1234","click",function(event){new Ajax.Updater(........)});</script>

Cheers

Share this post


Link to post
Share on other sites

twitch: i want this because i want to control a unique field of my table, and when you press the ENTER key in any input box -if the autocomplete function of the browser is enabled- it submits the form and breaks up what i want to control. BTW, thanks for your suggestion, i just add a validation routine to control empty fields.

 

kelvinmaki: thanks for your suggestion too, i don't think it that kind solution in that moment.

 

Now, as developers we know that if something don't work in the way we want the best practice is to try another solution right??? well, i just apply this concept and finally i find an easy solution to my problem.

 

In my case, i take off the ajax part and go back to just simple javascript, by implementing a function to the onkeypress event of the document that will check if the ENTER key is pressed, and, at the server side the UNIQUE field is controled by the MySql server, by using the mysql_errno() php function, when this function returns the error number 1062 it shows up a customized error message if not it shows up the standard MySql error message to the user.

 

This is the php code:

<?php// database connection settings, and all the other stuff goes here$rs = mysql_query($sql) or die("<p style='font-size:0.75em; '>SQL ERROR, DEBUG : <br /><b>".$sql."</b><br /><br />MySql Error: <br /><b>" . mysql_errno() . " : " . (mysql_errno()==1062 ? "Duplicate key" : mysql_error())  . "</b><br /><br /><a href=\"java script:history.back();\">Press here to go back</a></p>");// more code?>
The $sql php variable contains the insert or the update sql query to execute.

 

The following javascript function goes inside the HEAD HTML element of the page:

function checkCR(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 = checkCR; // attach the function to the onkeypress event
Well, that's it, it functions pretty well, i test it with Internet Explorer 6 and with FireFox 2, one thing that i will try later -i'm not sure if i do this- is a way to give the focus to the next field of the FORM instead to do nothing and return false when the ENTER key is pressed. If i implement this i will post how i do it.

 

Best regards and thanks for your suggestions,

Share this post


Link to post
Share on other sites

enter key

How To Disable The Enter Key Of An Input Text Box

 

How to go to another line of input form in html using enter key? what is its code?

Share this post


Link to post
Share on other sites

I m retriving data from Mysql databast to the Input box but on runtime the text box displays the <?php $_GET['name1']; ?> in its textbox Help me what is difference between GET and POST method -reply by Joshua

Share this post


Link to post
Share on other sites

I m retriving data from Mysql databast to the Input box but on runtime the text box displays the <?php $_GET['name1']; ?> in its textbox
Help me what is difference between GET and POST method

-reply by Joshua

You forgot to include an echo statement, simply add it to your code like the following example:

<input type="text" name="name1" value="<?php echo $_GET["name1"]; ?>" size="30">
The GET method is used if you want to send information somewhere via a browser URL. Youâve seen URLs that send information; they look something like:

http://forums.xisto.com/no_longer_exists/

In the above URL, the part after the question mark is information sent to handler. Multiple information chunks are separated with an ampersand. The GET method can send only a limited amount of information. The limitation depends on the server where the server where the information is sent to. The limitation can be as little as 256 bytes but is often 1k or more. Another limitation of the GET method is that the information being sent is visible in the browser's address bar. In some cases this is of no consequence. In others, it is unacceptable.

The POST method is the most common method used to send information from a form to an information processing program or function. The POST method can send much more information than the typical GET method. Most browsers and servers limit the amount of POST information to about 32k. With POST, the information is not sent via the URL. The sending is invisible to the site visitor.

Best regards,

Share this post


Link to post
Share on other sites
Replying to twitchYou are entirely wrong on this twitch, and so arrogant.I am a computer user, and not `nobody' as you so condesendingly suggest.When entering ANY KIND OF TEXT, I expect the Return key to just let me complete that line NOT act on some other GUI element completely.

Share this post


Link to post
Share on other sites

As per functionality both GET and POST methods were same.Difference is GET method will be showing the information information to the users.But in the case of POST method information will not be shown to the user.

 

The data passed using the GET method would be visible to the user of the website in the browser address bar but when we pass the information using the POST method the data is not visible to the user directly.

 

Also in GET method characters were restricted only to 256 characters.But in the case of POST method characters were not restricted.

Get method will be visible to the user as it sended appended to the URL, put Post will not be visible as it is sent encapsulated within the HTTP request body.

 

 

About the data type that can be send, with Get method you can only use text as it sent as a string appended with the URL, but with post is can text or binary.

 

 

About form default, Get is the defualt method for any form, if you need to use the post method, you have to change the value of the attribute "method" to be Post.

 

 

Get method has maximum length restricted to 256 characters as it is sent appended with the URL, but the Post method hasn't.

 

Get method has limitataion in the size of data tranamitted, but post method hasn't.

 

Read more: http://forums.xisto.com/no_longer_exists/

enter key

How To Disable The Enter Key Of An Input Text Box

 

How to go to another line of input form in html using enter key? what is its code?

Share this post


Link to post
Share on other sites

To tell the truth, in HTTP GET is like SELECT in DB, POST is like UPDATE, PUT is like INSERT and DELETE is the same DELETE.It's called CRUD (Create Read Update Delete)In WWW (world wide web) we usually use GET and POST for everything, but by standards and using RESTful services, you would need to use PUT and DELETE, but by most administrators they are blocked.Anyway, so how you need to use GET and POST in world wide web:1) GET is used for getting data from the server, whenever you need to show a page, you should use a GET request.2) POST is used to write data to the server, whenever you post user data from a form and you do an insert, you need to use POST method and insert the data and redirect to GET again.So what I want to tell you is you need to always use GET, when submitting a from with user data which you want to save, use a POST request and whenever you inserted the data, you need to redirect to a GET request on the same request and show that the data was saved or whatever, you need to avoid showing something to the user on page with a POST method.In this way, when clicking back button, you won't ever send a POST request again and won't need to resubmit data and lets say double post.That's the right way to use GET and POST.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.