Tijden veranderen
value's krijgen met javascript
ik heb op internet al lopen zoeken maar niet echt gevonden wat ik wil.
ik wil zo iets
<html>
<body>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
maar dan moet het een textbox zijn en geen list, en als ik erop klik dat ik dan bijv uit een paar keuzes kan kiezen die dan als waarde in het textvakje komen te staan.
kan iemand me op weg helpen? en/of een leuk tut?
als ik met mijn muis op de textbox klik om er iets in te zetten ( waarde ) dan moet ik een popup box krijgen met OPTIONS die ik vooraf opgegeven heb bijv. net als in een select box hierboven en als je op een van die waardes klikt moet die waarde in de textbox komen te staan.
Met de onfocus event van de textbox maak je deze zichtbaar.
Via de onchange event van de select wijzig je de waarde van de textbox.
<code>
<input type='textbox' name="gerecht" id='textbox1' onfocus="show menuoption(this);" >
<div class="menuoption">
<select name="menuoption" onchange="">
<option>kreeft menu</option>
<option>biefstuk menu</option>
<option>tonijn menu</option>
<option>paardenbiefstuk menu</option>
<option>tapas menu</option>
<option>italiaans menu</option>
</select>
</div>
</code>
Toevoeging op 15/12/2011 13:55:49:
ik heb nu een script wat werkt.
en ik heb mijn textvakjes.
alleen is er een probleem..
de tekstvakjes worden dynamisch aangemaakt met de volgende code
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
});
en de tekst hieronder dat moet erbij komen te staan. maar als ik dit erbij zet wordt werkt het script hierboven niet door de enkele quotes; en wordt het niet als onFocus en als onBlur gezien maar als tekst volgens mij en dan laat hij niks van die optionsmenu zien maar zet ik dubbele quotes dan krijg ik het script erboven wel werkend maar geen onblur of onfocus te zien.
enig idee?
onfocus="setVisibility('menuoption ','inline')"; onBlur="setVisibility('menuoption','none')";
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ShowDiv(ID) {
document.getElementById("menuoption").style.display = "block"
}
function HideDiv(ID) {
document.getElementById("menuoption").style.display = "none"
}
function ChangeText() {
document.getElementById("textbox1").value = document.getElementById("menuselect").value;
HideDiv("menuoption");
}
//HTML
<input type="text" name="textbox1" id="textbox1"
onfocus="javascript:ShowDiv('menuoption')" />
<select name="menuselect" id="menuselect"
onchange="javascript:ChangeText()">
document.getElementById("menuoption").style.display = "block"
}
function HideDiv(ID) {
document.getElementById("menuoption").style.display = "none"
}
function ChangeText() {
document.getElementById("textbox1").value = document.getElementById("menuselect").value;
HideDiv("menuoption");
}
//HTML
<input type="text" name="textbox1" id="textbox1"
onfocus="javascript:ShowDiv('menuoption')" />
<select name="menuselect" id="menuselect"
onchange="javascript:ChangeText()">
Code (php)
1
2
3
2
3
function ShowDiv(ID) {
document.getElementById(ID).style.display = "block";
}
document.getElementById(ID).style.display = "block";
}
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
});
?>
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
});
?>
Reshadd, als je de textboxen met jquery maakt dan kan daarmee ook een functie aan de focus event binden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
// events
onfocus="setVisibility('menuoption ','inline')"; onBlur="setVisibility('menuoption','none')";
//werkend jQuery script
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
});
?>
// events
onfocus="setVisibility('menuoption ','inline')"; onBlur="setVisibility('menuoption','none')";
//werkend jQuery script
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
});
?>
Inline JS is niet netjes.
Met JQuery kan je gewoon het volgende doen.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$('#id').focus(function() {
});
$('#id').blur(function() {
});
});
$('#id').blur(function() {
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function bind_events(element){
$(element).focus(function() {
});
$(element).blur(function() {
});
}
//en in de functie waarin je het element aanmaakt:
var el = $("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
bind_events(el);
$(element).focus(function() {
});
$(element).blur(function() {
});
}
//en in de functie waarin je het element aanmaakt:
var el = $("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
bind_events(el);
Maar pas op: bij het handmatig binden van events, kan het voorkomen dat je een bepaald event twee maal bind aan hetzelfde element als je het niet goed doet. In dat geval zal de functie ook twee keer uitgevoerd worden, wat zeer vreemde effecten kan hebben!
Gewijzigd op 15/12/2011 15:34:45 door Erwin H
Je hebt gelijk, ik had het topic niet helemaal gelezen dus dat was mij heel even ontgaan.
Overigens, ipv die functie te gebruiken kan je na het aanmaken van de elementen de elementen ook middels de each functie doorlopen. Dan doe je het helemaal volgens JQuery.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$('').each(function(counter, element) {
$(element).focus(function() {
});
$(element).blur(function() {
});
});
$(element).focus(function() {
});
$(element).blur(function() {
});
});
Extra toevoeging: Wanneer je op meerdere events wil controleren kan je de (koppel) functie bind gebruiken.
Code (php)
1
2
3
2
3
$('select').on('focus', 'option', function() {
// Doe wat
});
// Doe wat
});
Meer informatie: http://blog.jquery.com/2011/11/03/jquery-1-7-released/
In jQuery 1.3.x en hoger kun je jQuery.fn.live() gebruiken en in jQuery 1.4.2 en hoger kun je jQuery.fn.delegate() gebruiken. Maar het beste en het snelst is jQuery.fn.on() in 1.7.x en hoger.
Met live kun je ook meerdere events tegelijkertijd toevoegen en je kunt data meesturen. Maar het grootste verschil is toch wel de manier van parent child in de events, dit is vooral handig met heel veel childs waar je 1 event op wilt.
Overigens kun je met raw JS ook gewoon outline events maken:
Code (php)
1
2
3
2
3
document.getElementById('box').onclick = function() {
console.log('You clicked!');
};
console.log('You clicked!');
};
Gewijzigd op 15/12/2011 15:41:40 door Wouter J
Zie het volgende voorbeeld, oftewel niet dus:
Code (php)
1
2
3
4
2
3
4
var count = 0;
$("body").on("click", "p", function(){
$(this).after("<p>Another paragraph! "+(++count)+"</p>");
});
$("body").on("click", "p", function(){
$(this).after("<p>Another paragraph! "+(++count)+"</p>");
});
DANK dus voor de tip!
Erwin H op 15/12/2011 15:32:46:
Dat gaat alleen niet werken als je element dynamisch wordt aangemaakt wat hier gebeurt. JQuery events worden namelijk gebonden aan een element bij het laden van een document. Op het moment dat een element later wordt aangemaakt, worden de events niet automatisch gebonden, dat moet je dus zelf doen. Dit kan bijvoorbeeld door de events in een functie te plaatsen en die functie dan aan te roepen op het moment dat je een element aanmaakt.
Maar pas op: bij het handmatig binden van events, kan het voorkomen dat je een bepaald event twee maal bind aan hetzelfde element als je het niet goed doet. In dat geval zal de functie ook twee keer uitgevoerd worden, wat zeer vreemde effecten kan hebben!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function bind_events(element){
$(element).focus(function() {
});
$(element).blur(function() {
});
}
//en in de functie waarin je het element aanmaakt:
var el = $("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
bind_events(el);
$(element).focus(function() {
});
$(element).blur(function() {
});
}
//en in de functie waarin je het element aanmaakt:
var el = $("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht"' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
bind_events(el);
Maar pas op: bij het handmatig binden van events, kan het voorkomen dat je een bepaald event twee maal bind aan hetzelfde element als je het niet goed doet. In dat geval zal de functie ook twee keer uitgevoerd worden, wat zeer vreemde effecten kan hebben!
hmm ik snap er niet veel van eerlijk gezegd, maar heb nu dus zoiets staan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht' + counter + '" id="textbox' + counter + '" ></div>');
counter++;
bind_events(element);
});
//
<script type="text/javascript">
function bind_events(element){
$(element).focus(function() {
setVisibility('menuoption','inline')
});
$(element).blur(function() {
setVisibility('menuoption','none')
});
}
</script>
// en hieronder het scriptje van de zichtbaar/onzichtbaar maken zelf
<script type="text/javascript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
counter++;
bind_events(element);
});
//
<script type="text/javascript">
function bind_events(element){
$(element).focus(function() {
setVisibility('menuoption','inline')
});
$(element).blur(function() {
setVisibility('menuoption','none')
});
}
</script>
// en hieronder het scriptje van de zichtbaar/onzichtbaar maken zelf
<script type="text/javascript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
wat doe ik nu fout?
Gewijzigd op 16/12/2011 11:06:37 door Reshad F
Code (php)
1
2
3
4
2
3
4
$("#TextBoxesGroup").append('<div id="TextBoxDiv'+counter+'"><label>Persoon #'+ counter + ' : </label>' + '<input type="text" name="gerecht' + counter + '" id="textbox' + counter + '" ></div>');
bind_events("#TextBoxDiv"+counter);
counter++;
});
bind_events("#TextBoxDiv"+counter);
counter++;
});