value van ene input naar andere input

Door Davey Mat op 02-04-2014 11:04

1.820 views

Hallo allemaal,

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;


<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>

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


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:


var x=document.getElementsByName("add-to-cart");
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?

Michael -

02-04-2014 11:15

>>> Daarnaast hebben beide inputs dezelfde name en hebben ze geen class of id en deze kan ik ook niet toevoegen.

Waarom kan dat niet? Dat zou het een stuk makkelijker maken.

Davey Mat

02-04-2014 11:17

Omdat ik verbonden ben aan een systeem dat in php is gemaakt die een standaard html code uitspuugt. Ik kan wel html en javascript toevoegen, maar ik kan niks aanpassen of verwijderen.

Michael -

02-04-2014 11:22

Ah oke, je kunt het volgende doen zolang je input velden met add-to-cart niet (van positie) veranderen


var val = document.getElementsByName("add-to-cart")[1].value;
document.getElementsByName("add-to-cart")[0].value = val;

voorbeeld

Davey Mat

02-04-2014 12:20

Super bedankt Michael!

Heb alleen nog een vraagje over de code. Als ik de code bovenaan de pagina zet als:


                <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?

Michael -

02-04-2014 14:23

Hm ik heb geen idee. Zou moeten werken inderdaad.
Ik heb het zelf nog even getest en zowel lokaal in Chrome en IE als in jsbin werkt het prima


<script>
window.onload = function() {
var val = document.getElementsByName("add-to-cart")[1].value;
document.getElementsByName("add-to-cart")[0].value = val;
};
</script>

Ger van Steenderen

02-04-2014 14:55

Alternatief:[code lang="js"]
<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>[/code]

Davey Mat

02-04-2014 15:01

Misschien dat de cache nog niet goed was ververst. Anders zal ik het ook niet weten. In ieder geval nogmaals bedankt!

[size=xsmall]Toevoeging op 02/04/2014 15:04:18:[/size]

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?

Ger van Steenderen

02-04-2014 16:31

Op Mozilla.org kan je hier meer over vinden. Mozilla.org heeft een uitgebreide documentatie voor als je met puur Javascript 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.

Reageren

Inloggen om te reageren