how to change input box value in html when selectbox is selected without changing the select box value

Question

i am trying to integrate payu payment gateway in my website so when a user selects the product info in my form, the amount should change accordingly, I have done the following:

 function myFunction(e) { document.getElementById("myText").value = e.target.value }

 <select name="productinfo" onchange="myFunction(event)" class="form-control"> <option value="<?php echo (empty($posted['productinfo']))? '': $posted['productinfo']; ?>" disabled selected>Choose Database Type</option> <option value="26,999">X 1.5</option> <option value="28,999">X 2.5</option> <option value="32,999">X 3.5</option> <option value="35,999">X 4.5</option> </select> <input type="text" name="amount" id="myText" class="form-control" value="<?php echo (empty($posted['amount']))? '': $posted['amount']; ?>" readonly>

here the amount is being changed according to product select and am able to pass it to pay, what I want is the product info also to be passed like value="X2" in the form, is there any way to do it,please help, thanks in advance

Answer 1

Here try this:

 function myFunction(e) { document.getElementById("myText").value = e.options[e.selectedIndex].getAttribute('data-price'); }

 <select name="productinfo" onchange="myFunction(this)" class="form-control"> <option value="<?php echo (empty($posted['productinfo']))? '': $posted['productinfo']; ?>" disabled selected>Choose Database Type</option> <option value="X 1.5" data-price="26,999">X 1.5</option> <option value="X 2.5" data-price="28,999">X 2.5</option> <option value="X 3.5" data-price="32,999">X 3.5</option> <option value="X 4.5" data-price="35,999">X 4.5</option> </select> <input type="text" name="amount" id="myText" class="form-control" value="<?php echo (empty($posted['amount']))? '': $posted['amount']; ?>" readonly>