Question

我有一个选择选项，需要根据所选选项动态填充文本框中的特定值（不同的价格）。文本框中的值需要总结并显示在另一个文本框中（总计）。但是，我选择的选项（id=term0）中的值未添加到总文本框中。

＆＃13;

function showList() {
  var check = document.getElementById("listCheck");
  if (check.checked == true) {
    document.getElementById("listP").value = 8000;
  } else {
    document.getElementById("listP").value = 0;
  }
}

function showGeoBeacon() {
  var check = document.getElementById("geoBeaCheck");
  if (check.checked == true) {
    document.getElementById("geoBeaconP").value = 0;
  } else {
    document.getElementById("geoBeaconP").value = 0;
  }
}

function geo0(aval) {
  if (aval == "3 Months") {
    document.getElementById("geoBeaconP").value = 4000;
    Form.fileURL.focus();
  } else if (aval == "6 Months") {
    document.getElementById("geoBeaconP").value = 6000;
    Form.fileURL.focus();
  } else if (aval == "12 Months") {
    document.getElementById("geoBeaconP").value = 8000;
    Form.fileURL.focus();
  }
}

＆＃13;

<form onsubmit="return false" oninput="totalAmount.value = parseInt(listP.value) + parseInt(geoBeaconP.value)">
  <input type="checkbox" id="listCheck" name="listCheck" onclick="showList()">
  <input id="listP" name="listP" type="number" class="form-control input-lg" value="0">
  <select class="form-control input-lg" id="term0" name="term0" onchange="java_script_:geo0(this.options[this.selectedIndex].value)">
    <option value="3 Months"></option>
    <option value="6 Months"></option>
    <option value="12 Months"></option>
  </select>
  <input type="text" id="geoBeaconP" type="number" value="0">
  <div id="total" name="total" type="text">
    <output name="totalAmount" id="totalAmount" for="listP geoBeaconP pushP advertP"></output>
  </div>
</form>

＆＃13;

Answer 1

function showList() {
  var check = document.getElementById("listCheck");
  if (check.checked == true) {
    document.getElementById("listP").value = 8000;
  } else {
    document.getElementById("listP").value = 0;
  }
}

function showGeoBeacon() {
  var check = document.getElementById("geoBeaCheck");
  if (check.checked == true) {
    document.getElementById("geoBeaconP").value = 0;
  } else {
    document.getElementById("geoBeaconP").value = 0;
  }
}

function geo0(aval) {
alert(aval)
  if (aval == "3 Months") {
    document.getElementById("geoBeaconP").value = 4000;
    
  } else if (aval == "6 Months") {
    document.getElementById("geoBeaconP").value = 6000;
    
  } else if (aval == "12 Months") {
    document.getElementById("geoBeaconP").value = 8000;
   
  }
}

<form onsubmit="return false" oninput="totalAmount.value = parseInt(listP.value) + parseInt(geoBeaconP.value)">
  <input type="checkbox" id="listCheck" name="listCheck" onclick="showList()">
  <input id="listP" name="listP" type="number" class="form-control input-lg" value="0">
  <select class="form-control input-lg" id="term0" name="term0" onchange="java_script_:geo0(this.options[this.selectedIndex].value)">
    <option value="3 Months"></option>
    <option value="6 Months"></option>
    <option value="12 Months"></option>
  </select>
  <input type="text" id="geoBeaconP" type="number" value="0">
  <div id="total" name="total" type="text">
    <output name="totalAmount" id="totalAmount" for="listP geoBeaconP pushP advertP"></output>
  </div>
</form>

Answer 2

当您将“ onchange”更改为“ oninput”时，代码有效。

function showList() {
  var check = document.getElementById("listCheck");
  if (check.checked == true) {
    document.getElementById("listP").value = 8000;
  } else {
    document.getElementById("listP").value = 0;
  }
}

function showGeoBeacon() {
  var check = document.getElementById("geoBeaCheck");
  if (check.checked == true) {
    document.getElementById("geoBeaconP").value = 0;
  } else {
    document.getElementById("geoBeaconP").value = 0;
  }
}

function geo0(aval) {
alert(aval)
  if (aval == "3 Months") {
    document.getElementById("geoBeaconP").value = 4000;
    
  } else if (aval == "6 Months") {
    document.getElementById("geoBeaconP").value = 6000;
    
  } else if (aval == "12 Months") {
    document.getElementById("geoBeaconP").value = 8000;
   
  }
}

<form onsubmit="return false" oninput="totalAmount.value = parseInt(listP.value) + parseInt(geoBeaconP.value)">
  <input type="checkbox" id="listCheck" name="listCheck" onclick="showList()">
  <input id="listP" name="listP" type="number" class="form-control input-lg" value="0">
  <select class="form-control input-lg" id="term0" name="term0" oninput="java_script_:geo0(this.options[this.selectedIndex].value)">
    <option value="3 Months"></option>
    <option value="6 Months"></option>
    <option value="12 Months"></option>
  </select>
  <input type="text" id="geoBeaconP" type="number" value="0">
  <div id="total" name="total" type="text">
    <output name="totalAmount" id="totalAmount" for="listP geoBeaconP pushP advertP"></output>
  </div>
</form>

选定的选项填充需要动态汇总的文本框

2 个答案: