homepage Welcome to WebmasterWorld Guest from 54.242.18.190
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Radio boxes to create url strings
silver4dracs




msg:4197968
 7:31 pm on Sep 7, 2010 (gmt 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?

 

alias




msg:4198411
 9:59 am on Sep 8, 2010 (gmt 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.

silver4dracs




msg:4198581
 4:57 pm on Sep 8, 2010 (gmt 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?

Fotiman




msg:4198623
 5:34 pm on Sep 8, 2010 (gmt 0)

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>

silver4dracs




msg:4198637
 5:51 pm on Sep 8, 2010 (gmt 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?

silver4dracs




msg:4200269
 8:36 pm on Sep 10, 2010 (gmt 0)

Anyone?

Fotiman




msg:4200317
 10:45 pm on Sep 10, 2010 (gmt 0)

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.

silver4dracs




msg:4201339
 7:51 pm on Sep 13, 2010 (gmt 0)

Where is a good resource to learn this?

silver4dracs




msg:4201361
 8:33 pm on Sep 13, 2010 (gmt 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?

Fotiman




msg:4201369
 8:44 pm on Sep 13, 2010 (gmt 0)

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.

silver4dracs




msg:4201375
 8:54 pm on Sep 13, 2010 (gmt 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.

Fotiman




msg:4201621
 1:35 pm on Sep 14, 2010 (gmt 0)

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.

silver4dracs




msg:4201667
 3:16 pm on Sep 14, 2010 (gmt 0)

Thank you!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved