Javascript函数仅适用于第一个FORM

Question

我有一个带有javascript函数的表单，用于将SELECT下拉值onchange复制到Input Hidden字段。

下面是我的代码：

＆＃13;

＆＃13;

function setBilling(){
    var ddl = document.getElementById("billing");
    var selectedOption = ddl.options[ddl.selectedIndex];
    var mailValue = selectedOption.getAttribute("data-bill");
    var textBox = document.getElementById("billingcycle");
    if(mailValue=="1"){
    	textBox.value = "First";
    }
    else if(mailValue=="2"){
    	textBox.value = "Second";
    }
}

＆＃13;

<div class="box1">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box2">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box3">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box4">
<form action="" method="post">
<input type="hidden" name="billingcycle" id="billingcycle"/>
<select id="billing" onchange="setBilling()">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

＆＃13;

＆＃13;

＆＃13;

Javascript功能正在使用1st Div，但不能使用剩余的DIV。 我尝试了所有其他javascript函数，但没有一个正常工作。

我应该怎么做才能在所有div中的javascript函数中执行？

Answer 1

这里的问题是你的HTML无效，因为它在多个元素上使用相同的ID。

From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id：“id global属性定义了一个唯一标识符（ID），它在整个文档中必须是唯一的。”

当您运行document.getElementById("billing");时，它只会返回ID为billing的第一个节点。

考虑使用不同的ID，或使用课程getElementsByClassName或querySelectorAll。

Answer 2

您使用的ID不是唯一的。您需要执行类似的操作，或使用类并相应地更改代码。 JSFiddle这里......

<div class="box1">
<form action="" method="post">
<input type="hidden" name="billingcycle1" id="billingcycle1"/>
<select id="billing1" onchange="setBilling('1')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box2">
<form action="" method="post">
<input type="hidden" name="billingcycle2" id="billingcycle2"/>
<select id="billing2" onchange="setBilling('2')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box3">
<form action="" method="post">
<input type="hidden" name="billingcycle3" id="billingcycle3"/>
<select id="billing3" onchange="setBilling('3')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>

<hr>

<div class="box4">
<form action="" method="post">
<input type="hidden" name="billingcycle4" id="billingcycle4"/>
<select id="billing4" onchange="setBilling('4')">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
<input type="submit" value="Order Now">
</form>
</div>





function setBilling(boxNum){
    var ddl = document.getElementById("billing" + boxNum);
    var selectedOption = ddl.options[ddl.selectedIndex];
    var mailValue = selectedOption.getAttribute("data-bill");
    var textBox = document.getElementById("billingcycle" + boxNum);
    if(mailValue=="1"){
        textBox.value = "First";
    }
    else if(mailValue=="2"){
        textBox.value = "Second";
    }
}

Answer 3

＆＃13;

＆＃13;

function setBilling(element) {
  var ddl = element;
  var selectedOption = ddl.options[ddl.selectedIndex];
  var mailValue = selectedOption.getAttribute("data-bill");
  var textBox = document.getElementById("billingcycle");
  if (mailValue == "1") {
    textBox.value = "First";
  } else if (mailValue == "2") {
    textBox.value = "Second";
  }
}

＆＃13;

<div class="box1">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

<hr>

<div class="box2">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

<hr>

<div class="box3">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

<hr>

<div class="box4">
  <form action="" method="post">
    <input type="hidden" name="billingcycle" id="billingcycle" />
    <select id="billing" onchange="setBilling(this)">
<option data-bill="1" value="INR:1200.00">INR:1200.00/first</option>
<option data-bill="2" value="INR:2400.00">INR:2400.00/second</option>
</select>
    <input type="submit" value="Order Now">
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;