[英]How to change url based on input type selected using javaScript/Jquery?
I have a form 我有一个表格
<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>
Initially the url is http://localhost/childzone/
最初的网址是
http://localhost/childzone/
If I select the option books
from Category the URL must change to http://localhost/childzone/books
and when I select option clothes
the url must be http://localhost/childzone/clothes
. 如果我从“类别”中选择了选项
books
,则URL必须更改为http://localhost/childzone/books
并且当我选择选项clothes
,URL必须是http://localhost/childzone/clothes
。
If I also select age=5 from the dropdown age
the url must be http://localhost/childzone/clothes&age=5
. 如果我还从下拉
age
选择age = 5,则该网址必须为http://localhost/childzone/clothes&age=5
。 For multiple options selected ie, if I select 5 and 10 both from age
the url must be http://localhost/childzone/clothes&age=5,10
. 对于选择的多个选项,即,如果我从
age
选择5和10,则URL必须为http://localhost/childzone/clothes&age=5,10
。
How do I get such a URL. 我如何获得这样的URL。 I am new to php, can anyone help.
我是php新手,任何人都可以帮忙。 Thank you in advance
先感谢您
These for redirection script without refreshing the page.Let me know if these works buddy 这些用于重定向脚本而不刷新页面。让我知道这些是否有用
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;
}
Here is one more detailed jQuery solution : 这是一个更详细的jQuery解决方案:
JS: 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.
});
Just we need to call submit event by taking the URL which I appended on the div.url
. 只是我们需要使用我附加在
div.url
上的URL来调用div.url
。
//on books select event use
location.replace("http://localhost/childzone/books");
//on clothes select event use
location.replace("http://localhost/childzone/clothes");
without refreshing :- 不刷新:-
//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")
This is not possible. 这是不可能的。 Since if you try to change the url then page will get refresh.
由于如果您尝试更改URL,则页面将刷新。 Then your selection will reset.
然后您的选择将重置。 You can do this by appending # or you have to maintain selected values somehow and set them again.
您可以通过添加#来执行此操作,或者必须以某种方式维护所选的值并再次进行设置。
Try this bro add on your form the onsubmit="submitnow()" so the function may work.Let me know if it has an issues 尝试使用此兄弟添加您的表单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();">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.