Selezionare campo e automaticamente disabilitarne un'altro

**cavicchiandrea** · 02-05-2008, 23:38

Cosi fa quanto vuoi, per semplicità ho utilizzato ajax la pagina "ricerca.html" carica o la pagina "barre.html" oppure la pagina "code.html" e disabilita il campo senza fuoco code:
pagina ricerca.html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Info Prezzi</title>
<script type="text/javascript" language="JavaScript">
function objAjx(){
	    var xmlhttp = null;
    	
	    if(window.XMLHttpRequest) 
	    {
		    xmlhttp = new XMLHttpRequest(); // Gecko (Firefox, Moz), KHTML (Konqueror, Safari), Opera, Internet Explorer 7
	    } 
	    else if(window.ActiveXObject) 
	    {
		    try
		    {
			    xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); // Internet Explorer 6 
		    } 
		    catch(e) 
		    {
			    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 4,5 
		    }
		    } 
	    else 
	    {
		    xmlhttp = null;
	    }
	    return xmlhttp;
    };
		function Visualizza(pagina){
			
		AjaX = objAjx();
         if(AjaX){
           //Chiamo la funzione caricoRisultati quando c'è un cambio evento    
              AjaX.onreadystatechange=function(){
                 mostroRisultati(AjaX,pagina)
              }
              
           //Invio i dati alla pagina .asp
              AjaX.open('GET', pagina+"?noCache=" + new Date().getSeconds() + '' + Math.floor(Math.random() * (9999)), true)         
              AjaX.send(null)                                      
    }
 }
   function mostroRisultati(AjaX,pagina){
   //Se è andato tutto bene faccio vedere il risultato
      if (AjaX.readyState == 4 && (AjaX.status==200 || window.location.href.indexOf("http")==-1)){
        document.getElementById("tastierino").innerHTML = AjaX.responseText
		
}
}
</script>
</head>

<body>


<div align="center">
<table border="1" width="360" id="table2" height="300" style="border-collapse: collapse">
<tr>
<form name="InfoPrezzi" method="POST" action="CercaPrezzi.asp">
<td valign="top">
<table border="0" width="100%" id="table3">
<tr>
<td width="35%"><font face="Arial" size="2">
CODICE INTERNO</font></td>
<td width="63%">
<input type="text" name="CODICE" id="code" onfocus="Visualizza('code.html'); form.CODICEABARRE.disabled=true" size="20" style="font-size: 14pt; font-family: Arial"></td>
</tr>
<tr>
<td width="35%"><font face="Arial" size="2">CODICE A BARRE</font></td>
<td width="63%">
<input type="text" name="CODICEABARRE" id="barre" size="20" style="font-size: 14pt; font-family: Arial" onfocus="Visualizza('barre.html'); form.CODICE.disabled=true" ></td>
</tr>
<tr>
<td colspan="2" align="center" id="tastierino">Per inziare la ricerca clicca in uno dei campi</td>
</table>
<input type="hidden" name="Azione" value="SI">
</form>
</table>
</div>


</body>

</html>

pagina da salvare con nome code.html

codice:

<table border="1" width="161" id="table4">
  <tr>
    <td width="23"><input type="button" name="7" value="7" onClick="document.getElementById('code').value += '7'" ></td>
    <td width="30"><input type="button" name="8" value="8" onClick="document.getElementById('code').value += '8'" ></td>
    <td width="23"><input type="button" name="9" value="9" onClick="document.getElementById('code').value += '9'" ></td>
    <td width="126"><input type="button" name="Canc" onclick="document.getElementById('code').value = ''" value="C" /></td>
  </tr>
  <tr>
    <td width="23"><input type="button" name="4" value="4" onClick="document.getElementById('code').value += '4'" ></td>
    <td width="30"><input type="button" name="5" value="5" onClick="document.getElementById('code').value += '5'" ></td>
    <td width="23"><input type="button" name="6" value="6" onClick="document.getElementById('code').value += '6'" ></td><td><input type="button" name="Space" onclick="document.getElementById('code').value += ' '" value="SP" /></td>
  </tr>
  <tr>
    <td width="23"><input type="button" name="1" value="1" onClick="document.getElementById('code').value += '1'" ></td>
    <td width="30"><input type="button" name="2" value="2" onClick="document.getElementById('code').value += '2'" ></td>
    <td width="23"><input type="button" name="3" value="3" onClick="document.getElementById('code').value += '3'"></td>
    <td width="126"><input type="button" name="reset" id="reset" value="Resetta" onclick="if( confirm('Sicuro di voler resettare il form?'))location.reload(true)" /></td>
  </tr>
  <tr>
    <td width="23"><input type="button" name="0" value="0" onClick="document.getElementById('code').value += '0'" ></td>
    <td width="30"><input type="button" name="00" value="00" onClick="document.getElementById('code').value += '00'" ></td>
    <td width="23"><input type="button" name="." value="." onClick="document.getElementById('code').value += '.'" ></td><td><input name="Pulsante" type="button" value="CERCA" onclick="document.forms['InfoPrezzi'].submit()" /></td>
  </tr>
</table>

pagina da salvare con nome barre.html

codice:

<table border="1" width="161" id="table4">
  <tr>
    <td width="23"><input type="button" name="7" value="7" onClick="document.getElementById('barre').value += '7'" ></td>
    <td width="30"><input type="button" name="8" value="8" onClick="document.getElementById('barre').value += '8'" ></td>
    <td width="23"><input type="button" name="9" value="9" onClick="document.getElementById('barre').value += '9'" ></td>
    <td width="126"><input type="button" name="Canc" onclick="document.getElementById('barre').value = ''" value="C" /></td>
  </tr>
  <tr>
    <td width="23"><input type="button" name="4" value="4" onClick="document.getElementById('barre').value += '4'" ></td>
    <td width="30"><input type="button" name="5" value="5" onClick="document.getElementById('barre').value += '5'" ></td>
    <td width="23"><input type="button" name="6" value="6" onClick="document.getElementById('barre').value += '6'" ></td><td><input type="button" name="Space" onclick="document.getElementById('barre').value += ' '" value="SP" /></td>
  </tr>
  <tr>
    <td width="23"><input type="button" name="1" value="1" onClick="document.getElementById('barre').value += '1'" ></td>
    <td width="30"><input type="button" name="2" value="2" onClick="document.getElementById('barre').value += '2'" ></td>
    <td width="23"><input type="button" name="3" value="3" onClick="document.getElementById('barre').value += '3'"></td>
    <td width="126"><input type="button" name="reset" id="reset" value="Resetta" onclick="if( confirm('Sicuro di voler resettare il form?'))location.reload(true)" /></td>
  </tr>
  <tr>
    <td width="23"><input type="button" name="0" value="0" onClick="document.getElementById('barre').value += '0'" ></td>
    <td width="30"><input type="button" name="00" value="00" onClick="document.getElementById('barre').value += '00'" ></td>
    <td width="23"><input type="button" name="." value="." onClick="document.getElementById('barre').value += '.'" ></td><td><input name="Pulsante" type="button" value="CERCA" onclick="document.forms['InfoPrezzi'].submit()" /></td>
  </tr>
</table>

Attenzione se cambi i nomi delle pagina barre e code dovrai aggiornare anche i rispettivi campi. ho cancellato tutti gli stile in linea era un casino non si capiva niente se vuoi cambiare lo stile usa i css impostando un foglio di stile esterno

Discussione: Selezionare campo e automaticamente disabilitarne un'altro

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Permessi di invio