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


i'd dynamically change action of form depending on value selected, i'm struggling so, , 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 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 user able select either bird, insect or butterfly , depending on user selected, javascript function dynamically change form action, before press submit, would've changed file thy're opening.

i keep running various errors , i'm not sure how make work, thanks.

there's 4 things that'll keep objective:

  • i've never seen syntax this: onchange="gotopage(javascriptdatabaseadvancedsearch.js), removed it.
    • if trying find place script,
      • put before closing </body> tag while developing,
      • then production, put in external file so:
        <script src="https://domain.com/path/to/javascriptdatabaseadvancedsearch.js"></script>
      • place line either before closing tag of </head> or </body>
  • the <select> element wasn't closed </select> (minor)

  • if use expression: document.searchdatabaseform.action, must give form name="searchdatabaseform" (essential)

  • currentvalue should correspond <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 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>


Comments