2x het zelfde Javascript gebruiken
Hallo Allemaal,
Ik heb een probleem, ik heb een stukje javascript die ervoor zorgt dat een nieuwe regel in het formulier gevoerd word.
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
<script>
function addElement() {
var ni = document.getElementById('Form-Input');
var numi = document.getElementById('boorwerk_stuks');
var numi = document.getElementById('boorwerk_cm');
var numi = document.getElementById('boorwerk_wat');
var num = (document.getElementById('boorwerk_stuks').value -1)+ 2;
var num = (document.getElementById('boorwerk_cm').value -1)+ 2;
var num = (document.getElementById('boorwerk_wat').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'Form-Input'+num+'';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<th><input type="INT" name="boorwerk_stuks[]" id="boorwerk_stuks[]" placeholder="10" class="form-control_java"></th><th> Stuks Ø </th><th><input type="INT" class="form-control_java" name="boorwerk_cm[]" id="boorwerk_cm" placeholder="120"></th><th> CM </th><th><select class="form-control_java" id="boorwerk_wat" name="boorwerk_wat"><option value="betonvloer">Betonvloer</option><option value="betonwand">Betonwand</option><option value="metselwerk">Metselwerk</option><option value="betonsteen">Betonsteen</option><option value="asfalt">Asfalt</option></select></th>';
ni.appendChild(newdiv);
}
</script>
function addElement() {
var ni = document.getElementById('Form-Input');
var numi = document.getElementById('boorwerk_stuks');
var numi = document.getElementById('boorwerk_cm');
var numi = document.getElementById('boorwerk_wat');
var num = (document.getElementById('boorwerk_stuks').value -1)+ 2;
var num = (document.getElementById('boorwerk_cm').value -1)+ 2;
var num = (document.getElementById('boorwerk_wat').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'Form-Input'+num+'';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<th><input type="INT" name="boorwerk_stuks[]" id="boorwerk_stuks[]" placeholder="10" class="form-control_java"></th><th> Stuks Ø </th><th><input type="INT" class="form-control_java" name="boorwerk_cm[]" id="boorwerk_cm" placeholder="120"></th><th> CM </th><th><select class="form-control_java" id="boorwerk_wat" name="boorwerk_wat"><option value="betonvloer">Betonvloer</option><option value="betonwand">Betonwand</option><option value="metselwerk">Metselwerk</option><option value="betonsteen">Betonsteen</option><option value="asfalt">Asfalt</option></select></th>';
ni.appendChild(newdiv);
}
</script>
Bovenstaand het javascript, onderstaand het html die de regel aanroept.
Code (php)
1
2
3
2
3
<input type="hidden" value="0" id="boorwerk_stuks" /><input type="hidden" value="0" id="boorwerk_cm" /><input type="hidden" value="0" id="boorwerk_wat" />
<p><a href="javascript:;" class="fa fa-plus-square-o" onclick="addElement();"></a></p>
<div id="Form-Input"> </div>
<p><a href="javascript:;" class="fa fa-plus-square-o" onclick="addElement();"></a></p>
<div id="Form-Input"> </div>
Nu is het de bedoeling dat dit principe meerdere keren gebruikt moet worden... Dus voor Boorwerk, Zaagwerk, Sleufwerk etc. etc. etc.
Is dit mogelijk met dit stukje Javascript?
Met vriendelijke groet,
Branco Rensen
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken i.p.v. de quote-tags. Deze is uitsluitend bedoeld voor het citeren van tekst.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 24/10/2014 20:59:45 door - Ariën -
Dat stukje script is totaal onlogisch hoor :-)
waarom declareer je drie keer een variabele numi?
waarom declareer je drie keer een variabele num?
Wat is het voordeel van x - 1 + 2? dat kan toch net zo goed x + 1 zijn?
Zoals je het nu hebt staan kan regel 3 t/m 8 er gewoon uit. je bent toch enkel telkens dezelfde variabele aan het overschrijven en daarbij gebruik je de variabele numi niet eens meer in je script.
Je hoeft een variabele naam overigens maar één keer te declareren:
Code (php)
1
2
2
var i;
i=10; // hoeft geen var meer voor!
i=10; // hoeft geen var meer voor!
of
Code (php)
1
2
2
var i = 10;
i++; // hoeft geen var meer voor!
i++; // hoeft geen var meer voor!
Toevoeging op 24/10/2014 23:02:57:
dan antwoord op je vraag ja dat is mogelijk met behulp van het woordje this
http://codepen.io/anon/pen/EqgKy?editors=101
Zou je de 'tips' die je me geeft aub kunnen toepassen op mijn stukje code... ik heb namelijk weinig tot geen verstand van JAVASCRIPT en dit stukje code heb ik van internet af gehaald... dus ik heb het niet zelf geschreven... Vandaar, dus zou je het AUB kunnen toepassen met het stukje code dat ik gebruik?
Moraal van het verhaal: Of leer zelf JavaScript, die tips van Frank zijn niet heel moeilijk, of vind iemand die het script voor je wilt maken.
Wouter J op 25/10/2014 00:14:27:
Als je geen verstand van iets hebt kun je er beter ook niet mee gaan werken. Tenzij je het doet om er verstand van de krijgen, maar dan zou ik afraden dingen zomaar te kopiëren. Je gaat ook geen huis bouwen als je daar geen verstand van hebt. Het internet maakt het makkelijker om dingen te maken waar je geen verstand van hebt, aangezien het niks fysieks is, maar de gevolgen kunnen bijna even erg zijn als dat je iets fysieks ging bouwen waar je geen verstand van hebt.
Moraal van het verhaal: Of leer zelf JavaScript, die tips van Frank zijn niet heel moeilijk, of vind iemand die het script voor je wilt maken.
Moraal van het verhaal: Of leer zelf JavaScript, die tips van Frank zijn niet heel moeilijk, of vind iemand die het script voor je wilt maken.
Dit vind ik het nadeel van dit forum... ik vraag om een oplossing, ik zeg niet dat ik er geen verstand van heb... Ik zeg dat ik er niet veel verstand van heb, en ik vraag of Frank het kan laten zien in het stukje script dat ik gebruik? Meer vraag ik toch niet? Dit zijn antwoorden waar ik niets aan heb... want er wordt niet om gevraagd
Ik kan me voorstellen dat de reactie van Wouter wat hard overkomt maar hij heeft wel een punt. Ik en de andere leden zijn geen gratis afhaalchinees. De bedoeling is dat je hier je vragen kan stellen en daar krijg je antwoord op. De bedoeling is niet dat anderen jouw code gaan schrijven.
Ik stel voor dat je jouw stukje code even gaat verbeteren met de tips die ik je gaf en daarna kunnen we je functie flexibeler maken.
Branco Rensen op 25/10/2014 10:11:10:
ik vraag om een oplossing
Je lijkt te vragen om een kant en klaar oplossen / aangepast script (zonder zelf enige moeite te willen doen). En daar wil niet iedereen bij helpen. Frank stelt een aantal vragen waar je geen antwoord op geeft en geeft verder aan wat er fout is en geeft je een voorbeeld. Waarom dan zelf niet proberen?
Branco Rensen op 25/10/2014 10:11:10:
ik zeg niet dat ik er geen verstand van heb... Ik zeg dat ik er niet veel verstand van heb,
Dan moet je dus de keuze maken tussen er meer verstand van zien te krijgen of het een ander laten doen ;-)
Heb ik hieronder je script aangepast met een parameter in je addElement functie.
Ik heb dit niet direct getest, misschien een ' op verkeerde plek ofzo, zou kunnen :)
Voer je functie als volgt uit:
onClick="addElement('boorwerk');"
onClick="addElement('zaagwerk');"
onClick="addElement('sleufwerk');"
Ik wil er niet te ver op in gaan, maar zoiets zou het moeten zijn ;)
Maar als het uberhaubt werkte, zal dit zo beetje >een< oplossing >kunnen< zijn.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
function addElement(type) {
var ni = document.getElementById('Form-Input');
var numi = document.getElementById(type + '_stuks');
var numi = document.getElementById(type + '_cm');
var numi = document.getElementById(type + '_wat');
var num = (document.getElementById(type + '_stuks').value -1)+ 2;
var num = (document.getElementById(type + '_cm').value -1)+ 2;
var num = (document.getElementById(type + '_wat').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'Form-Input'+num+'';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<th><input type="INT" name="' + type + '_stuks[]" id="' + type + '_stuks[]" placeholder="10" class="form-control_java"></th><th> Stuks Ø </th><th><input type="INT" class="form-control_java" name="' + type + '_cm[]" id="' + type + '_cm" placeholder="120"></th><th> CM </th><th><select class="form-control_java" id="' + type + '_wat" name="' + type + '_wat"><option value="betonvloer">Betonvloer</option><option value="betonwand">Betonwand</option><option value="metselwerk">Metselwerk</option><option value="betonsteen">Betonsteen</option><option value="asfalt">Asfalt</option></select></th>';
ni.appendChild(newdiv);
}
</script>
function addElement(type) {
var ni = document.getElementById('Form-Input');
var numi = document.getElementById(type + '_stuks');
var numi = document.getElementById(type + '_cm');
var numi = document.getElementById(type + '_wat');
var num = (document.getElementById(type + '_stuks').value -1)+ 2;
var num = (document.getElementById(type + '_cm').value -1)+ 2;
var num = (document.getElementById(type + '_wat').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'Form-Input'+num+'';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<th><input type="INT" name="' + type + '_stuks[]" id="' + type + '_stuks[]" placeholder="10" class="form-control_java"></th><th> Stuks Ø </th><th><input type="INT" class="form-control_java" name="' + type + '_cm[]" id="' + type + '_cm" placeholder="120"></th><th> CM </th><th><select class="form-control_java" id="' + type + '_wat" name="' + type + '_wat"><option value="betonvloer">Betonvloer</option><option value="betonwand">Betonwand</option><option value="metselwerk">Metselwerk</option><option value="betonsteen">Betonsteen</option><option value="asfalt">Asfalt</option></select></th>';
ni.appendChild(newdiv);
}
</script>
Gewijzigd op 25/10/2014 21:37:07 door Dennis WhoCares
Maar bedenk wel dat je hier een vraag stelt dat overkomt alsof je wilt dat anderen het voor jouw oplossen.
Als je nou eens samen met iedereen jouw probleem probeert op te lossen door voorbeelden of vragen te stellen die kunnen helpen tot het vormen van de oplossing.
Dus als je nou eerst eens begint met het maken van een nieuwe blanke functie met de tips die frank gaf.
Niet 3 keer num aangeven als var.
Als je dit hebt gedaan ga je kijken wat je nodig hebt om het op meerdere plekken gebruikt kan worden.
Waarschijnlijk loop je daar tegen aan maar kunnen we je dan beter helpen.
Let op dit is niet aanvallend bedoeld maar meer een duwtje in de goede richting voor jouw.
Heb zelf ook weinig verstand van js maar ga speciaal voor jouw zoeken hoe je het op meer plekken kunt gebruiken.