PDA

View Full Version : check default radio button onload



dsalo
Nov 20th, 2009, 05:48 AM
Hey All!
I've been having problems trying to figure this out and my nooby skills can only go so far... :)

Basically I have a page that allows a user to select a specific category which links them to another page that has a series of radio buttons. By default I want to have that category checked according to what they selected. I've been able to pass the category variable with no problem but can't get it to default check...
So far my Javascript looks like this:



<script type="text/javascript">
var category = category3

function autoForm(){
var searchForm = document.getElementById('myform');
var searchInput = searchForm.getElementsByTagName('input');
if(searchInput.value == category){
searchInput["group"].checked = true;
} else {
searchInput["group"].checked = false;
}
}

<script>


And so I'm trying to search with that function the value rather than the name. Here is my HTML:



<body onload="autoForm();">
<form id="myform" name="myform" action="#" method="POST">
<div align="center"><br>
<input type="radio" name="group" value="category1"> Milk<br>
<input type="radio" name="group" value="category2"> Butter<br>
<input type="radio" name="group" value="category3"> Cheese<br>
<input type="radio" name="group" value="category4"> Bread<br>
</div>
</form>
</body>
</html>


I'm not getting any javascript errors, but nothing is really happening. So ultimately I want it to default select whatever the category variable (in this case "category3") when the user opens up the page. I'm trying to learn javascript right now so I'd love to hear how this is failing and how to do it right.

I spent soooo long trying to figure this out. :eek:


[woot! first post]

abduraooft
Nov 20th, 2009, 10:21 AM
By default I want to have that category checked according to what they selected. I've been able to pass the category variable with no problem but can't get it to default check... How do you get that passed value?

dsalo
Nov 20th, 2009, 05:31 PM
I passed the value by placing the values in the URL on the previous page



http://mysite.com/index.php?category=category3


and grabbing them with:




function gup( name ) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}

var category = gup('category');

gusblake
Nov 20th, 2009, 06:31 PM
getElementsByTagName returns an array, so to check each radiobutton you need to loop through it.



for(i in searchInput) {
if(category==searchInput[i].value) {
searchInput[i].checked=true;
}
}


Also, make sure all string literals have quotes ("category3").

Edit: IE doesn't appear to support for..in loops:



var category = "category3"

function autoForm(){
var searchForm = document.getElementById('myform');
var searchInput = searchForm.getElementsByTagName('input');

for(i=0;i<searchInput.length;i++) {
if(searchInput[i].value==category) searchInput[i].checked=true;
else searchInput[i].checked=false;
}
}


Seems to work

dsalo
Nov 20th, 2009, 07:02 PM
Awesome, thanks!
Worked perfectly, don't know why I didn't realize that was giving me back an array.