![](/img/trans.png)
[英]How to link submit button with OPTION LIST created in html using javascript
[英]How to link a HTML <select> list with a submit button
我有一個網頁,其中包含一個帶有 6 個選項的選擇列表以及一個提交按鈕。
我需要以這樣的方式代碼,即在列表中選擇一個選項並且單擊提交按鈕時,它應該打開另一個鏈接頁面,而選擇另一個選項並單擊提交按鈕時,它應該打開其他頁面。
基本上我希望每個選項在點擊提交按鈕時打開一些鏈接頁面。
通過谷歌搜索,我明白我必須為此使用 php,但我沒有得到適當的代碼。
我不希望提交按鈕只打開 1 個特定頁面。 相反,我希望它打開 6 個不同的頁面,對應於選擇的不同選項。
代碼片段:
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select>
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
我還了解到不能使用 href 標簽來完成,因為選項列表不能直接打開頁面,需要一個提交按鈕來執行操作。
需要幫助來解決這個問題。
基於jquery
最簡單的解決方案:-
<div>
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select id ="dropDownId"> <!-- give an id to select box-->
<option value="">Select Option</option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
</div>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click
var urldata = $('#dropDownId :selected').val(); // get the selected option value
window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});
</script>
注意:- 此代碼將執行以下操作:-
1.選擇框頁面永不刷新。
2.根據選定的值,您的URL'S
將在新窗口中打開。
3.您還可以根據需要更改URL
格式。 我只是舉了一個例子。
我認為 ts 想根據選定的值打開多個窗口。 所以這里是例子:
<div>
<H1>SELECT An subject:</H1>
<form id="link">
<select multiple="multiple">
<option value="">Choose links</option>
<option value="http://stackoverflow.com/">Stackoverflow</option>
<option value="http://google.com/">Google</option>
<option value="http://yahoo.com/">Yahoo</option>
<option value="http://bing.com/">Bing</option>
<option value="http://php.net/">PHP official</option>
<option value="http://w3c.org">W3C</option>
</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; "/>
</form>
</div>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('#link').on('submit', function (e) {
e.preventDefault();
var $form = $(this),
$select = $form.find('select'),
links = $select.val();
if (links.length > 0) {
for (i in links) {
link = links[i];
window.open(link);
}
}
});
</script>
首先,您必須設置多個要選擇的屬性。 然后通過 jquery 您可以在新的彈出窗口中打開每個鏈接。 小心瀏覽器可能會阻止此彈出窗口。
更新如果你只想打開一個窗口,你可以使用@Anant的解決方案
將此腳本添加到您的 html 代碼中
function showPage() {
var sel = document.getElementById('subjects');
var option = sel.options[sel.selectedIndex].value;
window.open(option + ".html");
}
並復制以下 html 代碼並替換為您的
<select id="subjects">
<option value=""></option>
<option value="physics">physics</option>
<option value="chemistry">chemistry</option>
<option value="biology">biology</option>
<option value="maths">maths</option>
<option value="cs">cs</option>
<option value="electrical">electrical</option>
</select>
<input class="SubmitButton" type="button" value="Submit" onclick="showPage()" style="font-size:20px; " />
希望這有幫助:)
你可以用 PHP 做到這一點,但你需要做兩件事:
將選擇和輸入放入 HTML 中的表單中,如下所示:
<form action="" method="post"> <select name="opt"> <option value="1">Link 1</option> <option value="2">Link 2</option> <!-- etc --> </select> <input type="submit" name="submit">Submit</input> </form>
讓 PHP 捕獲表單的 POSTed 數據並重定向到適當的頁面,如下所示:(將其與表單一起放在 PHP 頁面的頂部)
<?php if (isset($_POST['submit'])) { if (isset($_POST['opt'])) { if ($_POST['opt'] == '1') { header('Location: page1.php'); } elseif ($_POST['opt'] == '2') { header('Location: page2.php'); } // etc... } } ?>
標頭重定向僅在調用之前沒有 HTML 輸出時才起作用,因此請確保在 PHP 代碼塊之前沒有 HTML 代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.