De PHPhulp kroeg
Automatisch invullen tekstvelden
Kunnen jullie mij helpen aan wat links of scripts?
Het gaat om het volgende:
Ik heb een pagina waarop ik bedrijfsgegevens in tekstvelden (input) kan invullen. Dus naam, straat etc... NAW
In een Database heb ik al NAW gegevens van bedrijven staan.
Nu heb ik het zo gemaakt dat als ik in een tekstveld type er automatisch resultaten uit mijn database weergegeven worden. Maar nu wil ik dat als ik dan op een gevonden bedrijfsnaam klik, de naw gegevens komen te staan in de bijhorende input velden.
Wie helpt mij op weg?
Hiermee zal je de gegevens die je hebt gevonden hebt in de velden moeten plaatsen.
Is er geen andere methode?
De DOM manipuleren/wijzigen kan alleen gedaan worden met JavaScript.
Er zijn frameworks die allerlei handige elementen hebben om de zaak sneller en met minder code tot het gewenste resultaat is behaald.
Een aantal voorbeelden zijn;
- jquery
- mootools
- angularjs
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Maar zou het liever zelf maken in Javascript dan bv gebruik te maken van query ed.
Vandaar dat ik het zocht op google maar helaas niet kon vinden...
Daarin zit een select waarmee je een ander bedrijf kan selecteren.
Als je een ander bedrijf selecteerd wi je dat het hele formulier andere NAW krijgt?
Dat kan dan toch met een onchange() waarmee je de pagina ververst en dan de nieuwe gegevens gebruikt waarvan het id in de select zit.
http://jqueryui.com/autocomplete/
In het het 'select:'-event kan je dan aangeven dat de waarde wordt gebruikt als value van je textveld;
Code (php)
1
2
3
2
3
select: function(event,ui) {
$("#naw").val(ui.item.value);
}
$("#naw").val(ui.item.value);
}
jQuery is gewoon JavaScript dus alles wat jQuery kan kan ook met JavaScript.
Sander, uit je vraag begrijp ik dat de auto complete al gelukt is? Nu wil je dus nog dat je gegevens over een bedrijf in een bepaald element plaatst. In dat geval zou ik kijken naar de change or keyup event van een input veld. De eerste wordt uitgevoerd wanneer een text field veranderd wordt (en daarna unfocused wordt) en de tweede wordt uitgevoerd wanneer je iets hebt getypt (nadat je hebt getypt, want je key is al weer omhoog gekomen).
Vervolgens kun je dan met this.value de waarde van het input veld opvragen. Deze kun je dan gebruiken om het in een ander element te tonen. Het wordt dan iets als:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var dataBox = document.querySelector('#js-company-data');
var companyData = {
someCompany: { name: 'Some Company', address: 'John Doestraat 12, Eindhoven' },
// ...
};
document.querySelector('#js-company-field').addEventListener('change', function (e) {
if (!companyData[this.value]) {
return; // company niet gevonden, stop de functie. Hier kan een error getoond worden
}
var data = companyData[this.value];
dataBox.innerHTML = '<h1>' + data.name + '</h1>';
dataBox.innerHTML += '<p>Adres: ' + data.address + '</p>';
});
var companyData = {
someCompany: { name: 'Some Company', address: 'John Doestraat 12, Eindhoven' },
// ...
};
document.querySelector('#js-company-field').addEventListener('change', function (e) {
if (!companyData[this.value]) {
return; // company niet gevonden, stop de functie. Hier kan een error getoond worden
}
var data = companyData[this.value];
dataBox.innerHTML = '<h1>' + data.name + '</h1>';
dataBox.innerHTML += '<p>Adres: ' + data.address + '</p>';
});
Misschien is het in de ogen van sommige mensen behoorlijk overbodig, maar het bespaart wel een code.
Gewijzigd op 21/01/2015 16:58:36 door - Ariën -
Tevens had het hier niet veel bespaart:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var $dataBox = $('#js-company-data');
var companyData = {
someCompany: ...,
// ...
};
$('#js-company-field').on('change', function (e) {
if (!companyData[$(this).val()]) {
return;
}
var data = companyData[$(this).val()];
var html = '<h1>' + data.name + '</h1>';
html += '<p>Adres: ' + data.address + '</p>';
$dataBox.html(html);
});
var companyData = {
someCompany: ...,
// ...
};
$('#js-company-field').on('change', function (e) {
if (!companyData[$(this).val()]) {
return;
}
var data = companyData[$(this).val()];
var html = '<h1>' + data.name + '</h1>';
html += '<p>Adres: ' + data.address + '</p>';
$dataBox.html(html);
});
En dan zie je ook dat we (a) 2 onnodige extra functie calls hebben voor het opvragen van een property en (b) een extra variabele hebben moeten aanmaken.
Maar goed, we gaan een beetje off-topic. Ik hoop dat de TS de antwoorden er uit kan halen.
Ik ga eens even kijken wat ik met je antwoord kan. Ik laat nog wel wat horen.
Over het Jquery verhaal:
Ikzelf vind inderdaad ook dat voor een klein beetje script niet direct zoiets als jquery gebruikt hoeft te gaan worden. Vandaar dat ik ook op zoek was naar de JS.
Kijk als ik vele taken en zaken geregeld wil hebben met JS dan wordt jquery een natuurlijk een optie. Maar niet voor 1 stukje code.
Verder wilde ik ook juist JS en zelf programmeren om JS beter te gaan begrijpen. Stukje persoonlijke ontwikkeling. ;)
[/quote]Nu heb ik het zo gemaakt dat als ik in een tekstveld type er automatisch resultaten uit mijn database weergegeven worden.[/quote]
Ik ging er automatisch vanuit dat het om een AutoComplete zou gaan, en vaak wordt hier jQueryUI voor gebruikt.
In ieder geval mijn excuses voor het onnodige 'aanvallen' met jQuery ;-)
Jouw interpretatie was voor jou correct en leek een legitiem antwoord. Ik wilde wat anders. En dat heb ik daarna ook aangegeven.
Dus jouw reactie met jQuery was niet verkeerd. Was alleen niet wat ik wilde ;)
Ik heb verder niets tegen jQuery. Maar om mijn eigen kennis te vergroten wilde ik per se JS.
Toevoeging op 22/01/2015 16:49:55:
Ik loop nog een beetje te stoeien met je code.
Misschien nog even wat toelichting vanaf mijn zijde:
Ik heb een textveld. Zodra ik hier in typ wordt er dus gezocht in mijn Database. Alle resultaten worden dan als <li> onder het textveld opgebouwd. Zodra ik het resultaat (bedrijf) zie welke ik wil gebruiken klik ik op de <li>. Zodra ik op de <li> klik wil ik dus dat de andere textvelden gevuld worden...
Toevoeging op 22/01/2015 17:28:17:
Ik heb het werkend gekregen.
Ik zal ook ff toelichten hoe.
Zoals hierboven beschreven krijg ik bij het zoeken 1 of meerdere <li> te zien. Per <li> staat een onclick. Deze roept een functie aan en geeft alle NAW gegevens mee.
De functie ontvangt dus alle gegevens en die schrijft de value waarde van de input velden over. En dat werkt dus :D
Gewijzigd op 22/01/2015 17:29:02 door Sander Z