Radio boxes to create url strings

Forum Moderators: open

Message Too Old, No Replies

Radio boxes to create url strings

silver4dracs

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

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

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

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

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

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

Anyone?

Fotiman

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

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

Where is a good resource to learn this?

silver4dracs

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

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

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

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

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

Thank you!