JQuery to help page act like a form
I'm trying to do something similar to www.wanderfly.com . Basi开发者_如何转开发cally the end goal is to have the divs in my page act like a checkbox, so at the end when a submit button is clicked the user will be transferred to something like:
mysite.co.uk/City=1|4|5|9
So in this example the user clicked on divs number 1,4,5 & 9. if he would have clicked div 4 again then he would've been passed to:
mysite.co.uk/City=1|5|9
I hope i'm clear, please help me with a right direction on how to handle this and if JQuery has already a library for something of this sort.
<div class="option" value="1">Click me!</div>
<div class="option" value="2">Click me too!</div>
<div class="option" value="3">And me!</div>
<button id="submit">Submit!</button>
$(".option").click(function(){
$(this).toggleClass("selected");
});
$("#submit").click(function(){
var q = "City=";
$(".option.selected").each(function(i, el){
q += $(el).attr("value")+"|";
});
q = q.slice(0, -1);
window.location = "http://www.mysite.co.uk/?"+q;
});
$('div').bind('click', function() {
if($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$(this).addClass('selected');
}
});
$('#button').bind('click', function() {
var newURL = 'http://mysite.co.uk/City=';
$('div.selected').each(function() {
newURL= newURL+$(this).attr('id')+'|';
});
alert(newURL);
});
example
精彩评论