Bootstrap, Radio buttons to select URLs

[smallcompany]

I created a website based on the initial Bootstrap code. I haven't changed any of the code except adding some of CSS (separate custom file) for sole design purpose.

Then, I wanted to add radio buttons where a selected radio button represents a link to go to after hitting the submit button.
At first, I tried finding the complete solution at Bootstrap with no success. Then I searched the net, and found what I'm outlining below.

Here is the HTML code:

<form action="#" onsubmit="window.open(whichsite(this), '_self'); return false;">
<div class="radio">
<label><input type="radio" name="site" id="link1" value="www.example1.com" checked>Some text</label>
</div>
<div class="radio">
<label><input type="radio" name="site" id="link2" value="www.example2.com">Some text</label>
</div>
<input type="submit" class="btn btn-success" value="Some Value">
</form>

... and here is the javaScript code:

<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>

I have one question, asked in two ways:

1. Is there anything from the Bootstrap perspective that should/could be changed here for better?
2. Is there anything regardless Bootstrap that should/could be changed here for better?

With both questions I refer to both javaScript and HTML code.

Thanks

[skoff18]

if i were you.. i would use jquery. Which is so easier at pointing to specific element in your page.
Here's how you would do it with jquery :

function whichsite() {
 return $('input[name=site]:checked', '#formId').val();
}

This code is going to return the value of the selected radiobutton with the name "site" inside the form with the id "formId". So i suggest that you add a id to your form. Or you can tweak the code I gave you so you can use it with your "this" as parameter.

Hope it helps!

[Fotiman]

From the Bootstrap perspective, you might consider using a Button Group (http://getbootstrap.com/components/#btn-groups). Your markup would change to something like this:

<form action="#" onsubmit="window.open(whichsite(this), '_self'); return false;">
 <div class="form-group">
  <div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary active"><input type="radio" name="site" id="link1" value="www.example1.com" checked>Some text</label>
   <label class="btn btn-primary"><input type="radio" name="site" id="link2" value="www.example2.com">Some text</label>
  </div>
 </div>
<input type="submit" class="btn btn-success" value="Some Value">
</form>

(or <div class="btn-group btn-group-sm" data-toggle="buttons"> if you want smaller buttons)
It may or may not be ideal for your situation (make sure you include the Bootstrap JavaScript as well). Note, you need to apply the "active" class to the button that is checked by default.

As for the JavaScript code, I find that loops that count down are generally a little harder to read. But more importantly, you can simply return form.elements.site.value instead of stepping through the array of checkboxes. Only the "checked" radio button's value will be active, so:

function whichsite(form) {
 return form.elements.site.value;
}

Also, you don't need the type="text/javascript" attribute on the script tag.

Instead of an inline event handler for onsubmit in the form HTML, you could attach an event listener via JavaScript code instead. Change your form code:

<form action="#">

And in your JavaScript code, add this:

$("form").on("submit", function (e) {
 e.preventDefault();
 window.open(whichsite(this), "_self");
})

I'm assuming you're using jQuery if you're using Bootstrap (Bootstrap's JavaScript requires jQuery, so it's pretty much a given).

Also, consider what will happen for users with JavaScript disabled (they'll just end up refreshing the same page, unless you have some server side code to handle the redirect).

Hope that helps.

[Fotiman]

Note, my code for adding the submit handler to the form used a VERY generic "form" selector. You'd probably want to give your form an id and target that instead:

<form action="#" id="myForm">

$("#myForm").on("submit", function (e) {
 e.preventDefault();
 window.open(whichsite(this), "_self");
})

[smallcompany]

Thanks very much to all!

consider what will happen for users with JavaScript disabled

PHP?

[smallcompany]

Just found that since I have two separate forms, the second one does not work because the ID is identical to the first one.

How do I set two form IDs in the JavaScript?

Edit: Plus, it does not work in IE11. :(

Thanks

[smallcompany]

One more post... I found this to work with multiple forms:

<script>
$(function(){
 $('form').submit(function(event){
  event.preventDefault();
  window.location = $('input[type=radio]:checked').val();
 });
});
</script>

While it seems to be working in all four browsers I tested so far (Firefox, Chrome, IE, Opera), I still wonder if a JavaScript developer would approve it?

Thanks

[Fotiman]

Give each form a unique ID. Then you can target them just like you would with CSS:

$("#myFirstForm, #mySecondForm").on(...)

Alternatively, give both forms the same class and then you could target them that way (but it's invalid to have multiple elements with the same ID so make sure you correct that no matter what).

$(".myButtonGroupForm").on(...)

And then:

<form action="#" class="myButtonGroupForm">

[Fotiman]

Note, your last post will target ALL forms on the page where your JavaScript is included. That can be risky. Imagine you later add another form where you don't want this behavior? Instead, add a class and target that class. This way, only the elements that you explicitly want to pick up this behavior will get it.

[smallcompany]

Thanks very much for educating me further.

Still, why the script would fail in IE? It goes to /undefined page.

The later script has no such problem. I guess I could add form IDs to this one. (Edit: Actually not. I just tried and it broke IE again. It looks like if I use "form" IE works fine, if I get more precise and use IDs, it does not work)

Thanks

Last edit:
I added two forms with both single and double quotes. After correcting that, the last script worked.
I'm still curious what was breaking IE from the original script.

Thanks and I apologize for posting too fast.

[Fotiman]

Glad you got it working. :)