Welcome to WebmasterWorld Guest from 54.163.61.66

Forum Moderators: open

Message Too Old, No Replies

Bootstrap, Radio buttons to select URLs

     
5:55 am on Mar 16, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2210
votes: 6


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
1:34 pm on Mar 16, 2015 (gmt 0)

New User

joined:Feb 21, 2015
posts: 3
votes: 0


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!
2:02 pm on Mar 16, 2015 (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: 5012
votes: 23


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.
2:05 pm on Mar 16, 2015 (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: 5012
votes: 23


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");
})
6:52 pm on Mar 16, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2210
votes: 6


Thanks very much to all!

consider what will happen for users with JavaScript disabled

PHP?
6:29 pm on Mar 17, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2210
votes: 6


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
8:44 pm on Mar 17, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2210
votes: 6


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
8:48 pm on Mar 17, 2015 (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: 5012
votes: 23


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">
8:50 pm on Mar 17, 2015 (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: 5012
votes: 23


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.
10:10 pm on Mar 17, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 2, 2006
posts:2210
votes: 6


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.
11:46 pm on Mar 17, 2015 (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: 5012
votes: 23


Glad you got it working. :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members