Nov 7, 2009

How To Disable The Enter Key Of An Input Text Box

 		free web hosting
Open Discussion & Free Web Hosting > Computers & Tech > Programming > Scripting > PHP

How To Disable The Enter Key Of An Input Text Box

TavoxPeru
Nov 6 2007, 10:35 PM
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
CODE
<?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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Edit/Add 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>
&lt;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)
CODE
<?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 count

if ($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,

 

 

 


Comment/Reply (w/o sign-up)

twitch
Nov 8 2007, 07:09 PM
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.

Comment/Reply (w/o sign-up)

kelvinmaki
Nov 9 2007, 05:45 AM
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.

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


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


Cheers

Comment/Reply (w/o sign-up)

TavoxPeru
Nov 11 2007, 11:22 PM
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:
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:
CODE
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,

 

 

 


Comment/Reply (w/o sign-up)

FeedBacker
May 14 2008, 07:15 AM
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?

Comment/Reply (w/o sign-up)

FeedBacker
May 31 2008, 05:38 AM
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

Comment/Reply (w/o sign-up)

TavoxPeru
Jun 22 2008, 10:03 PM
QUOTE(FeedBacker @ May 31 2008, 12:38 AM) *
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:

CODE
<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://domain.com/handler?color=red&shape=round

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,

Comment/Reply (w/o sign-up)

iGuest-
Sep 9 2008, 05:18 AM
Replying to twitch
You 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.

Comment/Reply (w/o sign-up)

Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.
Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : disable, enter, key, input, text, box

  1. How To Disable Safe Mode In Direct Admin.
    (1)
  2. Display Text If Line Not Empty In Config File
    (8)
    I have been working on a new template and I would like it so that if in the global configuration
    file, I have a variable for a global site announcement that would go on every page. The line in the
    global configuration file is this: CODE $announcement = "ANNOUNCEMENT"; In my template file,
    I could easily add CODE but that would leave a blank space and with the announcement style
    (similar to the Invision Power Board error box). Is there some sort of script that could be put in
    the template page so I could have the global config file look something like t....
  3. Php: Write Random Text As Image
    Having problems, help needed! (3)
    I'm trying to create a script that writes text to an image. CODE header("Content-type:
    image/png"); $_phrases = array( "Test 1", "Test 2", "Test 3", "Test 4", "etc." );
    $_rand_phrase = $_phrases ; $_image = imagecreatefrompng("gmail.png"); $_user_width =
    imaagettfbbox(9,0,"tahoma.ttf",$_rand_phrase); $_x_value = (200-($user_width + 113)); $_color =
    imagecolorallocate($_image, 165, 164, 164); imagettftext($_image, 9, 0, $_x_value, 16, $_color,
    "tahoma.ttf", $_rand_phrase); imagepng($_image); imagedestroy($_image); I can't see what
    I'm doing w....
  4. Php Random Text Generating
    How to Generate Random Text (6)
    I was trying to figure out how to make random texts for random passwords and stuff, and I found
    someone who created this code. QUOTE //author: polmme $codelenght = 10;
    while($newcode_length $x=1; $y=3; $part = rand($x,$y); if($part==1){$a=48;$b=57;}  // Numbers
    if($part==2){$a=65;$b=90;}  // UpperCase if($part==3){$a=97;$b=122;} // LowerCase
    $code_part=chr(rand($a,$b)); $newcode_length = $newcode_length + 1; $newcode = $newcode.$code_part;
    } echo $newcode; ?> I think it's pretty good. If anyone has a better one or suggestions,
    please tell me.....


      5. Looking for disable, enter, key, input, text, box

See Also,

*SIMILAR VIDEOS*
Searching Video's for disable, enter, key, input, text, box
advertisement



How To Disable The Enter Key Of An Input Text Box

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com