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

刚刚做了如下修改：

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

Answer 2

您切换的是元素而不是它的值。

代码如下所示

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

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

Passing HTML dropdown-menu values to HTML input through Javascript

html

javascript

getelementbyid

queryselector