hide show elemento

**phpneo** · 07-02-2013, 18:25

ciao a tutti ho questo codice:

codice:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(".group1").hide();
});
$(document).ready(function(){
$("#group2").bind("click", function() { 							$(".group1").hide();}); 
});
$(document).ready(function(){
$("#group3").bind("click", function() {
$(".group1").hide();});
});
$(document).ready(function(){
$("#group4").bind("click", function() { 							$(".group1").hide();});
});
$(document).ready(function(){
$("#group5").bind("click", function() { 							$(".group1").hide();});
});
$(document).ready(function(){
$("#group1").bind("click", function() {$(".group1").show("normal");});
});
//]]> 
</script>

codice:

<OPTION VALUE="Bonifico Bancario" id="group5">Bonifico Bancario<OPTION VALUE="Assegno Circolare" id="group4">Assegno Circolare<OPTION VALUE="Assegno di Libretto" id="group3">Assegno di Libretto<OPTION VALUE="Contanti" id="group2">Contanti<OPTION VALUE="Altro" SELECTED id="group1">Altro</select>
<input class="group1" name="tipopagamento" type="text" maxlength="35" value="'.$row['tipo_pagamento'].'"/>

quando carico la pagina il form si carica sulla voce selezionata "Altro" solo che non fa apparire l'altro campo input, devo cliccare per farlo apparire, vorrei che al caricamento della pagina si rendesse visibile

**sgogghy** · 08-02-2013, 00:12

Secondo me il problema è negli errori di sintassi.

codice:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(".group1").hide();

$("#group2").bind("click", function() { 							
$(".group1").hide();
}); 

$("#group3").bind("click", function() {
$(".group1").hide();
});

$("#group4").bind("click", function() { 							
$(".group1").hide();
});

$("#group5").bind("click", function() { 							
$(".group1").hide();
});

$("#group1").bind("click", function() {
$(".group1").show("normal");
});
});
//]]> 
</script>
<select>
<OPTION VALUE="Bonifico Bancario" id="group5">Bonifico Bancario</option>
<OPTION VALUE="Assegno Circolare" id="group4">Assegno Circolare</option>
<OPTION VALUE="Assegno di Libretto" id="group3">Assegno di Libretto</option>
<OPTION VALUE="Contanti" id="group2">Contanti</option>
<OPTION VALUE="Altro" SELECTED id="group1">Altro</option>
</select>
<input class="group1" name="tipopagamento" type="text" maxlength="35" value="'.$row['tipo_pagamento'].'"/>

Prova così.

**KillerWorm** · 08-02-2013, 00:20

Ciao,
premetto che quel javascript scritto in quel modo lo trovo veramente ridondante, per non dire orripilante. La funzione ready ripetuta così non ha molto senso e sicuramente il bind click per ogni option può essere riassunto con un unico change.

Ad ogni modo il campo di testo viene nascosto al caricamento della pagina semplicemente perché glielo dici nella prima riga:

codice:

$(".group1").hide();

Basterebbe eliminare questa riga per risolvere ma personalmente riscriverei il tutto cercando di ottimizzarlo.

Un esempio pratico:

codice:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#tuoSelect").change(function(event) {
        if ($(this).find("option:selected").attr("id") == "group1") $(".group1").show("normal");
        else $(".group1").hide("normal");
      });
    });
  </script>
</head>
<body>
  <select id="tuoSelect">
    <option value="Bonifico Bancario" id="group5">Bonifico Bancario
    <option value="Assegno Circolare" id="group4">Assegno Circolare
    <option value="Assegno di Libretto" id="group3">Assegno di Libretto
    <option value="Contanti" id="group2">Contanti
    <option value="Altro" selected id="group1">Altro
  </select>
  <input class="group1" name="tipopagamento" type="text" maxlength="35" value="prova"/>
</body>
</html>

**phpneo** · 08-02-2013, 12:39

@sgogghy
grazie della risposta, il codice anche essendo più pulito da lo stesso risultato

@KillerWorm
grazie della risposta,
ho provato a eliminare l'hide iniziale e come risultato il campo input è sempre visibile all'inizio e poi se clicco su gli "contanti, bonifico, assegni" si nasconde

anche provando il codice che mi hai postato si ha lo stesso effetto
-------------------------------------

cmq mi spiego meglio nel funzionamento per essere più chiaro

uno script php genera il codice del campo select e in base se trova bonifico contanti ecc stampa a schermo il campo select il campo input e lo script javascript

casistica al caricamento della pagina:
1) il campo nel select corrispondente a "Bonifico" oppure "assegno" oppure "contante" è selezionato, allora il campo input è nascosto
2) il campo nel select corrispondente a "Altro"(e solo lui) è selezionato allora il campo input è visibile
casistica dell'utente dopo il caricamento della pagina:
3)se il campo input è nascosto e seleziono "Altro" deve essere reso visibile
4)se il campo input è visibile(perche è selezionato "Altro") e cambio in "Bonifico" "Assegno" "Contanti" il campo input deve essere nascosto

spero di essere stato chiaro

**sgogghy** · 08-02-2013, 13:13

Perdonami ma quando ho provato il tuo script non avevo inserito la libreria jquery (infatti non l'avevo nemmeno provato

)

Cmq, adesso è molto chiaro quello ti serve

Io lo farei così

codice:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('input.group1').hide();
});
function altro(value){
	if(value == 'Altro'){
		$('input.group1').fadeIn(300);
	}else{
		$('input.group1').fadeOut(300);
	}
}
//]]> 
</script>
<select onchange="altro(this.value)">
<OPTION VALUE="Bonifico Bancario" id="group5">Bonifico Bancario</option>
<OPTION VALUE="Assegno Circolare" id="group4">Assegno Circolare</option>
<OPTION VALUE="Assegno di Libretto" id="group3">Assegno di Libretto</option>
<OPTION VALUE="Contanti" id="group2">Contanti</option>
<OPTION VALUE="Altro" SELECTED id="group1">Altro</option>
</select>
<input class="group1" name="tipopagamento" type="text" maxlength="35" value="'.$row['tipo_pagamento'].'"/>

**KillerWorm** · 08-02-2013, 13:21

spero di essere stato chiaro

Ora è più chiaro... credo.

Per ottenere ciò che hai indicato ora, dovresti verificare, subito dopo aver caricato la pagina, quale voce del select sia selezionata e di conseguenza mostrare/nascondere il campo input.
Anche in questo caso puoi fare in diversi modi.

Per renderla semplice potresti forzare il richiamo dell'evento "change" così da utilizzare la stessa funzione che ti va a nascondere o mostrare il campo input appena si carica la pagina.
In questo caso è meglio lasciare nascosto il campo inizialmente.

Ecco l'esempio modificato:

codice:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".group1").hide();
      $("#tuoSelect").change(function() {
        if ($(this).find("option:selected").attr("id") == "group1") $(".group1").show("normal");
        else $(".group1").hide("normal");
      }).change();
    });
  </script>
</head>
<body>
  <select id="tuoSelect">
    <option value="Bonifico Bancario" id="group5">Bonifico Bancario
    <option value="Assegno Circolare" id="group4">Assegno Circolare
    <option value="Assegno di Libretto" id="group3">Assegno di Libretto
    <option value="Contanti" id="group2">Contanti
    <option value="Altro" selected id="group1">Altro
  </select>
  <input class="group1" name="tipopagamento" type="text" maxlength="35" value="prova"/>
</body>
</html>

Se il select iniziale è attribuito ad una voce diversa da #group1 noterai che il campo input resterà nascosto.

**phpneo** · 08-02-2013, 15:54

@sgogghy
grazie della ulteriore risposta, il codice postato non mi fa funzionare lo show dell'input se "Altro" è selected, cmq grazie ancora lo stesso

@KillerWorm
grazie della risposta lo script funziona perfettamente come volevo io,

-------------------------

ogni tanto mi riprometto di imparare meglio il jquery/javascript ma mi sembra così ostico rispetto al php, forse ormai parto da un pregiudizio nidificato nella testa, cmq grazie ancora a tutti e due

Discussione: hide show elemento

Strumenti discussione

Ricerca discussione

Visualizza

hide show elemento

Permessi di invio