Как изменить URL в зависимости от типа ввода, выбранного с помощью javaScript / Jquery?
У меня есть форма
<form name="categoryform" method="post">
Category:<select name="category" id="category" >
<option value="games">games</option>
<option value="books">books</option>
<option value="toys">toys</option>
<option value="clothes">clothes</option>
</select>
Age: <select multiple name="age" id="age" >
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<input type="submit" name="submit" value="submit"/>
</form>
Первоначально URL-адрес http://localhost/childzone/
Если я выберу вариант books из категории URL должен измениться на http://localhost/childzone/books и когда я выбираю вариант clothes URL должен быть http://localhost/childzone/clothes,
Если я также выберу возраст = 5 из выпадающего age URL должен быть http://localhost/childzone/clothes&age=5, Для нескольких выбранных вариантов, т.е. если я выберу 5 и 10 оба из age URL должен быть http://localhost/childzone/clothes&age=5,10,
Как я могу получить такой URL. Я новичок в php, может кто-нибудь помочь. заранее спасибо
Решение
//on books select event use
location.replace("http://localhost/childzone/books");
//on clothes select event use
location.replace("http://localhost/childzone/clothes");
без обновления: —
//on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")
//on books select event use
window.history.replaceState(null, "Search Results", "localhost/childzone/books")
Другие решения
Они для сценария перенаправления без обновления страницы. Дайте мне знать, если это работает приятель
function submitnow_urlchange(){
var cat = jQuery("#category option:selected").val();
var age = jQuery("#age option:selected");
var age_holder = [];
age.each(function(){
var el = jQuery(this);
var hold = el.val();
if(el.val()) age_holder.push(hold);
});
var age_compile = age_holder.join(',');
var url = cat+"&"+age_compile;
history.pushState("", "", url);
return false;
}
Вот еще одно подробное решение jQuery:
JS:
//Generate url for category
$("select[name='category']").change(function(e) {
e.preventDefault();
var a = "http://localhost/childzone/";
$("div.url").append(a + this.value);
});
//Generate URL for the multi-select age list
var foo = [];
var a = "http://localhost/childzone/clothes&age=";
var b = '';
$("select[name='age']").change(function(e) {
e.preventDefault();
$("select[name='age'] :selected").each(function(i, selected) {
foo[i] = $(selected).text();
if (b == '') b = b + foo[i]; //if more than one option selected, seperate it by comma.
else b = b + ',' + foo[i];
});
$("div.url").html(a + b); //Append URL to div for reference
b = ''; //Clear the string holding URL.
});
Нам нужно вызвать событие submit, взяв URL, который я добавил на div.url,
Это невозможно. Поскольку, если вы попытаетесь изменить URL, страница обновится. Тогда ваш выбор будет сброшен. Вы можете сделать это, добавив # или вы должны как-то сохранить выбранные значения и установить их заново.
Попробуйте это, братан, добавьте в форму onsubmit = «submitnow ()», чтобы функция могла работать. Дайте мне знать, если у нее есть проблемы
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function submitnow(){
var cat = jQuery("#category option:selected").val();
var age = jQuery("#age option:selected");
var age_holder = [];
age.each(function(){
var el = jQuery(this);
var hold = el.val();
if(el.val()) age_holder.push(hold);
});
var age_compile = age_holder.join(',');
var url = "http://localhost/childzone/?"+cat+"&"+age_compile;
return url;
}
</script>
<form name="categoryform" method="post" onsubmit="submitnow();">