jquery bestimmte Formularelemente ausblenden, bis ein bestimmtes Textfeld ausgefüllt wurde?

Question

Ich habe eine lange Anmeldeform und möchte einige Felder ausblenden und nur anzeigen, wenn ein bestimmtes Eingabefeld mit Text gefüllt ist, wenn der Benutzer etwas Text in dieses Feld eingibt, werden die anderen Formularfelder angezeigt.

Ich habe bei verstecken und zeigen divs sah aber einige Mühe, Formularelemente verstecken und zeigen sie auf einen bestimmten Auslöser haben (eine Form mit Text bevöl)

jemand kann mir zeigen in die richtige Richtung, wie zu implementieren solche Funktion in Abfrage? Danke in Advance!

Answer 1

Da spezifische Problemdetails nicht angegeben wurden, habe ich ein einfaches Beispiel zusammengestellt, das Ihnen hoffentlich hilft, Ihr Problem zu lösen.

You can see the live demo here.

HTML

<div id="field1wrapper" style="visibility: hidden;"> 
    <label for="field1">Field 1:</label> 
    <input type="text" id="field1" /><span>&lt;-- write on me</span> 
</div> 
<div id="field2wrapper"> 
    <label for="field2">Field 2:</label> 
    <input type="text" id="field2" /> 
</div>​ 

JavaScript

$("#field1").keyup(function() 
{ 
    if($("#field1").val() != "") 
    { 
     $("#field2wrapper").css("visibility", "visible"); 
    } 
    else 
    { 
     $("#field2wrapper").css("visibility", "hidden"); 
    } 
});​ 

Answer 2

Verwenden Sie den Ereignishandler JQuery change()?

http://api.jquery.com/change/

ist es Beispiele dafür, wie es zu verwenden, um Ereignisse auf der Seite auslösen.

Answer 3

You could do something like this:

HTML:

<label for="txt1">Field 1</label> 
<input type="text" id="txt1" /> 

<label class="secondary hidden" for="txt2">Field 2</label> 
<input class="secondary hidden" type="text" id="txt2" /> 

<label for="txt3">Field 3</label> 
<input type="text" id="txt3" /> 

<label class="secondary hidden" for="txt4">Field 4</label> 
<input class="secondary hidden" type="text" id="txt4" /> 

CSS:

input { display: block; margin-bottom: 10px; } 
.hidden { display: none; visibility: hidden; } 

jQuery:

var $txt1 = $("#txt1"), 
    $secondary = $(".secondary"); 

$txt1.keyup(function() { 
    $secondary.toggleClass("hidden", $(this).val() == ""); 
});​ 

Mit toggleClass ermöglicht es Ihnen t o Übergeben Sie einen booleschen Wert zum Hinzufügen oder Entfernen der Klasse. Und die Bindung an keyup ermöglicht es Ihnen, sofort zu verbergen oder zu zeigen, je nach dem Wert des Feldes vs warten onblur wie bei change.