Welcome to WebmasterWorld Guest from 54.226.133.245

Forum Moderators: open

Message Too Old, No Replies

Radio boxes to create url strings

     
7:31 pm on Sep 7, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts:28
votes: 0


Long time lurker, haven't posted much. I am working on trying to create a url string using radio boxes. For instance if someone clicks redwidgets on a radio box and clicks submit it takes them to the url www.widgets.com/search.aspx?red-widgets

I figure this can be done in jquery serialize
[api.jquery.com ]

But i would like to not use jquery and instead use javascript.

Any pros and cons?
Any idea on how do it?
9:59 am on Sept 8, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2004
posts:198
votes: 0


Pros - without jQuery it would be theoretically faster. Although I doubt you would be able to notice a substantial performance difference in this case.

Still, if you want to go the raw JS way, all you have to do is iterate through all required radio inputs and construct the url using the input names and values as key=value pairs depending on which ones are selected.
4:57 pm on Sept 8, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts: 28
votes: 0


Thanks alias for the reply. I have done quite a few searches and can't really find anything, any chance you may be able to point me in the direction where I may be able to learn how to do this?
5:34 pm on Sept 8, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Here's a quick and dirty example I slapped together:


<html>
<head>
<title>Example</title>
</head>
<body>
<form action="">
<div>
<input type="radio" name="whereto" value="red-widgets">redwidgets
<input type="radio" name="whereto" value="blue-widgets">bluewidgets
<input type="button" id="submitBtn" value="Submit">
</div>
</form>
<script>
var submitBtn = document.getElementById('submitBtn');
submitBtn.onclick = function () {
// this = submitBtn
var i,
f = this.form,
n,
url = 'http://www.widgets.com/search.aspx?',
val = '',
whereto = f.whereto;
for (i = 0, n = whereto.length; i < n; i++) {
if (whereto[i].checked) {
val = whereto[i].value;
break;
}
}
url += val;
alert(url);
};
</script>
</body>
</html>
5:51 pm on Sept 8, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts: 28
votes: 0


Fotiman that is exactly what I was going for. In your example I get the alert box but it doesn't send the browser to [widgets.com...] when selected.

Any idea why?

What if you wanted to combine multiple radio buttons together to further refine the query, is that possible?
8:36 pm on Sept 10, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts: 28
votes: 0


Anyone?
10:45 pm on Sept 10, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


I get the alert box but it doesn't send the browser to

That's because my example was only showing you how to get the value. To send it to that location you would do:

window.location = url;

What if you wanted to combine multiple radio buttons together to further refine the query, is that possible?

Sure, you would just need to fetch the named checkboxes similarly to what it's doing here:

whereto = f.whereto;

For example, if your checkboxes where named 'foo', then you might do something like:

foo = f.foo;

And then loop through those items to get the value.
7:51 pm on Sept 13, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts: 28
votes: 0


Where is a good resource to learn this?
8:33 pm on Sept 13, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts: 28
votes: 0


<form action="vehicle_type">
<div>
<input type="radio" name="whereto" value="car">car
<input type="radio" name="whereto" value="suv">suv
<input type="radio" name="whereto" value="truck">truck
<input type="radio" name="whereto" value="van">van
</form>
<form action="vehicle_color">
<input type="radio" name="whereto" value="green">green
<input type="radio" name="whereto" value="red">red
<input type="radio" name="whereto" value="black">black
<input type="radio" name="whereto" value="yellow">yellow
</div>
</form>
<input type="button" id="submitBtn" value="Submit">
<script>
var submitBtn = document.getElementById('submitBtn');
submitBtn.onclick = function () {
// this = submitBtn
var i,
f = this.form,
n,
url = 'http://www.widget.com/search.aspx?find=',
val = '',
whereto = f.whereto;
for (i = 0, n = whereto.length; i < n; i++) {
if (whereto[i].checked) {
val = whereto[i].value;
break;
}
}
window.location = url + val;
};

</script>

I have figured out this much, I am trying to get it to crab both sets of radio buttons and combine them with an ampersand symbol, any help?
8:44 pm on Sept 13, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Is your intention really to have 2 separate form elements? I would assume these should both be in the same form. For example, I would have done something more like this:

<form action="http://www.widget.com/search.aspx" method="GET">
<div>
<input type="radio" name="vehicle_type" value="car">car
<input type="radio" name="vehicle_type" value="suv">suv
<input type="radio" name="vehicle_type" value="truck">truck
<input type="radio" name="vehicle_type" value="van">van
</div>
<div>
<input type="radio" name="vehicle_color" value="green">green
<input type="radio" name="vehicle_color" value="red">red
<input type="radio" name="vehicle_color" value="black">black
<input type="radio" name="vehicle_color" value="yellow">yellow
</div>
<input type="submit" id="submitBtn" value="Submit">
</form>


This gives you a fully functioning form for people who don't have JavaScript enabled. And there is no JavaScript required at all.
8:54 pm on Sept 13, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts: 28
votes: 0


No I want to be able to select green cars or green suvs and on the click of the button it sends the parameters like this:

/search.aspx?vehicle_type=car&vehicle_color=green

I'm not opposed to doing it with one form and the selections separated by a div, as long as the url has the parameters listed above.
1:35 pm on Sept 14, 2010 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:4966
votes: 10


Did you try my example? That is exactly what will happen.

When you submit a form that is using the GET method, all of the form values will be appended in the query string. There is no JavaScript needed.
3:16 pm on Sept 14, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 14, 2004
posts: 28
votes: 0


Thank you!