Using Javascript to change the action of my form depending on the drop-down value selected

Question

I'd like to dynamically change the action of my form depending on the value selected, but I'm struggling to do so, and other examples haven't helped me much.

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

I wanted the user to be able to select either bird, insect or butterfly and depending on what the user selected, a JavaScript function would dynamically change the form action, so before the press submit, it would've changed the file that thy're opening.

I keep running into various errors and I'm not sure how to make it work, thanks.

Answer 1

There's 4 things that'll keep you from your objective:

• I've never seen syntax like this: onchange="gotoPage(JavascriptDatabaseAdvancedSearch.js) , so I removed it.
  • If you are trying to find a place for your script,
    • put it before the closing </body> tag while developing,
    • then for production, put it in an external file like so:
      <script src="https://domain.com/path/to/JavascriptDatabaseAdvancedSearch.js"></script>
    • place this line either before the closing tag of </head> or </body>

• the <select> element wasn't closed with </select> (minor)

• if you use this expression: document.SearchDatabaseForm.action , you must give the form the name="SearchDatabaseForm" (essential)

• currentValue should correspond to the <option value="....> (crucial)

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

Answer 2

See comments in my code:

document.getElementById("selectTableDropDown").onchange = function() {
  var currentVal = this.value;
  var form = document.getElementById('SearchDatbaseForm'); // find form element
  if (currentVal == "birdTable") { // value in your option element is `birdTable` instead of `BirdDB`
    form.action = "controllerBirdDB.php";
  }
  if (currentVal == "insectTable") { // `insectTable` instead of `InsectDB`
    form.action = "controllerInsectDB.php";
  }
  if (currentVal == "butterflyTable") { // `butterflyTable` instead of `ButterflyDB`
    form.action = "controllerButterflyDB.php";
  }
}