Search code examples
javascripthtmlgetelementbyidqueryselector

Passing HTML dropdown-menu values to HTML input through Javascript


I am trying to create an HTML dropdown-menu that would send its value to other HTML input tags through Javascript before being sent to Coinpayment by POST method. Obviously...something's not working, "itemval" and "amountval" don't seem to get the value from Javascript.

 function initCP() {
 var itemOptions = document.querySelector("#item-options");
 switch(itemOptions) {
                     case "1": getElementById("itemval").innerHTML = "LIVE SESSION - 1 participant - 120 USD";
                               getElementById("amountval").innerHTML = "120";
                               break;

                     case "2": getElementById("itemval").innerHTML = "LIVE SESSION - 2 participants - 60 USD";
                               getElementById("amountval").innerHTML = "60";
                               break;

                     case "3": getElementById("itemval").innerHTML = "LIVE SESSION - 3 participant - 40 USD";
                               getElementById("amountval").innerHTML = "40";
                               break;

                     case "4": getElementById("itemval").innerHTML = "LIVE SESSION - 4 participants - 30 USD";
                               getElementById("amountval").innerHTML = "30";
                               break;
                              }}
<form action="https://www.coinpayments.net/index.php" method="post">
<select onchange="initCP()" id="item-options">
 <option  value="1" price="120">LIVE SESSION - 1 participant - 120 USD</option>
 <option  value="2" price="60">LIVE SESSION - 2 participants - 60 USD</option>
 <option  value="3" price="40">LIVE SESSION - 3 participants - 40 USD</option>
 <option  value="4" price="30">LIVE SESSION - 4 participants - 30 USD</option></select>
<select style="visibility: hidden" id="quantitySelect"></select> 

<input type="hidden" name="item_name" value="itemval">
<input type="hidden" name="currency" value="USD">
<input type="hidden" name="amountf" value="amountval">
<input type="image" src="https://www.coinpayments.net/images/pub/CP-third-large.png" alt="Buy Now with CoinPayments.net">
</form>

What am I missing?


Solution

  • You are switching the element not its value.

    The code will looks like this

    function initCP() {
        var inpItemVal = document.getElementById(‘itemval’);
        var inpAmountVal = document.getElementById(‘amountval’);
        var value = document.getElementById(‘item-options’).value;
        switch(value) {
            case “1”: 
                inpItemVal.value = ‘...’;
                inpAmountVal.value = ‘...’;
                break;
            ...
        }
    }
    

    And don’t forget the id tag:

    ie:

    <input type="hidden" name="item_name" id=“itemval” value="itemval">
    <input type="hidden" name="amountf" id=“amountval” value="amountval">