I am using this javascript code. and on button click I want that atleast one checkbox selection is required. do anyone have idea what I am doing wrong. I don't want to use jquery.
function check()
{
var flag = false;
for(var i=1;i<=4;i++)
{
var checkb = document.getElementById("check"+i);
if(checkb.checked)
{
flag = true;
break;
}
}
if(!flag)
alert("What is your interest \n(select at least one option)");
return flag;
}
</script>
Button Click Code is
<input type="submit" name="submit" value="Submit" onclick="return check();">
The code works fine. Do hou have id="check1" set on your checkbox tags?
Yes, your code works fine as noted by the comments above. However, you could do your check for...checks a little more cleanly - you're expecting "check0" - "check4" for the IDs. You could just grab them all and not worry about a set limit (odds are your code isn't working because at least one of the IDs you're using doesn't exist).
<input type="checkbox" id="check0" />
<input type="checkbox" id="check1" />
<input type="checkbox" id="check2" />
<input type="checkbox" id="check3" />
<hr/>
<input type="button" onclick="checkIt();" value="Check the Checks">
And some JS:
checkIt = function()
{
var checks = document.getElementsByTagName('input');
var hasCheck = false;
for(i in checks)
{
// Could also check for a classname here to narrow
// your result set.
if(checks[i].type == 'checkbox')
hasCheck |= checks[i].checked;
}
if(!hasCheck)
alert('You should check one!');
return hasCheck;
}
Related
I have two checkboxes in HTML called accepttermsandcond-checkbox and accepttermsandcond-checkbox and I made a Button called startusing-button
I want the startusing-button to stay disabled, if one of these checkboxes are not checked.
The problem is that it disables it right now in the beginning, but if I check both, it doesn't enable the button.
Note: even if I add document.getElementById('startusing-button').disabled = false; to the code it doesn't solve the issue
How could I make the button to be enabled only if both of the checkboxes are checked?
Edit: I forgot to mention that I have a lot of checkboxes and buttons. It would be ideal if the solution only affected these two checkboxes with one button, leaving the rest of the checkboxes and buttons alone.
var ebpDocumentCheckboxid = document.getElementById('document-checkboxid');
var ebpAcceptTermsandCondCheckbox =document.getElementById('accepttermsandcond-checkbox');
if (ebpDocumentCheckboxid.checked && ebpAcceptTermsandCondCheckbox.checked) {
}
else {
document.getElementById('startusing-button').disabled = true;
}
<input type="checkbox" id="document-checkboxid"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox"/>
<button type="button" id="startusing-button">CreateSubscription</button>
You have to trigger change of checkboxes.
Simply checking both checkboxes have checked or not, will work only on the loading of document. You have to repeat this process each time the checkbox status is changed.
I have modified your script a little bit.
Logic
Select all checkboxes using document.querySelectorAll('input[type="checkbox"]').
Add a change event on checkbox by looping this list using forEach.
Inside the change event, find the count of selected checkboxes.
If that matches to the length of total check box, enable the button, or disable it.
const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();
<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />
<button type="button" id="startusing-button">CreateSubscription</button>
Edit:
If you want to select only the two checkboxes, you can handle this in multiple ways. You can use some custom attribute with some unique value. Here in the below example I use identifier="my-custom-identifier" and make the inputs selection with document.querySelectorAll('input[identifier="my-custom-identifier"]'). This will check for all input elements with the identifier having value my-custom-identifier.
Why I use this approach is to make your solution a little more generic. You just have to use identifier="my-custom-identifier" in all inputs where you want to include for this checking.
Working Fiddle
const checkBoxes = document.querySelectorAll('input[identifier="my-custom-identifier"]');
const submitButton = document.getElementById('startusing-button');
checkBoxes.forEach((cb) => {
cb.addEventListener('change', checkButtonStatus);
});
function checkButtonStatus() {
const checkedCount = [...checkBoxes].filter((cb) => cb.checked);
submitButton.disabled = checkedCount.length !== checkBoxes.length
}
checkButtonStatus();
<input type="checkbox" id="document-checkboxid" identifier="my-custom-identifier" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" identifier="my-custom-identifier" />
<button type="button" id="startusing-button">CreateSubscription</button>
If you still want to make use of only 2 element by picking them with id, you could select them using ids. Like document.querySelector('input[id="document-checkboxid"]') and document.querySelector('input[id="accepttermsandcond-checkbox"]') and bind change event to them. Inside the change event, check whether both are checked inside the change function.
Working Fiddle
const checkBox1 = document.querySelector('input[id="document-checkboxid"]');
const checkBox2 = document.querySelector('input[id="accepttermsandcond-checkbox"]');
const submitButton = document.getElementById('startusing-button');
checkBox1.addEventListener('change', checkButtonStatus);
checkBox2.addEventListener('change', checkButtonStatus);
function checkButtonStatus() {
const allChecked = checkBox1.checked && checkBox2.checked;
submitButton.disabled = !allChecked;
}
checkButtonStatus();
<input type="checkbox" id="document-checkboxid" />
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" />
<button type="button" id="startusing-button">CreateSubscription</button>
EDIT#2: I updated the answer to have coverage both for required and optional checkboxes, as requested in comments.
EDIT: just noticed it still can be accessed with keyboard tab focus and fire the event. So not a perfect solution, note this.
This can be done with plain CSS:
button {
padding: 10px;
}
input[required]:not(:checked) ~ button {
background-color: #b0b0b0;
color: #d0d0d0;
border: 1px outset #808080;
pointer-events: none;
}
<form>
<label>ID:</label>
<input type="checkbox" id="document-checkboxid" required />
<label>T&C</label>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" required />
<hr />
<label>Something irrelevant:</label><input type="checkbox" name="optional_one" id="something" />
<label>Also optional:</label><input type="checkbox" name="optional_two" id="something else" />
<hr />
<button type="submit" id="startusing-button">CreateSubscription</button>
</form>
If i understood you correct you want the button to be only enabled when both checkboxes are checked, right? If so you could try something like this:
var ebpDocumentCheckboxid = document.getElementById("document-checkboxid");
var ebpAcceptTermsandCondCheckbox = document.getElementById(
"accepttermsandcond-checkbox"
);
var btn = document.getElementById("startusing-button");
const onCheckboxChanged = ()=>{
btn.disabled = (!ebpDocumentCheckboxid.checked) || (!ebpAcceptTermsandCondCheckbox.checked);
}
ebpDocumentCheckboxid.onchange = onCheckboxChanged;
ebpAcceptTermsandCondCheckbox.onchange = onCheckboxChanged;
I also added disabled="true" to the button so its disabled from the start.
Here is a codepen of a working example: https://codepen.io/jonas_weinhardt/pen/QWgoGzL?editors=1010
Edit:
You should probably use Nitheesh answer because its a much simpler and general approach!
Try this code, more simple and readable(I hope).
(()=>{
let checkboxes = [
document.querySelector('#document-checkboxid'),
document.querySelector('#accepttermsandcond-checkbox')
];
let button = document.querySelector('#startusing-button');
for(let checkbox of checkboxes) {
checkbox.addEventListener('click', changeStatus); // changeStatus function onclick
}
changeStatus(); // run changeStatus function automatically
function changeStatus(){
if(checkboxes.every(checkbox => checkbox.checked)) button.removeAttribute('disabled');
else button.setAttribute('disabled', 'true');
}
})();
<input type="checkbox" id="document-checkboxid"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox"/>
<button type="button" id="startusing-button">CreateSubscription</button>
try this,
i add value "disabled" to button and create two onclick method to get .checked status, and if both are true change button parameter "disabled=true" to "disabled=false"
<!DOCTYPE html>
<head>
</head>
<body>
<div id = "test">
<input type="checkbox" id="document-checkboxid" onclick="firstchb()"/>
<input type="checkbox" name="VAT" id="accepttermsandcond-checkbox" onclick="secondchb()"/>
<button type="button" id="button" disabled >CreateSubscription</button>
</div>
</body>
<script>
let ebpDocumentCheckboxid = null;
let ebpAcceptTermsandCondCheckbox = null;
function firstchb(){
ebpDocumentCheckboxid = document.getElementById('document-checkboxid').checked;
enableit();
}
function secondchb(){
ebpAcceptTermsandCondCheckbox = document.getElementById('accepttermsandcond-checkbox').checked;
enableit();
}
function enableit(){
if (ebpDocumentCheckboxid == true && ebpAcceptTermsandCondCheckbox == true) {
document.getElementById('button').disabled = false;
}
else {
document.getElementById('button').disabled = true;
}
}
</script>
</html>
I was wondering if there was a better way to go about enabled/disabled multiple checkboxes at once.
In the html I have two radio buttons to choose between all hair options and custom hair options, having the default all one disable the checkboxes while the custom one enables them.
This is what I've got so far that works (probably looks dumb, I apologize), but I'd like to know if there's a more efficient way to go about this? I'd like to do it as "small" as possible while still being easily readable/understandable for my own sake.
function checkHaOp(){
if (document.getElementById("hairOptionAll").checked){
document.getElementById("hairAuburn").disabled = true;
document.getElementById("hairBlack").disabled = true;
document.getElementById("hairBlonde").disabled = true;
document.getElementById("hairBrown").disabled = true;
document.getElementById("hairRed").disabled = true;
document.getElementById("hairOther").disabled = true;
}
else if (document.getElementById("hairOptionCustom").checked){
document.getElementById("hairAuburn").disabled = false;
document.getElementById("hairBlack").disabled = false;
document.getElementById("hairBlonde").disabled = false;
document.getElementById("hairBrown").disabled = false;
document.getElementById("hairRed").disabled = false;
document.getElementById("hairOther").disabled = false;
}
}
Preferably using javascript since I don't know jquery.
I'd also appreciate explanations of things since I am still learning.
You can add/use class like said #NiettheDarkAbsol
then something like that.
var inpck = document.getElementsByClassName("input-checkbox");
if (document.getElementById("hairOptionAll").checked) {
for(var i = 0; i < inpck.length; i++) {
inpck[i].disabled = true;
}
}
if (document.getElementById("hairOptionCustom").checked) {
for(var i = 0; i < inpck.length; i++) {
inpck[i].disabled = false;
}
}
Now your turn to refactor this :D
You can use
document.querySelectorAll('[id^=hair]')
It selects all elements that has an id which starts with "hair"
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="hairOptionAll">
<input type="checkbox" id="hairAuburn">
<input type="checkbox" id="hairBlack">
<input type="checkbox" id="hairBlonde">
<input type="checkbox" id="hairBrown">
<input type="checkbox" id="hairRed">
<input type="checkbox" id="hairOther">
</body>
<script>
const hairCb = document.querySelectorAll('[id^=hair]');
for (let i=0; i<hairCb.length; i++) {
hairCb[i].disabled = true;
}
</script>
</html>
Here's the optimized solution.
<div class="radio-btns">
All <input type="radio" id="hairOptionAll" name="hairOptionAll"/>
Custom <input type="radio" id="hairOptionCustom" name="hairOptionCustom"/>
</div>
<div class="hairOptions">
hairAuburn <input type="checkbox" id="hairAuburn" />
hairBlack <input type="checkbox" id="hairBlack" />
hairBlonde <input type="checkbox" id="hairBlonde" />
hairBrown <input type="checkbox" id="hairBrown" />
hairRed <input type="checkbox" id="hairRed" />
hairOther <input type="checkbox" id="hairOther" />
</div>
<script type="text/javascript">
const radioBtns = document.querySelector('.radio-btns');
radioBtns.children[0].checked = true;
radioBtns.addEventListener("click", (event) => {
radioBtns.children[0].checked = (event.target.id == 'hairOptionAll') ? true : false;
radioBtns.children[1].checked = (event.target.id == 'hairOptionCustom') ? true : false;
const allOptions = [...event.target.parentElement.nextElementSibling.children];
allOptions.map(option => ( option.checked = (event.target.id == 'hairOptionCustom') ? true : false ) );
});
</script>
Here is a complete working code you. To minimise the code we write to we need to use a class selector not an id - Give the same class to your radio button and then use a forEach loop to go through all the radio button. Add the class to your checkboxes as well.
To get all the checkboxes we can use forEach method.
Once you have all the radio button you need to listen for a change on a particular radio button and then we will check whether the radio button we have selected is checked and its id is all or custom.
To get the id of the actual radio button which was clicked we can use getAttribute method which return the id of checked radio button.
If our condition matches we will disable all the checkboxes or if its else then we enable all the checkboxes using forEach loop on the checkbox classes.
We will pass true or false as an argument to disable checkboxes function to avoid having have two loops
Live Working Example (I have added notes / comment on each line of code for your understanding as well)
//Enable disable checkbox
function disableChekbox(isChecked) {
let getHairOptions = document.querySelectorAll('.hairOptions') //get all checkboxes
getHairOptions.forEach(function(x) {
x.disabled = isChecked
})
}
let getHairRadio = document.querySelectorAll('.hairOptionAll') //get all radio buttons
//For each all radio buttons
getHairRadio.forEach(function(radio) {
//listen to change on radio
radio.addEventListener('change', function(e) {
if (e.target.checked && e.target.getAttribute('id') == 'hairOptionAll') {
//loop through all checkboxes
disableChekbox(true)
} else if (e.target.checked && e.target.getAttribute('id') == 'hairOptionCustom') {
//loop through all checkboxes
disableChekbox(false)
}
})
})
All <input type="radio" id="hairOptionAll" name="hairOptionAll" class="hairOptionAll" />
Custom <input type="radio" id="hairOptionCustom" name="hairOptionAll" class="hairOptionAll" />
<br>
<br>
hairAuburn <input type="checkbox" id="hairAuburn" class="hairOptions" />
hairBlack <input type="checkbox" id="hairBlack" class="hairOptions" />
hairBlonde <input type="checkbox" id="hairBlonde" class="hairOptions" />
hairBrown <input type="checkbox" id="hairBrown" class="hairOptions" />
hairRed <input type="checkbox" id="hairRed" class="hairOptions" />
hairOther <input type="checkbox" id="hairOther" class="hairOptions" />
I'm pretty new to JS and maybe this is a very banal questions but I still can't figure out what's wrong. I have this simple html code:
<span>1</span>
<input id="check1" type="radio" value="a1"/>
<span>2</span>
<input id="check2" type="radio" value="b2"/>
<span>3</span>
<input id="check3" type="radio" value="c3"/>
<span>4</span>
<input id="check4" type="radio" value="a4"/>
<span>5</span>
<input id="check5" type="radio" value="b5"/>
<input id="red" type="button" value="Go" onclick=""/>
What i would like to achieve is, based on the radio checked change the onclick property.
For example, if check1 and check2 are checked go to google.com, if check1 and check3 go to jsfiddle.net etcetera. So I wrote a simple Javascript:
window.onchange = function redirect(){
if (document.getElementById('check1').checked && document.getElementById('check2').checked) {
location.href='www.google.com';
// document.getElementById('red').onclick="www.google.com"
}
else if (document.getElementById('check1').checked && document.getElementById('check3').checked) {
location.href='www.jsfiddle.net';
// document.getElementById('red').onclick="window.open('www.jsfiddle.net')"
}
}
Here You can find a JS Fiddle.
What I thought to do was to set the onclick property like I did with an image, using getElementById and then setting his source, so I wrote document.getElementById('red').onclick="window.open('random page')" but for some reason that I can't understand it doesn't work.
Questions:
1) As you can see in my code i wrote a location.href='address' that obviously doen't wait for the user to click the button, so that's not a solution, how can I make this work?
2)Is there a way to make this piece of code more scalable? What I mean is, in the future if I want to add another radio, I would have to modify manually the code and insert another else if, I thought about something like:
var radio = document.getElementByName('radio') //not sure if this is the right getElement
for (var i=1; i<radio.lenght; i++){
if radio[i].checked{ //is this right?
for (var n=i+1; n<radio.lenght; n++){
if radio[n].checked{
document.getElementById('red').onclick="window.open('random page')"
}
}
}
Any suggestion to my code is welcome.
Try out this in JS Fiddle. It contains how you can listen the onclick event of a button and to get the checked value of a radio button.
HTML part:
<form action="">
<input type="radio" name="vehicle" value="Yes" id='yes'>Yes<br>
<input type="radio" name="vehicle" value="No" id='no'>No
</form>
<input id="red" type="button" value="let's go"/>
JS part:
document.getElementById('red').onclick = function() {
if (document.getElementById('yes').checked) {
alert('I have a Vehicle.');
} else if(document.getElementById('no').checked) {
alert('I don\'t have a Vehicle.');
} else {
alert('No answer.');
}
}
If you use radio buttons, and you want only one to be selectable to the user at a time you have to set the same name attribute to them.
You can also make use of the value property of radio buttons for storing the redirection URL.
Here is a more useful example for you.
HTML part:
<form action="">
<input type="radio" name='redirect' value='https://www.google.com/' id='google'>Google<br />
<input type="radio" name='redirect' value='http://www.jsfiddle.net/' id='jsFiddle'>JS Fiddle<br />
<input type="radio" name='redirect' value='https://www.facebook.com/' id='Facebook'>Facebook
</form>
<input id="red" type="button" value="let's go"/>
JS part:
document.getElementById('red').onclick = function() {
var options = document.getElementsByName('redirect'),
length = options.length,
i = 0;
for (i; i < length; i++) {
if (options[i].checked) {
window.open(options[i].value);
}
}
}
if (document.getElementById('check1').checked&&document.getElementById('check2').checked)
{
document.getElementById('red').onclick=function(){
window.location.href ='http://www.google.com';
};
}
This code binds the function to the onclick event of element with id='red'. So add a bunch of such conditions and change the onclick binding whenever any radio button is checked/unchecked.
I am having 100 Checkboxes on my web page. For testing purposes I want to tick all those boxes, but manually clicking is time consuming. Is there a possible way to get them ticked?
Perhaps a JavaScript or Chrome Console window, anything?
The most direct way would be to grab all your inputs, filter just the checkboxes out, and set the checked property.
var allInputs = document.getElementsByTagName("input");
for (var i = 0, max = allInputs.length; i < max; i++){
if (allInputs[i].type === 'checkbox')
allInputs[i].checked = true;
}
If you happen to be using jQuery—and I'm not saying you should start just to tick all your checkboxes for testing—you could simply do
$("input[type='checkbox']").prop("checked", true);
or as Fabricio points out:
$(":checkbox").prop("checked", true);
Pure JS method, don't use jQuery.. its just silly for something so trivial.
[].forEach.call( document.querySelectorAll('input[type="checkbox"]'),function(el){
el.checked=true;
}
);
Live Demo
To use it on any webpage you can paste this into the address bar
javascript:[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){el.checked=true});
then drag that to your bookmarks, and you have a bookmarklet. Just click it whenever you need to use it on a page.
querySelectorAll is your best choice here if you don't want jQuery!
var ele = document.querySelectorAll("input[type=checkbox]");
for(var i=0;i<ele.length;i++){
ele[i].checked = true;
}
//Done.
by using jquery, simple as that
$('input:checkbox').each(function () {
// alert(this);
$(this).attr('checked', true);
});
Or simply use
$('input:checkbox').prop('checked', true);// use the property
OR
$('input:checkbox').attr('checked', true); // by using the attribute
Just paste one of these one-liners to your browser console:
Tick all checkboxes:
document.querySelectorAll('input[type="checkbox"]').forEach(e => e.checked = true);
Untick all checkboxes:
document.querySelectorAll('input[type="checkbox"]').forEach(e => e.checked = false);
This JS code will check all checkboxed in your page:
var a = document.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<a.length; i++)
a[i].checked = true;
Live demo
All you have to do then is create a bookmarklet with it, say, with this bookmarklet maker, which generates this bookmarklet code:
javascript:var a=document.querySelectorAll('input[type="checkbox"]');for(var i=0;i<a.length;i++)a[i].checked=true;%E2%80%8B
Just add this URI to a bookmark in your bookmark toolbar, then all you have to do is click it whenever you need all the checkboxes in your page to be checked. =]
Multiple Check All & Uncheck All Boxes
All You Need to change is the tag 'name' to change the what its turing ON/OFF
<FORM>
<input type="checkbox" name="item0[]" onclick="CheckAll(this)" />
<input type="checkbox" name="item0[]" value="1" />
<input type="checkbox" name="item0[]" value="2" />
<input type="checkbox" name="item0[]" value="3" />
<br>
<input type="checkbox" name="item1[]" onclick="CheckAll(this)" />
<input type="checkbox" name="item1[]" value="a" />
<input type="checkbox" name="item1[]" value="b" />
<input type="checkbox" name="item1[]" value="c" />
<br>
<input type="checkbox" name="item2" onclick="CheckAll(this)" />
<input type="checkbox" name="item2" value="a1" />
<input type="checkbox" name="item2" value="b2" />
<input type="checkbox" name="item2" value="bc" />
</FORM>
<script>
function CheckAll(x)
{
var allInputs = document.getElementsByName(x.name);
for (var i = 0, max = allInputs.length; i < max; i++)
{
if (allInputs[i].type == 'checkbox')
if (x.checked == true)
allInputs[i].checked = true;
else
allInputs[i].checked = false;
}
}
</script>
I provided answer to this question at Check all Checkboxes in Page via Developer Tools
In short you can do it from dev tools console (F12) by:
$$('input').map(i => i.checked = true)
or
$$('input[type="checkbox"').map(i => i.checked = true)
The following code will toggle all checkboxes. I think this is useful in case you want that feature. If you check a box it will uncheck that box. I know this doesn't answer the question technically but I wanted to put it up here because it's what I use. Thanks for the comment. I hope this answer is better suited to your pallette.
//Select All Checkboxes On Page
allSelects = document.querySelectorAll('input[type="checkbox"]');
for(i=0;i<allSelects.length;i++){
allSelects[i].click();
}
function selectAll(elem)
{
for (i = 0; i < elem.length; i++)
elem[i].checked = true ;
}
On Click of a button call this method and pass the name of the element(checkboxes-they all should be same named).
I know nothing of JavaScript.
I had to add a group of two radio buttons to an HTML form with values "yes" and "no".
Now I need to make them "required"
There are several other required fields in the form and this piece of JavaScript:
<SCRIPT LANGUAGE="JavaScript">
<!--
reqd_fields = new Array();
reqd_fields[0] = "name";
reqd_fields[1] = "title";
reqd_fields[2] = "company";
reqd_fields[3] = "address";
reqd_fields[4] = "city";
reqd_fields[5] = "state";
reqd_fields[6] = "zip";
reqd_fields[7] = "phone";
reqd_fields[8] = "email";
reqd_fields[9] = "employee";
function validate(form_obj) {
if (test_required && !test_required(form_obj)) {
return false;
}
It was done by someone else, not me.
What I did is just added my field to this array, like this:
reqd_fields[10] = "acknowledge";
However it doesn't seem to be working.
Please guide me as I am totally ignorant when it comes to JavaScript.
Why don't you just make one selected by default then one will always be selected.
A link to your page or a sample of your HTML would make this easier, but I'm going to hazard a guess and say that the values in the array match the "name" attribute of your radio button elements.
If this the case, "acknowledge" should be the name of both radio buttons, and to make things easier, one should have the attribute "checked" set to "true" so there is a default, so you'll get a value either way.
So, something like this:
<input type="radio" name="acknowledge" value="yes" /> Yes <br/>
<input type="radio" name="acknowledge" value="no" checked="true" /> No <br/>
I know question is ancient but this is a simple solution that works.
<script type="text/javascript">
function checkForm(formname)
{
if(formname.radiobuttonname.value == '') {
alert("Error: Please select a radio button!");
return false;
}
document.getElementById('submit').value='Please wait..';void(0);
return true;
}
</script>
<form name="formname" onsubmit="return checkForm(this)"
<input type="radio" value="radio1" name="radiobuttonname" style="display:inline;"> Radio 1<br>
<input type="radio" value="radio2" name="radiobuttonname" style="display:inline;"> Radio 2<br>
<input type="submit" value="Submit">
</form>
Without seeing your HTML and more context of your validate function it's unclear exactly what you're looking for, but here's an example of how to require a selected value from a radio group:
<form name="form1">
<input type="radio" name="foo"> Foo1<br/>
<input type="radio" name="foo"> Foo2<br/>
</form>
<script type="text/javascript">
var oneFooIsSelected = function() {
var radios = document.form1.foo, i;
for (i=0; i<radios.length; i++) {
if (radios[i].checked) {
return true;
}
return false;
};
</script>
Here is a working example on jsFiddle.
I always recommend using jQuery validate seems better to me than trying to re-invent the wheel