WN - Visa en extra textbox, nödvändigt att lägga den i en separat div?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Visa en extra textbox, nödvändigt att lägga den i en separat div? (https://www.wn.se/forum/showthread.php?t=1044085)

Visa en extra textbox, nödvändigt att lägga den i en separat div?

Hej!

Låt oss säga att jag har följande väldigt simpla formulär:

PHP-kod:


		
			
<form id="form" name="form" method="post" action="">

            <fieldset style="width: 450px;">

            <legend>KONTAKT INFORMATION</legend>

            <label for="fnamn">Förnamn:</label> <br />

            <input type="text" name="fnamn" id="fnamn" /> <br />

            <label for="enamn">Efternamn:</label> <br />

            <input type="text" name="enamn" id="enamn" /> <br />

            <label for="epost">E-postadress:</label> <br />

            <input type="text" name="epost" id="epost" /><br />

            <input type="checkbox" name="favoritarstid" id="var" value="var"/>

            <label for="var">Extra information</label><br />

            <textarea name="meddelande" id="meddelande" cols="45" rows="5"></textarea> <br />

            <input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

            </fieldset>

        </form>

Med namn, efternamn och epost.
Jag har även en checkbox för extra information och en textruta där man kan fylla i sin extra information. Nu vill jag endast visa denna textruta när användaren har kryssat i checkboxen för extra information.

Är det då verkligen nödvändigt att att lägga textrutan för extra information i en separat div som man sedan tooglar fram via jquery eller finns det något bättre sätt man ska lösa detta på?

Är nämligen ny med jQuery och tyckte att det kändes lite onödigt att behöva skapa en ny div för detta men det kanske man är tvingad att göra?

Hjälp mig annars med hur man kan lösa det på något annat sätt. Med annat sätt menar jag naturligtvis simplare sätt.

För att jquery ska hitta den text som du vill ska framträda måste den ha något att leta efter, till exempel ett id, eller en class.

Citat:

Ursprungligen postat av mojitoo (Inlägg 20371774)

Hjälp mig annars med hur man kan lösa det på något annat sätt. Med annat sätt menar jag naturligtvis simplare sätt.

I checkboxen:

Kod:

onclick="this.nextSibling.style.display='block'"

är betydligt enklare än att dra igång hela jQuery för detta om du bara vill visa och gömma den (gömma den görs som bekant med display: none).

Och naturligtvis bör du inte stoppa in onödiga div-element.

Citat:

Ursprungligen postat av martine (Inlägg 20371929)

I checkboxen:

Kod:

onclick="this.nextSibling.style.display='block'"

Nu vet jag inte exakt vad jag kan ha missat eller missförstått då ingenting händer när jag klickar i checkboxen.

Min textbox döljs även bara men tar ändå upp samma plats, fult med ett stort vitt mellanrum mellan checkboxen och spara knappen.

PHP-kod:


		
			
<form id="form" name="form" method="post" action="">

            <fieldset style="width: 450px;">

            <legend>KONTAKT INFORMATION</legend>

            <label for="fnamn">Förnamn:</label> <br />

            <input type="text" name="fnamn" id="fnamn" /> <br />

            <label for="enamn">Efternamn:</label> <br />

            <input type="text" name="enamn" id="enamn" /> <br />

            <label for="epost">E-postadress:</label> <br />

            <input type="text" name="epost" id="epost" /><br />

            <input type="checkbox" name="extra_info" id="var" value="var" onclick="this.nextSibling.style.display='block'"/>

            <label for="var">Extra information</label><br />

            <textarea name="meddelande" id="meddelande" cols="45" rows="5" style="display:none"></textarea> <br />

            <input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

            </fieldset>

        </form>

Låt oss även säga att jag skulle vilja visa två labels och två textboxar som i detta exempel hur gör jag då:

PHP-kod:


		
			
<form id="form" name="form" method="post" action="">

            <fieldset style="width: 450px;">

            <legend>KONTAKT INFORMATION</legend>

            <input type="checkbox" name="extra_info" id="var" value="var"/>

            <label for="var">Lägg till för och efternamn</label><br />

            <label for="fnamn" style="display:none">Förnamn:</label> <br />

            <input type="text" style="display:none" name="fnamn" id="fnamn" /> <br />

            <label for="enamn" style="display:none">Efternamn:</label> <br />

            <input type="text" style="display:none" name="enamn" id="enamn" /> <br />

            <input type="submit" name="skicka" id="skicka" value="Skicka meddelandet" />

            </fieldset>

        </form>

Ni vore jättegulliga om ni hjälpte mig med detta.

Citat:

Ursprungligen postat av mojitoo (Inlägg 20372148)

Nu vet jag inte exakt vad jag kan ha missat eller missförstått då ingenting händer när jag klickar i checkboxen.

...

Ni vore jättegulliga om ni hjälpte mig med detta.

Med risk för att bli jättegullig... Lägg alltihop som du vill dölja i ett div-element, sätt style="display:none" och id="undanstoppat". I checkbox-elementet sätter du onclick till "if(this.checked){document.getElementById('undanst oppat').style.display='block'}else{document.getEle mentById('undanstoppat').style.display='none'}". Det borde göra det du vill.

Mitt inlägg var bara en fingervisning om hur man skulle kunna börja. Vill du ha hjälp med liknande problem så rekommenderar jag dig att lära dig JavaScript och css. Utan det kommer du inte mycket längre.