Welcome Guest ( Log In | Register )



 
 Reply to this topicStart new topic
> How To Disable The Enter Key Of An Input Text Box
TavoxPeru
post Nov 6 2007, 10:35 PM
Post #1


Super Member
Group Icon

Group: [HOSTED]
Posts: 763
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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,
Go to the top of the page
 
+Quote Post
twitch
post Nov 8 2007, 07:09 PM
Post #2


Veteran Nut
Group Icon

Group: Members
Posts: 527
Joined: 4-October 05
From: UK
Member No.: 8,895
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.
Go to the top of the page
 
+Quote Post
kelvinmaki
post Nov 9 2007, 05:45 AM
Post #3


Advanced Member
Group Icon

Group: Members
Posts: 170
Joined: 30-July 07
Member No.: 23,704
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
Go to the top of the page
 
+Quote Post
TavoxPeru
post Nov 11 2007, 11:22 PM
Post #4


Super Member
Group Icon

Group: [HOSTED]
Posts: 763
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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,
Go to the top of the page
 
+Quote Post
iGuest
post May 14 2008, 07:15 AM
Post #5


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 0
Joined: 1-November 07
Member No.: 25,869
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?
Go to the top of the page
 
+Quote Post
iGuest
post May 31 2008, 05:38 AM
Post #6


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 0
Joined: 1-November 07
Member No.: 25,869
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
Go to the top of the page
 
+Quote Post
TavoxPeru
post Jun 22 2008, 10:03 PM
Post #7


Super Member
Group Icon

Group: [HOSTED]
Posts: 763
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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,
Go to the top of the page
 
+Quote Post
« Next Oldest · PHP · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Display Text If Line Not Empty In Config File(8)
  2. How To Disable Safe Mode In Direct Admin.(1)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 13th October 2008 - 05:58 AM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation