value van ene input naar andere input
Ik ben een beginneling in javascript en weet daarom niet hoe ik dit probleem moet oplossen. Ik kom meer uit de php wereld, maar wil graag javascript leren.
Ik probeer een value vanuit een input te krijgen en die in een andere input te zetten. Dit moet standaard gebeuren als de pagina laad.
Daarnaast hebben beide inputs dezelfde name en hebben ze geen class of id en deze kan ik ook niet toevoegen.
Het gaat om de volgende code;
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
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
<form id="vloercalculator" name="vloercalculator" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Vloer calculator</legend>
<p><label>Aantal m2</label><br />
<input id="meter2" onmouseup="calculateTotal()" onkeyup="calculateTotal()" type="text" name="meter2" onchange="calculateTotal()" /><br />
<label>Aantal pakken</label><br />
<input id="pakken" type="text" name="quantity" onchange="calculateTotal()" /><br />
<label>Eventueel zaagverlies</label><br />
<input id="5zaagverlies" type="checkbox" /> + 5% zaagverlies</p>
<div id="totalPrice"></div>
<div id="unitPrice"></div>
<p><input type="hidden" name="add-to-cart" value="" /><br />
<button type="submit">Toevoegen aan winkelwagen</button></fieldset>
</form>
</div>
</div>
<form class="cart" method="post" enctype='multipart/form-data'>
<div class="quantity_select" style="float:left; margin-right:10px;">
<select name="quantity" title="Aantal" class="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<input type="hidden" name="add-to-cart" value="1050" />
<button type="submit" class="single_add_to_cart_button button alt">Toevoegen aan winkelwagen</button>
</form>
<fieldset>
<legend>Vloer calculator</legend>
<p><label>Aantal m2</label><br />
<input id="meter2" onmouseup="calculateTotal()" onkeyup="calculateTotal()" type="text" name="meter2" onchange="calculateTotal()" /><br />
<label>Aantal pakken</label><br />
<input id="pakken" type="text" name="quantity" onchange="calculateTotal()" /><br />
<label>Eventueel zaagverlies</label><br />
<input id="5zaagverlies" type="checkbox" /> + 5% zaagverlies</p>
<div id="totalPrice"></div>
<div id="unitPrice"></div>
<p><input type="hidden" name="add-to-cart" value="" /><br />
<button type="submit">Toevoegen aan winkelwagen</button></fieldset>
</form>
</div>
</div>
<form class="cart" method="post" enctype='multipart/form-data'>
<div class="quantity_select" style="float:left; margin-right:10px;">
<select name="quantity" title="Aantal" class="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<input type="hidden" name="add-to-cart" value="1050" />
<button type="submit" class="single_add_to_cart_button button alt">Toevoegen aan winkelwagen</button>
</form>
Ik probeer uit het onderste formulier de value van "<input type="hidden" name="add-to-cart" value="1050" />" te krijgen, die in dit geval 1050 is. Die wil ik zetten in "<input type="hidden" name="add-to-cart" value="" />" van het bovenste formulier.
Ik heb geprobeerd om in de header iets te doen met
Code (php)
1
document.vloercalculator['add-to-cart'].value = document.getElementsByName('add-to-cart')[1].value;
Maar dit werkt niet, daarna ben ik hiermee aan de slag gegaan:
Code (php)
1
2
2
var x=document.getElementsByName("add-to-cart");
alert(x.value);
alert(x.value);
Maar om dit te gebruiken heb ik begrepen dat er maar 1 element mag zijn met de name "add-to-cart", maar ik heb er 2, dus dat werkt ook niet.
Zou iemand mij op weg kunnen helpen?
Waarom kan dat niet? Dat zou het een stuk makkelijker maken.
Code (php)
1
2
2
var val = document.getElementsByName("add-to-cart")[1].value;
document.getElementsByName("add-to-cart")[0].value = val;
document.getElementsByName("add-to-cart")[0].value = val;
voorbeeld
Heb alleen nog een vraagje over de code. Als ik de code bovenaan de pagina zet als:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script>
window.onload = function () {
var val = document.getElementsByName("add-to-cart")[1].value;
document.getElementsByName("add-to-cart")[0].value = val;
}
</script>
window.onload = function () {
var val = document.getElementsByName("add-to-cart")[1].value;
document.getElementsByName("add-to-cart")[0].value = val;
}
</script>
dan werkt de code niet. In ieder geval veranderd de value van "" niet naar "1500".
Maar als ik de code (zonder window.onload) onderaan de pagina zet dan werkt de code wel.
Hoe kan dat, window.onload zorgt er toch voor dat de code ook pas gaat draaien als de formulier zijn geladen die we willen manipuleren?
Ik heb het zelf nog even getest en zowel lokaal in Chrome en IE als in jsbin werkt het prima
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<script>
window.onload = function() {
var val = document.getElementsByName("add-to-cart")[1].value;
document.getElementsByName("add-to-cart")[0].value = val;
};
</script>
window.onload = function() {
var val = document.getElementsByName("add-to-cart")[1].value;
document.getElementsByName("add-to-cart")[0].value = val;
};
</script>
Code (js)
1
2
3
4
2
3
4
<script type="text/javascript">
document.querySelector('form#vloercalculator').querySelector('input[name="add-to-cart"]').value =
document.querySelector('form.cart').querySelector('input[name="add-to-cart"]').value;
</script>
document.querySelector('form#vloercalculator').querySelector('input[name="add-to-cart"]').value =
document.querySelector('form.cart').querySelector('input[name="add-to-cart"]').value;
</script>
Toevoeging op 02/04/2014 15:04:18:
Ik zie je bericht nu pas Ger, ik kan geen informatie vinden over de querySelector, zou je me kunnen uitleggen of een link kunnen sturen hoe deze werkt?
Ik had overigens voor de selectie op het id beter document.getElementById() kunnen gebruiken.
Als je iets niet begrijpt of wat verder uitgelegd wilt hebben, laat het even weten, dan zal ik het proberen verder uit te leggen.