Передайте значения опций выбора в качестве параметра url на следующую страницу
У меня есть пользовательская система регистрации на основе параметров URL.
Шаг 1: У меня есть несколько кнопок, и когда вы нажимаете одну из кнопок, она передает значение на следующую страницу, где я могу получить значение с помощью <?php echo $_GET['step1'];?> (это работает нормально)
Шаг 2: Я хочу использовать только два поля выбора (не хочу использовать форму здесь) и <a> нажмите, я хочу передать этот выбор URL.
Вот мой код:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<a href="http://domain/step1/step2?step1=<?php echo $_GET['step1'];?&SELECTboxVALUES>">Next</a>
Итак, вот что я хочу перейти на следующую страницу:
HTTP: // домен / step1 / step2 / step3 parameterfromstep1 = что-то&пол = мужской&цвет = красный
Как мне это сделать? Должен ли я использовать php на нажатие кнопки или jquery?
Спасибо
Решение
<a id="next" href="http://domain/step1/step2?step1=<?php echo $_GET['step1'];?&SELECTboxVALUES>">Next</a>
используйте код ниже
$('#next').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
var gender = $('[name="gender"]').val();
var color = $('[name="color"]').val();
if( gender && color ){
window.location.href = url+'?&'+gender+color;
}
});
Другие решения
Ну, это может быть не самый лучший или самый красивый метод, но я думаю, что приведенный ниже код будет работать для вас:
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<select name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<a href="http://domain/step1/step2/step3?step1=<?=$_GET['step1'];?>" id="nextButton">Next</a>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).on('click', '#nextButton',function( event ) {
// Stop default action
event.preventDefault();
window.location.href = $(this).attr('href') + '&gender='+$('select[name="gender"] option:selected').text()
+ '&color='+$('select[name="color"] option:selected').text();
});
</script>