Onload setzen divs sichtbar?

Ich habe eine Dropdown-Liste mit zwei Optionen "Ja" und "Nein" in Bezug auf die Frage "Gab es einen Zeugen für den Vorfall?" Wenn die Option "Ja" ausgewählt ist, erscheinen zwei weitere Fragen und der Optionswert wird dann in einem PHP-Wert gespeichert und wenn "Nein", dann sind die beiden Fragen ausgeblendet. Was geladen wird, wenn die Seite aktualisiert wird oder das Formular gesendet wird, aber wenn die Option auf 'Ja' gesetzt ist, dann werden zwei Fragen als versteckt geladen und können nur sichtbar sein, wenn das Dropdown auf 'Nein' und dann 'Ja' gesetzt ist nochmal. Was ich suche ist, wenn es auf 'Ja' gesetzt wurde, dann wird das Formular gesendet, wenn die Seite neu geladen wird, das Drop-Down wird immer auf 'Ja' gesetzt (was ich bereits funktioniere) und die beiden Fragen sind ebenfalls sichtbar.Onload setzen divs sichtbar?

Danke Jungs, Matt.

$(window).on("load", function() { 
 
    $(function() { 
 
    $('select[name="a18"]').change(function(e) { 
 
     $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
 
    }); 
 
    }); 
 
    var witness = '<?php echo $A18 ?>'; 
 
});

p { 
 
    margin: 0; 
 
    font-size: 16px; 
 
} 
 
textarea { 
 
    overflow: hidden; 
 
    resize: none; 
 
    border: none; 
 
    overflow: auto; 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    height: 40px; 
 
    width: 98%; 
 
    margin: 0; 
 
    background: #fff; 
 
} 
 
.dropDown { 
 
    width: 99.5%; 
 
    height: 46px; 
 
    margin: 0; 
 
    border: none; 
 
    background: none; 
 
} 
 
#irMain { 
 
    background-color: #ddebf7; 
 
    border-top: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
#irMainWitness { 
 
    background-color: #ddebf7; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
    display: none; 
 
} 
 
#irQMainWitness { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
    display: none; 
 
} 
 
#irBottomWitness { 
 
    background-color: #FFF; 
 
    border: 2px solid #000; 
 
    height: 50px; 
 
    margin: 0; 
 
    display: none; 
 
} 
 
#irQMainDD { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="irMain"> 
 
    <p>Was there a Witness to the Incident?:</p> 
 
</div> 
 

 
<div id="irQMainDD"> 
 
    <select name="a18" class="dropDown"> 
 
    <option value="No">No</option> 
 
    <option value="Yes">Yes</option> 
 
    </select> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Name of Witness:</p> 
 
</div> 
 

 
<div id="irQMainWitness"> 
 
    <textarea name="a19" cols="1" rows="2"> 
 
    </textarea> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Contact Number of Witness:</p> 
 
</div> 
 

 
<div id="irBottomWitness"> 
 
    <textarea name="a20" cols="1" rows="2"> 
 
    </textarea> 
 
</div>

UPDATE 1:

Die Variable 'Zeuge' auf den Optionswert auf Formular gesetzt einreichen. (Immer noch nicht in Betrieb)

Code:

<script> 
    $(window).on("load", function() { 
     $(function() { 
      $('select[name="a18"]').change(function(e) { 
      $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
      }); 
     }); 

     witness = "<?php echo $savedA18 ;?>"; 

     if (witness == "Yes"){ 
      $('select[name="a18"]').val("Yes"); 
      $('select[name="a18"]').triggerHandler("change"); 
     } 
    }); 
    </script>

Ausgang:

$(window).on("load", function() { 
     $(function() { 
      $('select[name="a18"]').change(function(e) { 
      $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
      }); 
     }); 

     witness = "Yes"; 

     if (witness == "Yes"){ 
      $('select[name="a18"]').val("Yes"); 
      $('select[name="a18"]').triggerHandler("change"); 
     } 
    });

Quelle

2017-01-24 Matt Hutch

Müssen Sie wirklich eine vollständige Seitenaktualisierung beim Senden von Formularen durchführen? Die meisten modernen Apps würden das Senden über XHR durchführen und den vorhandenen Seiteninhalt aktualisieren. –

$ ('select [Name = "a18"]'). Change (function() {/ * Deine Funktion * /}). Change(); – epascarello

Sie können das Änderungsereignis nach dem Code manuell auslösen, wo Sie den Wert auf Ja gesetzt haben.

$('select[name="a18"]').triggerHandler("change");

$(window).on("load", function() { 
 
    
 
    $('select[name="a18"]').val("Yes"); 
 
    $(function() { 
 
    $('select[name="a18"]').change(function(e) { 
 
     $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
 
    }); 
 
    }); 
 
    var witness = '<?php echo $A18 ?>'; 
 
    
 
    // set the value on onload 
 
    
 
    $('select[name="a18"]').val("Yes"); 
 
    
 
    $('select[name="a18"]').triggerHandler("change"); 
 
    
 
    
 
    
 
});

p { 
 
    margin: 0; 
 
    font-size: 16px; 
 
} 
 
textarea { 
 
    overflow: hidden; 
 
    resize: none; 
 
    border: none; 
 
    overflow: auto; 
 
    outline: none; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    height: 40px; 
 
    width: 98%; 
 
    margin: 0; 
 
    background: #fff; 
 
} 
 
.dropDown { 
 
    width: 99.5%; 
 
    height: 46px; 
 
    margin: 0; 
 
    border: none; 
 
    background: none; 
 
} 
 
#irMain { 
 
    background-color: #ddebf7; 
 
    border-top: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
#irMainWitness { 
 
    background-color: #ddebf7; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 30px; 
 
    display: none; 
 
} 
 
#irQMainWitness { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
    display: none; 
 
} 
 
#irBottomWitness { 
 
    background-color: #FFF; 
 
    border: 2px solid #000; 
 
    height: 50px; 
 
    margin: 0; 
 
    display: none; 
 
} 
 
#irQMainDD { 
 
    background-color: #FFF; 
 
    border-top: 2px solid #000; 
 
    border-bottom: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 0; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="irMain"> 
 
    <p>Was there a Witness to the Incident?:</p> 
 
</div> 
 

 
<div id="irQMainDD"> 
 
    <select name="a18" class="dropDown"> 
 
    <option value="No">No</option> 
 
    <option value="Yes">Yes</option> 
 
    </select> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Name of Witness:</p> 
 
</div> 
 

 
<div id="irQMainWitness"> 
 
    <textarea name="a19" cols="1" rows="2"> 
 
    </textarea> 
 
</div> 
 

 
<div id="irMainWitness"> 
 
    <p>Contact Number of Witness:</p> 
 
</div> 
 

 
<div id="irBottomWitness"> 
 
    <textarea name="a20" cols="1" rows="2"> 
 
    </textarea> 
 
</div>

Quelle

2017-01-24 17:11:35 Deep

Hallo zusammen, das funktioniert, wenn ich es einfach nicht will, immer ja nicht nur wenn die Option ja ausgewählt wurde, dachte ich vielleicht meinen gespeicherten Wert zu benutzen und richte es so ein aber ich bin mir nicht sicher ob ich das tat Es ist richtig, da es nicht so funktioniert wie ich es geplant habe, auch keine Fehlermeldungen. Irgendeine Idee? –

@MattHutch Wie wird der Wert beim Laden der Seite beim Laden und Aktualisieren der Seite auf Ja gesetzt? – Deep

Mit SQL-Datenbank bin ich mir sicher, dass dies nicht das Problem ist, wie ich ein Php-Echo zu überprüfen und es wurde perfekt ausgegeben. –

etwas wie unten Erstellen Sie eine Funktion Frage divs wechseln und es beim Laden der Seite aufrufen und es nennen, wenn Drop-Down-Änderungen.

$(document).ready(function(){ 
    var witness = '<?php echo $A18 ?>'; 
    $.toggleQuestions = function(drpDown){  
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle(drpDown.val() == 'Yes'); 
    }; 

    $('select[name="a18"]').on("change", function(e) { 
    $.toggleQuestions($(this)); 
    }); 

    $(window).on("load", function() { 
    $.toggleQuestions($('select[name="a18"]')); 
    }); 

});

Quelle

2017-01-24 17:21:38 nzayisenga

Sie können dies ändern:

$('select[name="a18"]').change(function(e) { 
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle($(this).val() == 'Yes'); 
});

dazu:

$('select[name="a18"]').change(function(e) { 
    $("#irMainWitness,#irQMainWitness,#irBottomWitness").toggle(); 
});

Da die erste nur versteckt und zeigt nicht diese zurück.

Quelle

2017-01-24 17:23:16

Onload setzen divs sichtbar?

Antwort

Verwandte Themen