[JQuery] funzione per attivare un dialog in base a valori radio button e select

**newbobotime** · 16-12-2014, 13:13

Ciao Raga urge aiutino

Scusate ma con JS (JQuery) sono un pò scarso

Ho un form ed ho bisogno di lanciare un dialog solo se l'utente valorizza sia una determinata voce di una select sia se clicca su un determinato radiobutton.

ho impostato il codice sotto riportato e sembra funzionare ma solo in parte, se la voce della select effettivamente non è null e viene selezionato un valore diverso dallo 0 e se successivamente clicco il radio button con valore = 0 parte il dialog, il problema è che parte comunque quando cambio radiobutton cliccando quello con valore =1

Mi aiutate per favore ?!

Thanks

codice:

$(".radio_button").val("").change(function(){                                       
     if($("input[type=radio][name=radio_button]:checked").val() == 0){
        if($("#id_select").attr('value') != 0 && $("#id_select").attr('value') != ""){   
          $('#dialog').dialog();
       };
    };
 });

.

**KillerWorm** · 16-12-2014, 15:13

Ciao, puoi postare la parte di codice html riguardante questo script?

**newbobotime** · 17-12-2014, 16:22

Ti posto i 2 elementi da controllare, una select e un gruppo con 2 radiobutton, tutto molto semplice.

Grazie mille

codice:

<form id="myform" name="form1" method="post" action="file.php">
      
      <label for="gruppi">Invia notifica @ a: </label>  
      <select name="gruppi[]" id="gruppi"  multiple="multiple"> 
        <option value="">Seleziona i Gruppi</option>
        <option value="1"> ALL (All Users) </option>
        <option value="8"> SUP</option>
        <option value="4"> SM</option>
        <option value="5"> HM</option>
        <option value="6"> DM</option>
        <option value="7"> OM</option>
        <option value="3"> AOM</option>
        <option value="2"> HOU</option>
        <option value="9"> NMU</option>      
      </select>

      
      <label for="visibile">Visibile</label>
      <input type="radio" id="visibile"    name="visibile" value="1" checked="checked"/> Si 
      <input type="radio" id="visibile"    name="visibile" value="0"/> No
      
      <button onclick="getParam(document.myform)"> Invia </button>
      
</form>

**KillerWorm** · 18-12-2014, 01:04

Bene, innanzitutto posso dirti che il tuo codice HTML presenta alcuni errori, assolutamente da correggere:

L'attributo id deve essere univoco. Non si può avere più di un elemento, all'interno della stessa pagina html, che abbia lo stesso id.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

Fonte: http://www.w3schools.com/tags/att_global_id.asp

In alternativa puoi usare l'attributo class, che sostanzialmente funziona come l'id ma può essere applicato indistintamente a più elementi.
L'elemento label non può essere associato a gruppi di elementi ma ogni elemento label può essere associato ad un solo ed unico elemento del form.

Each LABEL element is associated with exactly one form control

Fonte: http://www.w3.org/TR/html401/interac....html#h-17.9.1

Infatti, per una questione di usabilità, quando si clicca sul testo contenuto in un tag label è come se si agisse direttamente sul controllo a cui questo è associato. Per tale motivo, capisci bene, che un tag label può far riferimento ad un solo controllo.

Se intendi avere un'etichetta che raggruppi più elementi all'interno del tuo form, puoi usare i tag fieldset e legend.

Detto questo, non mi è ben chiaro quando dovrebbe apparire il dialog.
Posto un esempio in base a ciò che ho capito, vedi se va bene:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $(".visibile").change(function(){
          if (this.value == 0 && $("#gruppi").val() != 0){
            $('#dialog').dialog();
          }
        })
      })
    </script>
  </head>
  <body>
    <form id="myform" name="form1" method="post" action="file.php">
          
          <label for="gruppi">Invia notifica @ a: </label>  
          <select name="gruppi[]" id="gruppi"  multiple="multiple"> 
            <option value="">Seleziona i Gruppi</option>
            <option value="1"> ALL (All Users) </option>
            <option value="8"> SUP</option>
            <option value="4"> SM</option>
            <option value="5"> HM</option>
            <option value="6"> DM</option>
            <option value="7"> OM</option>
            <option value="3"> AOM</option>
            <option value="2"> HOU</option>
            <option value="9"> NMU</option>      
          </select>

          <fieldset>
            <legend>Visibile:</legend>
            <label><input type="radio" class="visibile" name="visibile" value="1" checked="checked"/> Si</label>
            <label><input type="radio" class="visibile" name="visibile" value="0"/> No</label>
          </fieldset>
          
          <button onclick="getParam(document.myform)"> Invia </button>
          
    </form>
  </body>
</html>

In questo caso il dialog viene richiamato solo quando si seleziona il radio NO (value=0) e sul select è presente una qualche selezione diversa dall'unico primo valore (value="").

**newbobotime** · 18-12-2014, 12:18

Perfetto ! Era proprio quello che cercavo.

Pero c'è ancora solo un problema; immagina i vari elementi del form, l'utente scende e li seleziona (e/o compila), quindi se seleziona una voce della select (#gruppi) che ha un valore diverso da zero ( != 0 ) e successivamente seleziona il radiobutton (.visibile) con valore uguale a zero (=0) attiva i dialog.

Adesso quello che mi serve è con gestione degli elementi inversa, ovvero, come devo fare nel caso in cui l'utente selezionasse per prima il radiobutton (.visibile) e successivamente la select (#gruppi) ?

Io molto semplicemente ho inserito una nuova funzione impostando l'effendo change nell'id della select, ma non va.

Puoi aiutarmi ?

codice:

 $(function(){
   $("#gruppi").change(function(){
     if (this.value == 0 && $("#gruppi").val() != 0){
        $('#dialog').dialog();
      }
    });
 });

**KillerWorm** · 18-12-2014, 12:55

Adesso quello che mi serve è con gestione degli elementi inversa, ovvero, come devo fare nel caso in cui l'utente selezionasse per prima il radiobutton (.visibile) e successivamente la select (#gruppi) ?

Era questo che non mi era chiaro.

Puoi fare una cosa del genere:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $(".visibile,#gruppi").change(function(){
          if ($(".visibile:checked").val() == 0 && $("#gruppi").val() != 0){
            $('#dialog').dialog();
          }
        })
      })
    </script>
  </head>
  <body>
    <form id="myform" name="form1" method="post" action="file.php">
          
          <label for="gruppi">Invia notifica @ a: </label>  
          <select name="gruppi[]" id="gruppi"  multiple="multiple"> 
            <option value="">Seleziona i Gruppi</option>
            <option value="1"> ALL (All Users) </option>
            <option value="8"> SUP</option>
            <option value="4"> SM</option>
            <option value="5"> HM</option>
            <option value="6"> DM</option>
            <option value="7"> OM</option>
            <option value="3"> AOM</option>
            <option value="2"> HOU</option>
            <option value="9"> NMU</option>      
          </select>

          <fieldset>
            <legend>Visibile:</legend>
            <label><input type="radio" class="visibile" name="visibile" value="1" checked="checked"/> Si</label>
            <label><input type="radio" class="visibile" name="visibile" value="0"/> No</label>
          </fieldset>
          
          <button onclick="getParam(document.myform)"> Invia </button>
          
    </form>
  </body>
</html>

**newbobotime** · 18-12-2014, 17:49

Thanks !!!

Discussione: [JQuery] funzione per attivare un dialog in base a valori radio button e select

Strumenti discussione

Ricerca discussione

Visualizza

[JQuery] funzione per attivare un dialog in base a valori radio button e select

Permessi di invio