aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

Dropdown menu in Contactform

Het echte opmaakwerk, alles vragen over HTMLen, CSSen en Javascripten.

Dropdown menu in Contactform

Berichtdoor Stefan » 18 feb 2008 17:18

Hoi,

Ik had al een contactform alleen ik kom ergens niet uit. Ik wil een dropdown list maken waaruit mensen kunnen kiezen als onderwerp. Dit lukt wel
Code: Selecteer alles
<select size="1" name="dropdown">
<option>Bug</option>
<option>Vraag</option>
<option>Anders...</option> 
</select>

alleen nu is mijn vraag...

Hoe kan een extra textfield laten zien / enable maken als iemand de optie Anders.... kies

Heb nu effe
Code: Selecteer alles
<script type="text/javascript">
function getStatus(){
    s = document.form1.dropdown.selectedIndex;
    if (s == 0){
        document.form1.onderwerp.disabled = true;
    } else {
        document.form1.onderwerp.disabled = false;
    }
}
</script>
<form name="form1" method="post" action="">
<select size="1" name="dropdown" onClick="getStatus();">
<option selected="selected">Bug</option>
<option selected="selected">Vraag</option>
<option>Anders...</option>
</select>

<input id="subject" name="onderwerp" type="text" size="20" value="" class="field" />


maar ik krijg het niet werken. Weet iemand van jullie een oplossing, of een nieuw / beter script?

Groet Steef 8-)
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Dropdown menu in Contactform

Berichtdoor frizzy » 18 feb 2008 18:20

Code: Selecteer alles
<select>
<option onclick="getElementById('inputDiv').style.display = 'block';">V.B.</option>
</select>
<div id="inputDiv" style="display:none;">
 <input type="text" name="input" value="je andere divje" />
</div>

Bedoel je zoiets?
frizzy
wmpr
 
Berichten: 4261
Geregistreerd: 20 sep 2006 16:03
Woonplaats: Boskoop :D

Re: Dropdown menu in Contactform

Berichtdoor Stefan » 18 feb 2008 21:11

Ik bedoel dit: http://onlinesoldier.gethost.nl/index.p ... ct&lang=nl

Bij het dropdownmenu kan je kiezen uit Vraag, Bug of Anders... Daaronder zie je nog een keer een veld Onderwerp, deze moet verborgen / geblokkeerd zijn als je de dropdownmenu Vraag of Bug kiest. Als je Anders kiest moet deze zichtbaar / gedeblokkeerd zijn.

Groet Steef 8-)
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Dropdown menu in Contactform

Berichtdoor libia » 18 feb 2008 21:35

oftewel het script van frizzy ;)
Code: Selecteer alles
<select>
<option onclick="getElementById('inputDiv').style.display = 'none';">Vraag</option>
<option onclick="getelementById('inputDiv').style.display = 'none';">Bug</option>
<option onclick="getElementById('inputDiv').style.display = 'block';">Anders...</option>
</select>
<div id="inputDiv" style="display:none;">
<input type="text" name="input" value="je andere divje" />
</div>
Avatar gebruiker
libia
wmpr
 
Berichten: 4149
Geregistreerd: 23 okt 2005 14:14
Woonplaats: Alphe!!

Re: Dropdown menu in Contactform

Berichtdoor Stefan » 19 feb 2008 09:02

Ik heb het geprobeertd, jongens (tijdens Nederlands :razz: ) maar het is nog niet gelukt. Ik weet niet wat ik verkeerd doe. Het contact form staat nog steedsin een tabel maar dat moet nog veranderd worden. Ik heb exact het bovenstaande gekopieerd en in de CSS de opmaak van het vlak gegeven.

Kunnen jullie misschien een andere oplossing vinden?
http://onlinesoldier.gethost.nl/index.p ... ct&lang=nl

Groet Steef 8-)
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Dropdown menu in Contactform

Berichtdoor libia » 19 feb 2008 16:05

dit werkt wel ;)
Code: Selecteer alles
<html>
<head>
<script type="text/javascript">
var displayFieldId = 'onderwerpAnders'; //het id van het element dat moet worden verborgen en weergeven

function display()
{
   if(document.getElementById('subject').value != 'anders')
   {
      document.getElementById(displayFieldId).style.display = 'none';
   }
   else
   {
      document.getElementById(displayFieldId).style.display = 'block';
   }
}
</script>
<style type="text/css">
label {
   font-weight: bold;
   float: left;
   width: 100px;
   text-align: right;
   padding-right: 3px;
}
</style>
</head>
<body>
<form action="boe!" method="post">
<p>
<label for="subject">Onderwerp</label> <select name="subject" id="subject" onchange="display()">
                  <option value="vraag">Vraag</option>
                  <option value="bug">Bug</option>
                  <option value="anders">Anders...</option>
               </select>
<div id="onderwerpAnders" style="display: none;"><label for="subject2">Onderwerp</label> <input type="text" name="subject2" id="subject2" /></div>
</p>
</form>
</body>
</html>
Avatar gebruiker
libia
wmpr
 
Berichten: 4149
Geregistreerd: 23 okt 2005 14:14
Woonplaats: Alphe!!

Re: Dropdown menu in Contactform

Berichtdoor Stefan » 19 feb 2008 16:40

Het is nog niet helemaal goed qua opmaak maar....
HET WERKT! :D

Bedankt mensen! ;)

Groet Steef 8-)
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Dropdown menu in Contactform

Berichtdoor libia » 19 feb 2008 16:41

mooi ;)
het was trouwens ook gelijk een voorbeeld hoe je je formulier zonder tables kan doen :)
Avatar gebruiker
libia
wmpr
 
Berichten: 4149
Geregistreerd: 23 okt 2005 14:14
Woonplaats: Alphe!!

Re: Dropdown menu in Contactform

Berichtdoor Stefan » 19 feb 2008 17:18

Jah ik weet het. Ik werk met iemand samen die graag alles in tabellen doet: http://lordofthefrets.gethost.nl/
Het nieuwe regform heb ik wel in layers gemaakt: http://softlion.gethost.nl/index.php?p=register (dat wordt de centrale site)
Het kan ook met <ul> en <li> toch?

Groet Steef 8-)
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Dropdown menu in Contactform

Berichtdoor frizzy » 19 feb 2008 17:24

Mensen, een formulier moet volgens mij juist in een table? Of zit ik er nu naast :P
frizzy
wmpr
 
Berichten: 4261
Geregistreerd: 20 sep 2006 16:03
Woonplaats: Boskoop :D

Re: Dropdown menu in Contactform

Berichtdoor Stefan » 19 feb 2008 18:04

frizzy schreef:Mensen, een formulier moet volgens mij juist in een table? Of zit ik er nu naast :P
Niets moet alles mag ;) Je zit er niet naast, maar met <ul> en <li> maak je eigenlijk de tabel over. Je kan geen tabel gebruiken maar het mag wel natuurlijk.
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Dropdown menu in Contactform

Berichtdoor libia » 20 feb 2008 15:51

frizzy schreef:Mensen, een formulier moet volgens mij juist in een table? Of zit ik er nu naast :P

is maar net wat je leuk vindt :P

maar hij gaf aan dat hij het wou veranderen en de tables weg halen, dus ik denk nou dan doe ik het ff voor :)
Avatar gebruiker
libia
wmpr
 
Berichten: 4149
Geregistreerd: 23 okt 2005 14:14
Woonplaats: Alphe!!

Re: Dropdown menu in Contactform

Berichtdoor Stefan » 20 feb 2008 16:20

Opzich wist ik wel iets van layers, maar nog niets van <ul> en <li> maar nu toch wel.

Wat ik dus bijvoorbeeld heb gedaan is 2 layers aanmaken (<div id="form_menu"> (voor het menu aan de linkerkant) en <div id="form_field"> (waar je de velden kan invullen) en daarin heb ik de <ul> <li> gedaan

Bijvoorbeeld:
Code: Selecteer alles
<div id="form_menu">
<ul>
    <li>Naam</li>
    <li>Email</li>
    <li>Onderwerp</li>
    <li>Bericht</li>
</ul>
</div>


Code: Selecteer alles
<div id="form_field">
<ul>
    <li>field naam</li>
    <li>field Email</li>
    <li>field Onderwerp</li>
    <li>field Bericht</li>
</ul>
</div>


En dan de CSS erbij:
Code: Selecteer alles
div#form_menu {
   width: 130px;
   float: left;
   line-height: 18px;
}
div#form_menu ul { padding-left: 2px;}
div#form_menu li { height: 22px; list-style-type: none;}
div#form_field {
   width: 500px;
   float: right; 
}
div#form_field ul { }
div#form_field li { height: 22px; list-style-type: none;}
Opzoek naar een webdesigner? http://webtilize.net/
Avatar gebruiker
Stefan
wmpr
 
Berichten: 406
Geregistreerd: 27 dec 2007 14:08
Woonplaats: Ter Aar

Re: Dropdown menu in Contactform

Berichtdoor BetaDevil » 20 feb 2008 20:42

Ik denk dat als je lijsten gebruikt je beter dl, dt, dd-tags kan gebruiken.
http://www.w3.org/TR/html401/struct/lists.html#h-10.3
BetaDevil
wmpr
 
Berichten: 362
Geregistreerd: 27 nov 2007 18:51


Keer terug naar HTML, CSS, Javascript



cron