Attivare pulsante secondo condizione

**orcim** · 28-08-2008, 08:24

ciao a tutti.

è possibile con javascript attivare un pulsante solo quando il campo a cui è associato è stato compilato?

Cioè ho un campo di testo chiamato txt alla sua destra ho un'icona chiamata txt.gif: vorrei che fosse possibile cliccare su questa icona ed attivare un "a href " solo quando all'interno del campo di testo txt è stato inserito un valore.

Si può fare?
grazie

**willybit** · 28-08-2008, 09:56

Ciao orcim,

potresti controllare se il campo di testo è valorizzato all'onclick del "a href"

codice:

<form name="NomeForm">
<input type="text" name="txt">[img]tuaimmagine.gif[/img]
</form>

**orcim** · 28-08-2008, 10:22

grazie per la risposta ma forse non ho dato info sufficienti.

Spiego meglio il problema, il form è questo:

codice:

<form action="form.asp" method="post" onsubmit="return(validateForm(this));">

<select size="1" name="t_im" onchange="Form()">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a href="javascript:Form()">
[img]icon_1.gif[/img]</a>
            
<select size="1" name="c_fu">
<option value="">Select value</option>
<option value="Si">Si</option>
<option value="No">No</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a href="javascript:Form()">
[img]icon_2.gif[/img]</a>
            
</form>

La necessità invece è questa :

1) Se il valore selezionato nella select name="t_im" è NULLO ( "" ) dovrei disabilitare la icon_1.gif
2) Se il valore selezionato nella select name="t_im" NON è NULLO ( "" ) dovrei abilitare la icon_1.gif

3) Se il valore selezionato nella select name="c_fu" è NULLO ( "" ) oppure è "SI" dovrei disabilitare la icon_2.gif
4) Se il valore selezionato nella select name="c_fu" è "NO" dovrei abilitare la icon_2.gif

E' più chiaro ?

**willybit** · 28-08-2008, 11:00

dipende da cosa intendi per "disabilitare la icon_1.gif"
se ti basta non fare eseguire l'href del link potresti fare una cosa del genere:
metti l'id ai link e in base alle tue esigenze imposti l'onclick con "return true" o "return false"

codice:

<script>
function CheckIcon1(ss){
	if(ss.options[ss.selectedIndex].value==''){
		document.getElementById('icon1').onclick=Function('return false')
	}
	else{
		document.getElementById('icon1').onclick=Function('return true')
	}
}
</script>
<select size="1" name="t_im" onchange="Form();CheckIcon1(this)">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a id="icon1" href="javascript:Form()" onclick="return false">
[img]icon_1.gif[/img]</a>

**orcim** · 28-08-2008, 11:17

Intendo dire disabilitare l'href del link od anche sostituire alla icon.gif un'altra icona senza alcun href.

Ad ogni modo ho provato il tuo codice e qualunque valore seleziono dalla select name="t_im" si apre la pagina figlia in popup ed il link su icon.gif della pagina madre è sempre attivo:

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript">

function CheckIcon1(ss){
	if(ss.options[ss.selectedIndex].value==''){
		document.getElementById('icon1').onclick=Function('return false')
	}
	else{
		document.getElementById('icon1').onclick=Function('return true')
	}
}


function Form(theUrl, percSize) 

{

var width = 400; 
var height = 200; 
var left = Math.floor((screen.width-width)/2); 
var top = Math.floor((screen.height-height)/2); 

  window.open(theUrl,'popup','width='+width+',height='+height+',top='+top+',left='+left);
  
}


</script>


</head>

<body>

<form action="form.asp" method="post" onsubmit="return(validateForm(this));">
 
<select size="1" name="t_im" onchange="Form();CheckIcon1(this)">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a id="icon1" href="javascript:Form()" onclick="return false">
[img]icon.gif[/img]</a>
            
<select size="1" name="c_fu">
<option value="">Select value</option>
<option value="SI">SI</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a id="icon1" href="javascript:Form()" onclick="return false">
[img]icon.gif[/img]</a>
            
</form>

</body>

</html>

**willybit** · 28-08-2008, 11:37

la funzione che ho fatto funziona correttamente: abilita o disabilita l'esecuzione dell'href del link (assegnando return true o return false)
se vuoi anche cambiare l'immagine ti basta mettere un id anche sull'immagine e cambiare l'src

codice:

function CheckIcon1(ss){
	if(ss.options[ss.selectedIndex].value==''){
		document.getElementById('icon1').onclick=Function('return false')
		document.getElementById('img_icon1').src='puppa.gif'
	}
	else{
		document.getElementById('icon1').onclick=Function('return true')
		document.getElementById('img_icon1').src='icon.gif'
	}
}

tu fai eseguire la funzione Form all'onchage della select passando un parametro e al click dell'immagine senza passare un parametro

se vuoi farla eseguire all'onchange seguendo sempre le stesse condizioni potresti fare così

codice:

<script>
function CheckIcon1(ss){
	var ok=false
	if(ss.options[ss.selectedIndex].value==''){
		document.getElementById('icon1').onclick=Function('return false')
		document.getElementById('img_icon1').src='puppa.gif'
	}
	else{
		document.getElementById('icon1').onclick=Function('return true')
		document.getElementById('img_icon1').src='icon.gif'
		ok=true
	}
	return ok
}
</script>

...
...

<select size="1" name="t_im" onchange="if(CheckIcon1(this))Form('index.htm', '');">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a id="icon1" href="javascript:Form()" onclick="return false">
[img]puppa.gif[/img]</a>

**orcim** · 28-08-2008, 12:05

grazie per la disponibilità.

per le condizioni 1 e 2 è tutto OK, ma per queste non riesco a far funzionare lo script:

3) Se il valore selezionato nella select name="c_fu" è NULLO ( "" ) oppure è "SI" dovrei disabilitare la icon_2.gif
4) Se il valore selezionato nella select name="c_fu" è "NO" dovrei abilitare la icon_2.gif

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript">

function CheckIcon1(ss){
	var ok=false
	if(ss.options[ss.selectedIndex].value==''){
		document.getElementById('icon1').onclick=Function('return false')
		document.getElementById('img_icon1').src='/mac/images/elimina_icon.gif'
	}
	else{
		document.getElementById('icon1').onclick=Function('return true')
		document.getElementById('img_icon1').src='/mac/images/modifica_icon.gif'
		ok=true
	}
	return ok
}


function Form(theUrl, percSize) 

{

var width = 400; 
var height = 200; 
var left = Math.floor((screen.width-width)/2); 
var top = Math.floor((screen.height-height)/2); 

  window.open(theUrl,'popup','width='+width+',height='+height+',top='+top+',left='+left);
  
}

</script>

</head>

<body>

<form action="form.asp" method="post" onsubmit="return(validateForm(this));">
 
<select size="1" name="t_im" onchange="if(CheckIcon1(this))Form('test.htm', '');">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a id="icon1" href="javascript:Form('test.htm')" onclick="return false">
[img]elimina_icon.gif[/img]</a>
            
<select size="1" name="c_fu" onchange="CheckIcon1(this);">
<option value="">Select value</option>
<option value="SI">SI</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a id="icon1" href="javascript:Form('test.htm')" onclick="return false">
[img]elimina_icon.gif[/img]</a>
            
</form>

</body>

</html>

**willybit** · 28-08-2008, 12:13

beh... devi mettere id diversi e fare un'altra funzione

codice:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript">

function CheckIcon1(ss){
	var ok=false
	if(ss.options[ss.selectedIndex].value==''){
		document.getElementById('icon1').onclick=Function('return false')
		document.getElementById('img_icon1').src='/mac/images/elimina_icon.gif'
	}
	else{
		document.getElementById('icon1').onclick=Function('return true')
		document.getElementById('img_icon1').src='/mac/images/modifica_icon.gif'
		ok=true
	}
	return ok
}

function CheckIcon2(ss){
	var ok=false
	if(ss.options[ss.selectedIndex].value=='NO'){
		document.getElementById('icon2').onclick=Function('return true')
		document.getElementById('img_icon2').src='/mac/images/modifica_icon.gif'
		ok=true
	}
	else{
		document.getElementById('icon2').onclick=Function('return false')
		document.getElementById('img_icon2').src='/mac/images/elimina_icon.gif'
	}
	return ok
}


function Form(theUrl, percSize) 

{

var width = 400; 
var height = 200; 
var left = Math.floor((screen.width-width)/2); 
var top = Math.floor((screen.height-height)/2); 

  window.open(theUrl,'popup','width='+width+',height='+height+',top='+top+',left='+left);
  
}

</script>

</head>

<body>

<form action="form.asp" method="post" onsubmit="return(validateForm(this));">
 
<select size="1" name="t_im" onchange="if(CheckIcon1(this))Form('test.htm', '');">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a id="icon1" href="javascript:Form('test.htm')" onclick="return false">
[img]elimina_icon.gif[/img]</a>
            
<select size="1" name="c_fu" onchange="CheckIcon2(this);">
<option value="">Select value</option>
<option value="SI">SI</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a id="icon2" href="javascript:Form('test.htm')" onclick="return false">
[img]elimina_icon.gif[/img]</a>
            
</form>

</body>

</html>

**orcim** · 28-08-2008, 13:34

mille volte grazie, quasi ci siamo...

dico quasi perchè ho inserito questa condizione in questa parte di codice :

codice:

<select size="1" name="c_fu" onchange="var cc = this.options[this.selectedIndex].value; if(cc === 'NO')Form('test.htm', '')">
<option value="">Select value</option>
<option value="SI">SI</option>
<option value="NO">NO</option>
</select>

e non sono come abbinare la chiamata alla funzione onchange="CheckIcon2(this);"

**willybit** · 28-08-2008, 13:45

codice:

onchange="CheckIcon2(this){Form('test.htm', '')}"

Discussione: Attivare pulsante secondo condizione

Strumenti discussione

Ricerca discussione

Visualizza

Attivare pulsante secondo condizione

Permessi di invio