通过Javascript将HTML下拉菜单值传递给HTML输入

Question

我正在尝试创建一个HTML下拉菜单，在通过POST方法发送到Coinpayment之前，该菜单将通过Javascript将其值发送到其他HTML输入标记。明显地有些东西不起作用；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标签：

即：

<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

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