javascript - 使用 Javascript 根据所选的下拉值更改表单的操作

Question

我想根据所选的值动态更改表单的操作，但我很难做到这一点，而且其他示例对我帮助不大。

HTML:

<form id="SearchDatbaseForm" method="POST" action="">
  <select id="selectTableDropDown" onchange="gotoPage(JavascriptDatabaseAdvancedSearch.js)"/>
    <option value="null">Choose a class</option>
    <option value="birdTable">Birds</option>
    <option value="insectTable">Insects</option>
    <option value="butterflyTable">Butterflys</option>

   <!-- Search Bar -->
   Search for: <input type="text" name="aSearch"> 
   <!-- Submit Button -->
   <input type="submit" value="Search">
</form>

JavaScript

document.getElementById("selectTableDropDown").onchange = function() {
  var currentVal = this.value;

  if (currentVal == "BirdDB") {
    document.searchDatabaseForm.action = "controllerBirdDB.php";
  }
  if (currentVal == "InsectDB") {
    document.searchDatabaseForm.action = "controllerInsectDB.php";
  }
  if (currentVal == "ButterflyDB") {
    document.searchDatabaseForm.action = "controllerButterflyDB.php";
  }
}

我希望用户能够选择鸟类、昆虫或蝴蝶，并且根据用户的选择，JavaScript 函数会动态更改表单操作，因此在按下提交之前，它会更改文件你开门了

我一直遇到各种错误，我不确定如何让它工作，谢谢。

Answer 1

有 4 件事会阻止您实现目标:

• 我从未见过这样的语法:onchange="gotoPage(JavascriptDatabaseAdvancedSearch.js) ，所以我删除了它。
  • 如果你想为你的脚本找一个地方，
    • 收盘前放</body>开发时标记，
    • 然后为了生产，将其放入外部文件中，如下所示:
      <script src="https://domain.com/path/to/JavascriptDatabaseAdvancedSearch.js"></script>
    • 将此行放在 </head> 的结束标记之前或 </body>

• <select>元素未用 </select> 关闭(小)

• 如果您使用此表达式:document.SearchDatabaseForm.action , 你必须给表格 name="SearchDatabaseForm" (必要的)

• currentValue应该对应于<option value="....> (关键)

  • var stdd = document.getElementById("selectTableDropDown");
  • var currentValue = stdd.options[stdd.selectedIndex].value

document.getElementById("selectTableDropDown").onchange = function() {
  var stdd = document.getElementById("selectTableDropDown");
  var currentVal = stdd.options[stdd.selectedIndex].value

  if (currentVal == "birdTable") {

    document.SearchDatabaseForm.action = "controllerBirdDB.php";
  }
  if (currentVal == "insectTable") {
    document.SearchDatabaseForm.action = "controllerInsectDB.php";
  }
  if (currentVal == "butterflyTable") {
    document.SearchDatabaseForm.action = "controllerButterflyDB.php";
  }
}

<form id="SearchDatbaseForm" name="SearchDatabaseForm" method="POST" action="">
  <select id="selectTableDropDown" name="selectTableDropDown">
    <option value="null">Choose a class</option>
    <option value="birdTable">Birds</option>
    <option value="insectTable">Insects</option>
    <option value="butterflyTable">Butterflys</option>
  </select>?

  <!-- Search Bar -->
  Search for:
  <input type="text" name="aSearch">
  <!-- Submit Button -->
  <input type="submit" value="Search">
</form>