Tijden veranderen
Automatisch formulier
Ben een beetje opzoek geweest maar het probleem is dat ik van het volgende de naam niet meer weet.
Je hebt een selectbox in een formulier, bijvoorbeeld:
Code (php)
1
2
3
4
2
3
4
<select name="achternaam_keuze">
<option>ik heb geen achternaam</option>
<option>ik heb een achternaam</option>
</select>
<option>ik heb geen achternaam</option>
<option>ik heb een achternaam</option>
</select>
Nu is het de bedoeling dat als ik geen achternaam heb ik gewoon door ga naar het volgende veld. Maar als ik wel een achternaam heb, dat er dan een textveld verschijnt bij de selectie. Een soort van automatisch formulier dus. Ik wil ermee voorkomen dat bezoekers een elle lang formulier krijgen en er onnodige velden tussen staan welke ze toch niet gaan gebruiken (volgens mij kan dit met javascript).
Ik was opzoek naar een tutorial, maar omdat ik de naam niet weet is dit een beetje lastig (als er uberhaupt een naam voor is). Weet iemand toevallig zo een tutorial?
Alvast bedankt.
javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript" language="javascript">
var nText = new Array()
nText[0] = '';
nText[1] = '';
nText[2] = '';
nText[3] = '';
nText[4] = '<label for="offerte_nummer" accesskey="O"><span class="required">*</span> Offerte nummer:</label><input name="offerte_nummer" type="text" id="offerte_nummer" size="30" value="" />';
function swapText1(isList){
txtIndex = isList.selectedIndex;
document.getElementById('textDiv1').innerHTML = nText[txtIndex];
}
</script>
var nText = new Array()
nText[0] = '';
nText[1] = '';
nText[2] = '';
nText[3] = '';
nText[4] = '<label for="offerte_nummer" accesskey="O"><span class="required">*</span> Offerte nummer:</label><input name="offerte_nummer" type="text" id="offerte_nummer" size="30" value="" />';
function swapText1(isList){
txtIndex = isList.selectedIndex;
document.getElementById('textDiv1').innerHTML = nText[txtIndex];
}
</script>
HTML:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<label for="pakket" accesskey="E"><span class="required">*</span> Pakket:</label>
<select name="pakket" id="pakket" onchange="swapText1(this)">
<option>maak een keuze</option>
<option>Pakket 1</option>
<option>Pakket 2</option>
<option>Pakket 3</option>
<option>Offerte (offerte nummer vereist)</option>
</select><div id="textDiv1"></div>
<select name="pakket" id="pakket" onchange="swapText1(this)">
<option>maak een keuze</option>
<option>Pakket 1</option>
<option>Pakket 2</option>
<option>Pakket 3</option>
<option>Offerte (offerte nummer vereist)</option>
</select><div id="textDiv1"></div>
Dit is een kort voorbeeldje van het complete formulier. Er komt vervolgens ook nog een selectie veld waarbij de gebruiker selecteerd of hij/zij 'al klant is', 'handelt als particulier' of 'handelt voor een bedrijf'. Daaraan gekoppeld verschijnt dan een formulier. En zo heb ik er nog een paar. Dat was min of meer wat ik bedoelde.
Maar goed, dit is niet W3C gevalideerd om dat er geen <label> of <input> in de javascript mag staan. Bestaat er een nettere manier/tutorial hiervoor die ook w3c valide is?
Code (php)
1
2
3
4
2
3
4
<select name="achternaam_keuze">
<option>ik heb geen achternaam</option>
<option>ik heb een achternaam</option>
</select>
<option>ik heb geen achternaam</option>
<option>ik heb een achternaam</option>
</select>
Ik ben een boek over jQuery aan het lezen en met jQuery kun je de dingen die jij wilt doen volgens mij wel realiseren. Je kunt bijvoorbeeld een blur of een change op een checkbox zetten en aan de hand van de waarde daarvan kun je een element toevoegen aan de DOM.
Toevoeging op 20/07/2011 18:02:09:
Er zijn misschien betere voorbeelden, maar hier in ieder geval iets:
http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/
Klik op DEMO en klik dan bij are you older than 21 op 'no'.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var select = document.getElementById('pakket'),
options = select.getElementsByTagName('option'),
textDiv = document.getElementById('textDiv1');
function checkSomething() {
textDiv.innerHTML = '';
if( this.options[select.selectedIndex].value == 'Offerte (offerte nummer vereist)' )
{
var label = document.createElement('label'),
input = document.createElement('input');
input.type = 'text';
input.name = 'offerte_nummer';
input.id = 'offerte_nummer';
input.size = 30;
label.htmlFor = 'offerte_nummer';
label.innerHTML = 'Offerte nummer';
textDiv.appendChild(label);
textDiv.appendChild(input);
}
}
options = select.getElementsByTagName('option'),
textDiv = document.getElementById('textDiv1');
function checkSomething() {
textDiv.innerHTML = '';
if( this.options[select.selectedIndex].value == 'Offerte (offerte nummer vereist)' )
{
var label = document.createElement('label'),
input = document.createElement('input');
input.type = 'text';
input.name = 'offerte_nummer';
input.id = 'offerte_nummer';
input.size = 30;
label.htmlFor = 'offerte_nummer';
label.innerHTML = 'Offerte nummer';
textDiv.appendChild(label);
textDiv.appendChild(input);
}
}
Je ziet hier dat je in JavaScript een element aanmaakt met document.createElement vervolgens kan je alle attributen instellen en dan zet je het als child van een ander element.
- ik ben al klant
- ik ben particulier
- ik ben handel voor een bedrijf.
Bij de selectie klant komen de velden:
- accountnaam
- klantnummer
Bij particulier komen de velden
- voornaam
- achternaam
- adres gegevens e.d.
Bij bedrijf komen de velden:
- bedrijfsnaam
- kvk-nummer
- voornaam
- achternaam
- adres gegevens etc.
Doormiddel van 1 selectie krijg je dus verschillende formulieren. Het bovenstaande (vorige post met uitzondering van me bumpje) gebruik ik nu en dat werkt, echter is het niet W3C valid omdat de tags <input> en <label> niet geaccepteerd worden. en daar zoek ik nu een oplossing voor. Maar is er een mooiere oplossing voor hoe ik het nu doe zoek ik daarvoor een tutorial of iets dergelijks, want die kon ik niet vinden.
Verder heb je hierboven dit gedaan:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
nText = [];
nText[0] = '';
nText[1] = '';
nText[2] = '';
nText[3] = '';
nText[4] = 'iets';
nText[0] = '';
nText[1] = '';
nText[2] = '';
nText[3] = '';
nText[4] = 'iets';
Een betere en handigere manier om dit op te schrijven is:
Code (php)
1
2
2
nText = [];
nText[4] = 'iets';
nText[4] = 'iets';
Verder is alles wat jQuery kan gewoon JavaScript, dus er is nooit iets jQuery het is wel eens dat jQuery makkelijker is dan het helemaal voluit schrijven van JavaScript.