Extra tekstbox na invulling bepaalde waarde

Status
Niet open voor verdere reacties.
F

frans kooijman

Gebruiker
Lid geworden
22 apr 2008
Berichten
531
Hallo,

Waarschijnlijk heel simpel, maar ik kan het nergens terugvinden:

Een vraag over een HTML invulformulier:
Ik wil graag dat als er in een pull-down menu een bepaalde waarde geselecteerd wordt, dat er dan een extra tekstvakje verschijnt.
Bv.: Wordt de waarde "1" geselecteerd: geen nieuw tekstvak
Wordt de waarde "2" geselcteerd, dan verschijnt er "wel een nieuw tekstvak.

Een soort uitgeklapt formuliertje dus.
Hoe bouw in in HTML in?

Dank
Frans
 
Wat dacht je hiervan?
Het werkt alleen in IE. Het script staat eronder dus dat hoef ik je niet te zeggen
Gr. Kayle
 
Dat is Javascript :)

En ik raad je aan iets te nemen dat werkt in alle browsers, want het marktaandeel van IE is niet zo heel groot meer (50% ofzo?)
 
Frats zei:
Dat is Javascript :)

En ik raad je aan iets te nemen dat werkt in alle browsers, want het marktaandeel van IE is niet zo heel groot meer (50% ofzo?)
Klik om te vergroten...

Ik denk dat dit ook wel zowat het enige is wat je kunt gebruiken :D. aangezien html alleen voor de opmaak is, want waar dacht jij aan? :rolleyes:
 
Dank, dank, ik ben er bijna uit (hoop ik).

In de head heb ik dit gekopieerd:

<script type="text/javascript">
// _w : ID
// _h : 'h' (=hide(verbergen)), of 's' (=show(tonen))
function wisselen(_w,_h) {
if (document.all) {
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
} else {
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>

Maar de body begrijp ik nog niet helemaal.

Volgens de "cursus" moet ik dit kopiëren in de body

<!-- Invoegen van het script gebeurt door toevoegen van onClick: -->
<form>
Tonen <input name="r1" type="radio" checked value="" onClick="wisselen('deel1','s')">
Verbergen <input name="r1" type="radio" value="" onClick="wisselen('deel1','h')">
</form>

<!-- Het formuliergedeelte dat je wil tonen/verbergen plaats je tussen <span>-tags: -->
<span id="deel1" style="visibility:visible;position:relative;top:0;left:0">
<form>
Dit is een formuliergedeelte met als ID: deel1
</form>
</span>

Stel ik heb een tekstvak: "Wat is uw geslacht" met een pulldown "man" en "vrouw"
Hoe plaats ik dan de extra hidden vraag: "Wat is uw meisjesnaam" (uiteraard alleen tonen bij een vrouw?

Kan iemand me hier een HTML-voorbeeld van geven van deze 2 vragen?
 
Ik heb op mijn website een voorbeeld gezet. (hier)
De code ervan is:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<script type="text/javascript">
// _w : ID
// _h : 'h' (=hide(verbergen)), of 's' (=show(tonen))
function wisselen(_w,_h) {
if (document.all) { 
if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';");
} else { 
if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
}
}
</script>
</head>
<body>
<!-- Invoegen van het script gebeurt door toevoegen van onClick: -->
<form>
Welk geslacht bent u?<br />
<input name="geslacht" type="radio" value="jongen" onClick="wisselen('jongen','s');wisselen('meisje','h')" />Jongen 
<input name="geslacht" type="radio" value="meisje" onClick="wisselen('meisje','s');wisselen('jongen','h')" />	Meisje
<!-- Het formuliergedeelte dat je wil tonen/verbergen plaats je tussen <span>-tags: -->
    <br />
    <span id="jongen" style="visibility:hidden">
    Wat is uw jongensnaam? <input type="text" name="gname"  />
    </span><br />
    <span id="meisje" style="visibility:hidden">
    Wat is uw Meisjesnaam? <input type="text" name="gname"  />
    </span>
</body>
</html>
Maar wat Frats zij is waar, dit werkt niet in alle gevallen. Bijv. als mensen Mozilla FireFox gebruiken, zien ze een deel van het formulier niet. Maar heb er veel plezier mee. En wil je ook een linkje zetten naar het resultaat?
gr. Kayle
 
Waarom werk je dan ook niet gewoon met de ID's? Het is niet van deze tijd om nog een script te schrijven dat alleen in IE werkt...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Contact</title>
    <script type="text/javascript">
      // _w : ID
      // _h : 'h' (=hide(verbergen)), of 's' (=show(tonen))
      function wisselen( _w,_h ) {
        var disp = ( _h == 's' ) ? 'visible' : 'hidden';
        document.getElementById( _w ).style.visibility = disp;
      }
    </script>
  </head>
  <body>
    <!-- Invoegen van het script gebeurt door toevoegen van onClick: -->
    <form>
      Welk geslacht bent u?<br />
      <input name="geslacht" type="radio" value="jongen" onClick="wisselen('jongen','s');wisselen('meisje','h')" />Jongen 
      <input name="geslacht" type="radio" value="meisje" onClick="wisselen('meisje','s');wisselen('jongen','h')" />   Meisje
      <!-- Het formuliergedeelte dat je wil tonen/verbergen plaats je tussen <span>-tags: -->
      <br />
      <span id="jongen" style="visibility:hidden">
      Wat is uw jongensnaam? <input type="text" name="gname"  />
      </span><br />
      <span id="meisje" style="visibility:hidden">
      Wat is uw Meisjesnaam? <input type="text" name="gname"  />
      </span>
    </form>
  </body>
</html>

Overigens was je ook de sluitende form tag vergeten.

Trouwens, twee text-input elementen met de dezelfde naam is niet erg handig. Dan wordt waarschijnlijk alleen de laatste verstuurd.


EDIT:

Onderstaande script is eigenlijk nog net iets mooier, aangezien de tekstvelden dan op dezelfde plek verschijnen:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Contact</title>
    <script type="text/javascript">
      // _w : ID
      // _h : 'h' (=hide(verbergen)), of 's' (=show(tonen))
      function wisselen( _w,_h ) {
        var disp = ( _h == 's' ) ? 'inline' : 'none';
        document.getElementById( _w ).style.display = disp;
      }
    </script>
  </head>
  <body>
    <!-- Invoegen van het script gebeurt door toevoegen van onClick: -->
    <form>
      Welk geslacht bent u?<br />
      <input name="geslacht" type="radio" value="jongen" onClick="wisselen('jongen','s');wisselen('meisje','h')" />Jongen 
      <input name="geslacht" type="radio" value="meisje" onClick="wisselen('meisje','s');wisselen('jongen','h')" />   Meisje
      <!-- Het formuliergedeelte dat je wil tonen/verbergen plaats je tussen <span>-tags: -->
      <br />
      <span id="jongen" style="display: none">
      Wat is uw jongensnaam? <input type="text" name="gname"  />
      </span>
      <span id="meisje" style="display: none">
      Wat is uw meisjesnaam? <input type="text" name="gname"  />
      </span>
    </form>
  </body>
</html>
 
Laatst bewerkt:
ik had hem even snel gemaakt, aangezien ik niets van javascript weet heb ik dus gewoon het voorbeeld gekopiert en bewerkt. Maar ik ben er mee eens dat jou script mooier en beter is.
gr. Kayle
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan