Как связать HTML & lt; выберите & gt; список с кнопкой отправки

Question

Как связать HTML & lt; выберите & gt; список с кнопкой отправки

У меня есть веб-страница, которая состоит из списка выбора с 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, потому что список опций не может напрямую открывать страницы, для выполнения действия требуется кнопка отправки.

Нужна помощь, чтобы решить эту проблему.

0

href html list php submit-button

Решение

Другие решения

Самое простое решение на основе 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 Формат по вашему требованию. Я просто дал пример примера.

4

Добавьте этот скрипт в ваш 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; " />

надеюсь это поможет 🙂

3

Вы можете сделать это с помощью PHP, но вам нужно будет сделать 2 вещи:

Поместите выбор и введите в форму в вашем 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 перехватит данные формы POST и перенаправит на соответствующую страницу, например так: (поместите это в верхней части страницы 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-кода.

1

Источник

Accepted Answer

Я думаю, что 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

2