Modifica evento select dinamica

[neida]

Vorrei chiedervi come si potrebbe modificare questo script per aggiungere un'ulteriore comportamento, seleziona option dalla select/disabilita pulsante, a quello già presente. Ora vi posto tutto il codice sperando di rendere la cosa più semplice.

Queste istruzioni sono nell'head del documento

function ShowHide(id1,id2,id_se1) {
  if(document.getElementById) {
    el1 = document.getElementById(id1);
    el2 = document.getElementById(id2);
    se1 = document.getElementById(id_se1);
      if(el1.style.display=="none") {
        el1.style.display = "block";
        el2.style.display = "none";
        se1.disabled = false;
      }
	  else {
        el1.style.display="none";
        el2.style.display="block";
        se1.disabled = true;
      }
   }
}

e quest'altra parte nel body della pagina

<select name="autore" id="autore">
<option value="">Seleziona Autore</option>
<option value="1">Autore1</option>
<option value="2">Autore2</option>
<option value="3">Autore3</option>
</select>

<div id="show1">
<button onclick="ShowHide('show1','newfields1','autore');return(false)">Apri scheda</button>
</div>

<div id="newfields1" style="display: none">
<button onclick="ShowHide('show1','newfields1','autore');return(false)">Chiudi scheda</button>
Nome: <input type="text" name="nome_autore" />
Cognome: <input type="text" name="cognome_autore" />
</div>

Bene, questo è tutto il codice necessario per il corretto funzionamento dello script che, in sintesi, si occupa di disabilitare la select alla prima pressione del pulsante e riabilitarla al secondo click.

Adesso vorrei chiedervi se fosse possibile modificare lo script per far si che quando viene selezionato un valore dalla select sia il pulsante ad essere disabilitato. In pratica lo stesso funzionamento di prima, click sul pulsante/disabilita select, ma questa volta all'inverso: seleziona da select/disabilita pulsante.

Grazie

[neida]

:master: ...non è possibile fare questa modifica? o forse non sono riuscito a spiegare bene quello che vorrei poter fare? Oppure la risposta è talmente semplice, ma talmente semplice da creare un certo imbarazzo nel dare una risposta...

[luca200]

Non ha senso mettere le mani sulla funzione showHide(), la incasineresti e basta.
Fai un'altra funzione che si limita a disabilitare un elemento e richiamala con l'onchange sulla select.

[neida]

Grazie Luca! seguirò il tuo consiglio... anche se, a dire il vero, mi sarebbe piaciuto molto poter modificare la funzione esistente e usare solo quella. Ma, se devo complicarmi la vita per una modifica di cui si può far a meno, allora preferisco seguire la strada che mi hai indicato. Peccato solo che con js (ma non solo ) sono una pippa! Vedrò un po' di arrangiarmi.

[luca200]

<select name="autore" id="autore" onchange="disableElement('but')">

..............

<button id="but" onclick="ShowHide('show1','newfields1','autore');return(false)">Apri scheda</button>

...............

function disableElement(id){
  if(document.getElementById) {
    el1 = document.getElementById(id);
    el1.disabled = true;
   }
}

[neida]

Non so come ringraziarti! Stavo iniziando a dare i numeri perchè, anche cercando in giro, non riuscivo a venirne fuori. Sei un grande!

Però c'è solo un piccolo problema, quando seleziono una voce dalla select giustamente con la funzione che mi hai dato si disabilita il pulsante con id "but", ma per abilitarlo di nuovo senza dover fare il refresh della pagina? Non dirmi niente, so di essere una frana totale, ma con 'sto cavolo di js non mi ci raccapezzo per niente!

[pietro09]

:master: ho voluto provare anch'io perchè mi pare in fondo, interessante, seguendo però un aproccio diverso.

Ossia, il pulsante e la select lanciano tutte e due la procedura ShowHide.

Questa procedura, per sapere cosa fare, deve conoscere chi l'ha lanciata: o il pulsante o la select, nel nostro caso, e si comporta in conseguenza.

Perciò, la procedura viene lanciata aggiungendo il parametro event, come da esempio:

<button onclick="ShowHide(event, 'show1',********

e,
<select name="autore" id="autore" onchange="ShowHide(event, ****);">

la procedura, fa:

function ShowHide(e,id1,id2,id_se1) 
{
	//accedo all'oggetto event
	if(!e) var e = window.event;	
	
	var target = (e.target)?e.target:e.srcElement;
    if(target.tagName.toUpperCase() == "BUTTON" )
    {
        if(document.getElementById) 
        {
            el1 = document.getElementById(id1);
            el2 = document.getElementById(id2);
            se1 = document.getElementById(id_se1);
            if(el1.style.display == "none") 
            {
                el1.style.display = "block";
                el2.style.display = "none";
                se1.disabled = false;
            }
            else 
            {
                el1.style.display = "none";
                el2.style.display = "block";
                se1.disabled = true;
            }
        }
    }
    else if(target.tagName.toUpperCase() == "SELECT" )
    {
        var valore_select = target.value;
        document.getElementById("show1").disabled = valore_select != "";
    }
    
}

vedi se può essere utile

[neida]

Ciao Pietro! guarda c'è mancato giusto un pelino e ti avrei fatto un mezzo busto di bronzo!! Il concetto credo di averlo afferrato ma, non volermene, non riesco ad applicare la tua soluzione praticamente.

Allora, uso la funzione ShowHide così come tu l'hai modificata e nei BUTTON la dichiaro con

<button onclick="ShowHide(event,'show1','newfields1','autore');return(false)">
APRI SCHEDA
</button>

va bene, si disabilita la select e mostra il div nascosto.

Ma nella select come devo indicare i parametri nel richiamare la funzione? Grazie infinite per l'aiuto

[pietro09]

questa è la pagina che ho usato come prova

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagina senza titolo</title>

    <script language="javascript" type="text/javascript">
// <!CDATA[

function ShowHide(e,id1,id2,id_se1) 
{
	//accedo all'oggetto event
	if(!e) var e = window.event;	
	
	var target = (e.target)?e.target:e.srcElement;
    if(target.tagName.toUpperCase() == "BUTTON" )
    {
        if(document.getElementById) 
        {
            el1 = document.getElementById(id1);
            el2 = document.getElementById(id2);
            se1 = document.getElementById(id_se1);
            if(el1.style.display == "none") 
            {
                el1.style.display = "block";
                el2.style.display = "none";
                se1.disabled = false;
            }
            else 
            {
                el1.style.display = "none";
                el2.style.display = "block";
                se1.disabled = true;
            }
        }
    }
    else if(target.tagName.toUpperCase() == "SELECT" )
    {
        var valore_select = target.value;
        document.getElementById("show1").disabled = valore_select != "";
    }
    
}

// ]]>
    </script>
</head>
<body>
    <select name="autore" id="autore" onchange="ShowHide(event);">
        <option value="">Seleziona Autore</option>
        <option value="1">Autore1</option>
        <option value="2">Autore2</option>
        <option value="3">Autore3</option>
    </select>
    <div id="show1">
        <button onclick="ShowHide(event,'show1','newfields1','autore');return(false)">Apri scheda</button>
    </div>
    <div id="newfields1" style="display: none">
        <button onclick="ShowHide(event, 'show1','newfields1','autore');return(false)">
            Chiudi scheda</button>
        Nome:
        <input type="text" name="nome_autore" />
        Cognome:
        <input type="text" name="cognome_autore" />
    </div>
</body>
</html>

Lo devi prendere come esempio da riadattare, se il caso

[neida]

Ti ringrazio ancora per la grande disponibilità dimostrata, ma, anche provando nuovamente il codice che hai proposto da esempio, non viene disabilitato il pulsante.

Funziona tutto come prima, se clicco una prima volta sul pulsante si disabilita la select e poi viene mostrato il div nascosto. Al secondo click si riabilita la select e viene nascosto il div. Ma quando seleziono una qualsiasi voce dalla select non accade nulla. Il pulsante rimane sempre attivo.

Non ho modificato nulla dal codice che hai postato, com'è possibile che a me non funzioni come dovrebbe? :master: