[英]Using Javascript to change the action of my form depending on the drop-down value selected
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: 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 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. 我希望用户能够选择鸟类,昆虫或蝴蝶,并且根据用户选择的内容,JavaScript函数会动态更改表单操作,因此在按下提交之前,它会更改您的文件开幕。
I keep running into various errors and I'm not sure how to make it work, thanks. 我一直遇到各种错误,我不知道如何使它工作,谢谢。
There's 4 things that'll keep you from your objective: 有四件事会让你无法实现目标:
onchange="gotoPage(JavascriptDatabaseAdvancedSearch.js)
, so I removed it. onchange="gotoPage(JavascriptDatabaseAdvancedSearch.js)
,所以我删除了它。
</body>
tag while developing, </body>
标记之前, <script src="https://domain.com/path/to/JavascriptDatabaseAdvancedSearch.js"></script>
</head>
or </body>
</head>
或</body>
的结束标记之前 the <select>
element wasn't closed with </select>
(minor) <select>
元素未使用</select>
(次要)关闭
if you use this expression: document.SearchDatabaseForm.action
, you must give the form the name="SearchDatabaseForm"
(essential) 如果你使用这个表达式:
document.SearchDatabaseForm.action
,你必须给表单name="SearchDatabaseForm"
(必不可少)
currentValue
should correspond to the <option value="....>
(crucial) 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>
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";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.