通過 Javascript 將 HTML 下拉菜單值傳遞給 HTML 輸入

Question

我正在嘗試創建一個 HTML 下拉菜單，該菜單將通過 Javascript 將其值發送到其他 HTML 輸入標簽，然后再通過 POST 方法發送到 Coinpayment。 顯然......有些東西不起作用，“itemval”和“amountval”似乎沒有從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>

我錯過了什么？

Answer 1

您正在切換元素而不是其值。

代碼看起來像這樣

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;
        ...
    }
}

並且不要忘記 id 標簽：

IE：

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

Answer 2

剛剛做了如下修改：

console.log({itemOptions});
switch(itemOptions.value) {

它將修復並為您提供一種非常簡單的自行調試方法。

然后您可能需要修復getElementById is not defined的getElementById is not defined

document.getElementById

然后將缺少的 id 放在您通過 id 到達的輸入上。

<input type="hidden" name="item_name" id="itemval" value="itemval">
<input type="hidden" name="currency" value="USD">
<input type="hidden" name="amountf" id="amountval" value="amountval">

然后使用.value設置輸入值，而不是.innerHTML 。

document.getElementById(XXX).value