Learn VBA & Macros in 1 Week!

JavaScript - Help Needed. Radio Button --> Combo Box

Full Excel VBA Course - Beginner to Expert

Help Needed. Radio Button --> Combo Box	View Content

Full Excel VBA Course - Beginner to Expert

Open Text Box Next To Radio Button: Javascript Help Needed

Similar Tutorials

View Content

Dear All,

I am trying to design a from with radio buttons and text boxes which will accept text values upon clicking the radio buttons. So basically the textbox only appears when the radio button is clicked.
The problem I am facing is the textbox does not hide upon selecting different radio button.

Below I am posting the javascript and the associated html form for the same.
I would like to request some suggestions and directions for the same.

Regards

Code:

Javascript:
<script type="text/javascript">
  function show() {
  var i = 0;
  var el;
  while(el = document.getElementsByName('radio')[i++] ) {
	(document.getElementById('radio'+i).checked) ?
	document.getElementById('text'+i).style.display="block" :
	document.getElementById('text'+i).style.display="none"
	}
	}  
 </script>

Code:

<div id="SeqInput">
      	  <form method="post" action="the url to process this form" >
	<div>			
	  <label><input type="radio" name="seqinput" value="accession" id="radio1" onclick="show()"></label> NCBI accession number: <label for="accession"><input type="text" id="text1"></label><br>
	  <label><input type="radio" name="seqinput" value="gene"         id="radio2" onclick="show()"></label> NCBI Gene Name:        <label for="gene">     <input type="text" id="text2"></label><br>
	  <label><input type="radio" name="seqinput" value="file"            id="radio3"></label> Upload fasta sequence from file: <label for="file"><input type="file" id="file"></label><br> 
	  <label><input type="radio" name="seqinput" value="fasta"         id="radio4" onclick="show()"></label> Click to type in or copy/paste the fasta sequence:<br>
	  <label><textarea rows="10" cols="100" id="text3" style="display: none"> </textarea></label>  
	</div>    	
	</form>
    </div>

Form Validation Code Needed To Make Sure A Radio Button Is Selected

Similar Tutorials

View Content

here is the html code that i have

PHP Code:
<td valign="middle" valign="middle">
                                                <input type="radio" name="gender" id="genderM" value="Male" /> Male    
                                                <input  type="radio" name="gender" id="genderFM" value="Female" /> Female
                                            </td>

and here is the js funtion

PHP Code:
    var $j = jQuery.noConflict();
    function isValidEmail(str) {
       return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }
    function validateForm(){
            var firstName;
            var lastName;
            var email;
            var mobile;
            var comment;
            var error;

            firstName = $j('#firstName').val();
            lastName = $j('#lastName').val();
            email = $j('#email').val();
            mobile = $j('#mobile').val();
            comment = $j('#comment').val();
            if(firstName=='' || firstName.length < 3){
                error = 'Please Enter Your First Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(lastName=='' || lastName.length < 3){
                error = 'Please Enter Your Second Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }

            //mob
            //$jmob_pattern = '^\d{10}$j';
            if(mobile.length != 10 || isNaN(mobile)){
                error = 'Please Enter Your Mobile Number';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
                if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Email Address';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }

            if(comment.length < 5){
                error = 'Please Enter A Comment';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    }

Does anybody know how i check to see if the radio button is select and also can anybody tell me how i can check for an email in the correct format

the function isValidEmail in the above alows emails to pass through if they are in this format aaa@aaa. i only want them to go through if they are aaa@aaa.com

Thanks for your help if you give it

How To Add Radio Button Values Together Based On Radio Button Clicked?

Similar Tutorials

View Content

I have 4 rows in a table.

Each row consist of 4 radio buttons.

Each radio button per row has different values in it but has the same name (group)
ex:
<input type="radio" name="a" value="1">
<input type="radio" name="a" value="2">
<input type="radio" name="a" value="3">
<input type="radio" name="a" value="4">

<input type="radio" name="b" value="1">
<input type="radio" name="b" value="2">
<input type="radio" name="b" value="3">
<input type="radio" name="b" value="4">

and so on..

If I click radio button A with value 2, I want to output the total at the bottom as "2"..

Also, if I click radio button B with value 3, I want to output the total of A and B as 5

and so on..

How can I automatically calculate the answer based on which radio button was click?

update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery

Multiple Combo Boxes - Show All Records If Sub-combo Isn't Used

Similar Tutorials

View Content

Hello

I'm using the combo box selection menu by Elviro Mirko from this site (http://www.javascriptkit.com/script/...plecombo.shtml)

I have made amendments to show my own data, however what I would like to happen is if the user selects from the top combo only, then all the records would be shown, whereas selecting from the second combo merely 'drills down' and shows the records required. - Hope that makes sense.

The code is as follows:

Code:

// first combo box

	data_1 = new Option("Douglas - DIS", "$");
	data_2 = new Option("Douglas - COE", "$$");
	data_3 = new Option("Peel - DIS", "$$$");
	data_4 = new Option("Peel - COE", "$$$$");
	data_5 = new Option("Ramsey - DIS", "$$$$$");
	data_6 = new Option("Ramsey - COE", "$$$$$$");
	data_7 = new Option("Castletown - DIS", "$$$$$$$");
	data_8 = new Option("Castletown - COE", "$$$$$$$$");		
// second combo box

	data_1_1 = new Option("Registry Office Douglas", "-");
	data_1_2 = new Option("Broadway Baptist Church Douglas", "-");
	data_1_3 = new Option("Finch Hill Congregational Church Douglas", "-");
	data_2_1 = new Option("St Thomas's Church", "--");
	data_2_2 = new Option("St Barnabas Church", "--");
	data_2_3 = new Option("St George's Church", "--");

The HTML code is as follows:

Code:

<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">	
			
			<option value="">Select a Register...</option>
			<option value="Douglas - DIS">Douglas - DIS</option>
			<option value="Douglas - COE">Douglas - COE</option>
			<option value="Peel - DIS">Peel - DIS</option>
			<option value="Peel - COE">Peel - COE</option>
			<option value="Ramsey - DIS">Ramsey - DIS</option>
			<option value="Ramsey - COE">Ramsey - COE</option>
			<option value="Castletown - DIS">Castletown - DIS</option>
			<option value="Castletown - COE">Castletown - COE</option>
			

			</select>
<BR><BR>
			<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
			<option value="">Select a venue...</option>
			
			</select>

the link for the actual site is

http://www.manxbmd.com/cgi-bin/db.cg...m;db=marriages

If you choose Douglas-COE and search, then 0 records are found, if you choose Douglas-COE followed by St Thomas's then still 0 records are found but if you search the surname Allitson you'll see that there is a record there.

I'm not sure where I've gone wrong - I'm completely new to Javascript.

Any suggestions welcomed.

regards

Pendle

Using Combo Box To Create Second Combo Box And Add Second Selection To Session

Similar Tutorials

View Content

Hi Everybody

This is probably a very commonly asked question, however after much searching online I can't seem to find a straightforward answer. If anyone knows the code or a link to a place with a simple example it would be great.

What I have got is a form that a user has to fill out and submit (when validated all variables are stored in a session and emailed after multiple forms are completed), currently I have radio buttons, text boxes and a combo box/ drop down list (for location). All parts are working fine and validating fine. My problem is to do with the combo box//ddl. I have successfully validated the ddl so the user must select a location onsubmit and it is added to session and passed fine.

At the moment the ddl only has cities or towns in it however as I would like to include different states and possibly different countries I need a code that validates the state first and then only gives the cities/towns that are in that state (otherwise my ddl would be to large). I can do this with links however I can't seem to do it in a form.

I am trying to do it this way

DDL has list of all states that on mouseover/ onclick the list is revealed. onclick of a specific state populates another ddl with only the cities cities/ towns that are in that state and onclick of specific city selects the location whereby onsubmit the location is stored in the the session for submission by email

Thanks in advance for your help

I still have the following two major issues. 1) Firstly I need to be able to send the selection from the second combo box by php. 2) secondly I need the combo box to appear within the table. (I thought this should be easy, but for the life of me cannot figure out how to get the dynamic combo into my table inside the form)

I have managed to send the selection from the first combo box with the form and also I can send a selection from the second combo, however onsubmit regardless of what is selected in the second combo box it simply sends the last option not the one selected. I have spent many hours trying to figure out why this is the case to no avail.

I have included my code for anyone who may be able to help. Lastly when I have figured out these 2 (with a little help) I should be able to sort out the validation by myself. Please ignore any code that is not relevant

<html>
<head>

<script type="text/javascript">

var this1;

window.onload = function() {
if (!document.all) document.captureEvents(Event.CHANGE);
document.getElementById('myddl').onchange = readDDL1; }

function readDDL1() {
var ddlobj = document.getElementById('myddl');
var currentSelection = ddlobj.options[ddlobj.options.selectedIndex].value;
if (currentSelection == '') currentSelection = ddlobj.options[ddlobj.options.selectedIndex].text;
doDDL2(currentSelection);
}

function doDDL2(ddl1Selection) {

var existingDDL2;
if ((existingDDL2 = document.getElementById('myddl2')) != null) existingDDL2.parentNode.removeChild(existingDDL2);

var ddl2Options;
switch (ddl1Selection) {
case "Western Australia":
ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break;
case "Queensland":
ddl2Options = ["Please Select A Location", "Brisbane", "Gold Coast"]; break;
}

if (typeof ddl2Options == "object") {
ddl2 = document.createElement('select');

ddl2.id = "myddl2";
var forVar;
for (forVar in ddl2Options) {
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode(ddl2Options[forVar]));
ddl2.appendChild(newOption);

}
document.body.appendChild(ddl2);

}

document.testform.this1.value = ((ddl2Options[forVar]));

}

function checkFrequency() {
return ShowResults();

}

function validate(){
var digits="0123456789"
var temp

if (document.testform.location.selectedIndex == 0) {
alert("Please Select a State");
return false
}

if (document.testform.location2.selectedIndex == 0) {
alert("Please Select a Location");
return false
}

return true
}

</script>

<style type="text/css">
.td_freq { background-color:yellow;
height:40px;
text-align:center;
}
.td_sev { background-colorink;
height:40px;
text-align:center;
}
.td_wi { background-color:lightgreen;
height:40px;
text-align:center;
}
</style>

</head>
<body>

<FORM name="testform" action='./emlapd.php' method='post' onsubmit="return checkFrequency()">

<input type='hidden' name='this1'>

<table align="center" border="1" width="40%">

<tr><td><b>Current Worksite State:</b><font color="red">*</font></td>
<td>
<select name="location" width='53' id="myddl">
<option value="0">--- Please Select Your State ---                 & nbs p;                & n bsp;                                 & nbs p;        </option>
<option value="Western Australia">Western Australia</option>
<option value="Queensland">Queensland</option>

</select>

</td></tr>
<tr><td><b>Location:</b><font color="red">*</font></td>
<td>

</td></tr>

</table>

<tr>
<th colspan="2">
<input type="submit" name='submit' value="Submit" onclick= "return validate()">
</th>
<td colspan="10"> </td>
<th>
<input type='reset' name='reset' value='Clear Form'>
</th>
</tr>
</table>

</FORM>
</body>
</html>

Thankyou very much to everyone that may help

So I can place the DDL inside the form, however it places it at the end of the form. I want it somewhere in the middle (immediately following first combo box)

My other main issue is irregardless of the selection it simply posts the last option from the DDL not the one selected. Therefore I still want the second combo box to appear immediately below the first combo box and whatever option is selected from the second combo box I want to be posted with the rest of the form data.

If you have any other ideas that would be great

Obviously the reason I am still getting the same incorrect post is because the variable posted is still this1 from my code which reads the last value from the DDL. I have tried with all other variables to send as well ie ddl2 however still can't seem to send the selection.

So in its current state how can I send the selection and place the second DDL within the form??

Thank you

Get Radio Button Value?

Similar Tutorials

View Content

I don't exactly know how to word my issue.

Basically, I need it so that if a user selects 'option1' in the group 'group1' when they go to 'group2' is only gives them a certain selection to choose from. If they choose 'option2' in 'group1' they will get a different set to choose from.

My main dilemma is it must do this without them having to submit.

Radio Button Help

Similar Tutorials

View Content

All:

I need some help with a radio button code. It seems simple but I am really new at JavaScript so I need help. I have created a JavaScript code that has three radio buttons (High, Medium, and Low). When you click on high two text boxes appear so that an email address can be added.

What I need help with is making the text boxes disappear if someone accidentally click high and then went back to low or medium. Currently the High button stays clicked and the text boxes still show. Any help would be great.

Thanks,

Stephen

Code:

 <script type="text/javascript"> 
function showHide(el){ 
obj = document.getElementById(el).style; 
   (obj.display == 'none')? obj.display = 'block' : obj.display = 'none'; 
} 
</script> 
<form id="form1" name="form1" method="post" action=""> 
 <label> 
  <input type="Checkbox" name="High" value="High" onclick="showHide('group1')" /> High
  
 </label>

  

    <label> 
  <input type="Checkbox" name="Medium" value="Button" /> Mediun
  </label> 

  <label> 
  <input type="Checkbox" name="Medium" value="Button" /> Low
  </label> 
<p id="group1" style="display: none;"> 
    <label> 
    <b>friend1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/>
</label> 
    <br /> 
    <label> 
<b>friend2&nbsp;&nbsp;&nbsp</b><input type="text" name="textGroup1" value="@gmail.com" /> 
</label> 
    
  </p> 
  
</form>

Getting A Radio Button Value

Similar Tutorials

View Content

All,
I have the following code:
Code:

<form action="" name="myform" method="post">
<input type="hidden" id="picimages" name="picimages" value="<?php echo $resultsetstory['bigger_id']; ?>" />
  <p>
    <label>
      <input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetstory['picture_id']; ?>" />
      <?php
	  if($resultsetstory['title']<>""){
echo $resultsetstory['title'];
}else{
echo "Image 1";
}
?>
	  </label>
    <br />
    <label>
      <input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetpic2['picture_id']; ?>" />
      <?php
	  if($resultsetpic2['title']<>""){
echo $resultsetpic2['title'];
}else{
echo "Image 2";
}
?>
	  </label>
    <br />
	<input name="submit" type="button" value="Vote!" onclick="javascript:voteupdate(this.myform);"/>
  </p>
</form>

When I submit this, it goes to this function:
Code:

function voteupdate(obj) {
var poststr = "picimage=" + document.getElementById("picimage").value +
"&bigger_id=" + encodeURI( document.getElementById("bigger_id").value );
alert(poststr);
makePOSTRequest('voteresults.php', poststr);
   }

However I can't get the value of the radio group for the one that is selected. Can someone see what is wrong?

Thanks.

Js Visibility From Radio Button..?

Similar Tutorials

View Content

I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table...

it's so "Are you married?" "Yes" "No" (no is default checked)
when you hit yes I want 3 more rows like a collapse or extend feature...within the same table.

So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available...

do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think...
any help much appreciated.

Thanks!

Help With Radio Button Validation

Similar Tutorials

View Content

Hi everyone. I'm getting into javascript coding and i'm stumped with some problem about radio buttons. What I would like is to have a general function where I can pass in any group of radio buttons and have it return the textual value of the radio button selected. First, here is my code so far.

Code:

function Get_Radio_Selection(options)
{
   var choice = "";

   for (var index = 0; index <= options.length; index++)
      if (options[index].checked == true)
         choice = options[index].value;

   return choice;
}

Now here's a sample form:

Code:

<form name="form1">
   <input type="radio" name="food" value="Banana">Banana
   <input type="radio" name="food" value="Mango">Mango
   <input type="radio" name="food" value="Orange">Orange
   <input type="radio" name="food" value="Oatmeal">Oatmeal

   <input type="button" name="blah" value="Get Selection"
          onclick="Get_Radio_Selection(document.form1.food);">
</form>

My question is, when i run this function and pass it in the group of radio buttons by means of the onclick event handler, firefox 3.6.22 reports in the error console on line 22 that "options[index] is undefined". It seems that if i use the variable "index" more than one time it reports this error but if I take out the assignment to variable "choice" that it works just fine. I rewrote the function using a separate variable and this time it works perfectly:

Code:

function Get_Radio_Selection(options)
{
   var choice = "";
   var index;

   for (var i = 0; i < options.length; i++)
    {
      if (options[i].checked == true)
       {
         index = i;

         choice = options[index].value;
       }
    }

   return choice;
}

Notice the indexing variables in the "if" statement and the assignment to "choice" are different. Does anyone have any suggestions on why this happens? Thanks.

Restore Radio Button Value

Similar Tutorials

View Content

Hello,

I have a form which can be saved (using a database) and later edited.

When restoring data to the form , text fields are easy.

There is a simple (existing) JavaScript which restores an option that was selected from a pull-down (select one) menu:

Code:

  for (var q=0;q<document.Simple.Color.options.length;q++) {
  if (document.Simple.Color.options[q].value == document.Restored.Color.value)
   { document.Simple.Color.options[q]. selected  = true; break; }

I'm trying to make it work to restore a value to a radio button as well... but no luck:

Code:

  for (var q=0;q<document.Simple.Color.options.length;q++) {
  if (document.Simple.Color.options[q].value == document.Restored.Color.value) 
   { document.Simple.Color.options[q]. checked  = true; break; }

Any ideas?

Thanks in advance.

~Wayne

Javascript And Radio Button

Similar Tutorials

View Content

Hello, I am trying to implement a radio button option so that users can search specific sites such as google, yahoo, or bing from input box. Here's my code. Please help.

<script type="text/javascript">

</script>

<h1>Search Option</h1><br />
<input type="radio" name="search" id="google"/><a href="http://www.google.com" rel="nofollow" target="_blank"><img src="images/google.jpg" /></a>
<input type="radio" name="search" id="yahoo"/><a href="http://www.yahoo.com" rel="nofollow" target="_blank"><img src="images/yahoo.jpg" /> </a>
<input type="radio" name="search" id="bing" /><a href="http://www.bing.com" rel="nofollow" target="_blank"><img src="images/bing.jpg" /> </a>
<br /><br />

<form method="get" action="goSearch()" rel="nofollow" target="_blank">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search" />
</td>
</tr>
</table>
</div>
</form>

Radio Button Validation

Similar Tutorials

View Content

how would i check to see if my radio button is not checked. I know in javascript the term "checked" works. Is there a way to us unchecked?

here is what i am trying to figure out.

Code:

	with (thisform)
  {
  if(document.getElementById('m21').unchecked) 
  {
  window.alert('Please Verify Your Age')
  m21.focus();
   return false;}
  }

Radio Button Onclick

Similar Tutorials

View Content

hi guys

im trying to check whether a radio button is checked when i click it, but the javascript onlick event is not acting cool! when i click an unselected radio button i am informed that the unselected radio button i just clicked is in fact checked, when i should be getting the information the no, the radio button was not checked when i clicked it. any idea how to get the previous state of a radio button onclick?

Radio Button Values

Similar Tutorials

View Content

Hello I am very new to Java Script. I am working on a website which requires me to use it. The site is selling items that are priced depending on the size. There are 6 fixed sizes for the width and the length can come in any size 1 through 200. So that will be user input on the length and radio buttons on the width. I am trying to have the user put in the length and click a radio button for width and then calculate the price by multiplying them. I am trying to get 1 price to display right now just to test it but I can't figure out why it isn't working. Again I am fairly new at this so there might be multiple problems with my code. Thanks in advance for the help.
Code:

<script type = "text/javascript">
function buttoncheck(){
	var selection1 = document.menu.selection;
	if (selection1 == 60) {choice1()}
	if (selection1 == 50) {choice2()}
	if (selection1 == 25) {choice3()}
	if (selection1 == 10) {choice4()}
	if (selection1 == 4) {choice5()}
	if (selection1 == 2) {choice6()}
	
function choice1(){
	var len = Number(document.getElementById("length").value) || 0;
	var area1 = selection1 * len;
	var cost = 0;
	if (area1 == 60) { cost = 60}
	return cost;
	document.getElementById("TotalCost").innerHTML = "$" + cost.toFixed(2); 
}

Code:

<h4 class="auto-style3">Pricing Calculator:</h4>
<p>
<form method="post">
	<div class="auto-style1">
		<span class="auto-style2">LENGTH:</span>
		<input name="length" type="text" id="length" /><br />
</form>
	<div class="auto-style1">
	
<form name="menu">
<input type="radio" value="60" name="selection">60 inch</input>
<input type="radio" value="50" name="selection">50 inch</input>
<input type="radio" value="25" name="selection">25 inch</input>
<input type="radio" value="10" name="selection">10 inch</input>
<input type="radio" value="4" name="selection">4 inch label</input>
<input type="radio" value="2" name="selection">2 inch label</input>
</form>


&nbsp;</div>
	<p class="auto-style1">

			<input type="button" value="Calculate" onClick="buttoncheck()" </p>
</p>
<p>&nbsp;</p>
			&nbsp;<span id="TotalCost"></span><script type = "text/javascript">
		document.getElementById("TotalCost").innerHTML = "Total cost is $" + cost.toFixed(2);

Radio Button Vs. Check Box

Similar Tutorials

View Content

Hi all,

This code works to place a mark in a radio button (check one) in a "restored" form:

Code:

for (var q=0;q<document.Simple.Colors.length;q++) {
  if (document.Simple.Colors[q].value == document.Restored.Colors.value) 
    { document.Simple.Colors[q].checked =  true ; break; }

I'm curious why it won't work for a check box (check more than one):

I figured it would be the same... no?

Thanks,

~Wayne

How Do I Read A Radio Button Value

Similar Tutorials

View Content

I using the following to read the content of a text field but how do I read the content of a radio button ?

Code:

String.prototype.trim = function () {    //return this.replace(/^\s*/, "").replace(/\s*$/, "");
    return this.replace(/^\s+|\s+$/g, '').replace(/\s+/g,' ');
}

		var fID = document.getElementById('customerName'); fID.value = fID.value.trim();
		if (fID.value.trim().split(' ').length < 2) {
		document.getElementById('customerNameImg').innerHTML = redX;//
		} else {
		document.getElementById('customerNameImg').innerHTML = greenTick;//
		}

this is the part of my form code that i am having problems with
Code:

 <ul>
          <li class="<? if ($empty_Field == "previousClient") {?>emptyfield<? } else { ?>field<? } ?>"> Are you a Previous Client * </li>
          <li class="value">
            <div style="float: left;"><input type="radio" name="previousClient" id="previousClientY" value="Yes" <? if($previousClient == 'Yes') { echo 'checked'; } ?> onChange="checkValidFormInput();"> Yes 
			</div>
			<div style="float: left; padding-left: 20px;">
            <input type="radio" name="previousClient" id="previousClientN" value="No"  <? if($previousClient == 'No') { echo 'checked'; } ?> onChange="checkValidFormInput();"> No 
			</div>
 <div style="float: left; padding-left: 10px;" id="previousClientImg"></div><br style="clear:both"> 
          </li>
        </ul>

Radio Button Background

Similar Tutorials

View Content

How can I style the background of a radio button? I have a form where it validates the users has selected one of the radio group values. If they don't the group gets focus and I would like to highlight the radio group. I tried the below it it seems focus goes to the correct group but no background changes. Now I know you can change the background of radios and apply a border of you would like. What am I doing wrong woth this.
Code:

<script type="text/javascript">


function validate(){

document.forms[0].myradio[0].checked = true 


document.forms[0].myradio[0].style.border='2px dotted #00f';


document.forms[0].myradio[0].style.backgroundColor='#ffff99';




}


</script>
















<form name="test" name="theForm" onsubmit="validate()">
<input type="radio" name="myradio" />
<input type="radio" name="myradio"  />
<input type="radio" name="myradio" />
<BR>
<BR>
<BR>
<BR>

<input type="radio" name="myradio2" />
<input type="radio" name="myradio2"  />
<input type="radio" name="myradio2" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="submit" value="submit" name="submit">

</form>

Dom Toggle With Radio Button

Similar Tutorials

View Content

Hi,

Hit a snag creating code for toggling with radio buttons, alert debugs
return undefined for the radio button values. Would someone assist?

HTML
Code:

    <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" />
      <label for="is_new0" class="artist_radio_label">Yes</label>
      <input type="radio" name="artist"  onclick="toggleForm(this.value)" value="new" />
      <label for="is_new1" class="artist_radio_label">No</label>

From Document Head
Code:

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Add a Print</title>
<link rel="stylesheet" href="../c/forms.css" type="text/css" />
<script type="text/javascript" src="../j/global.js"></script>
<script type="text/javascript" src="../j/add_print.js"></script>

 
</script>
</head>

add_print.js
Code:

function toggleForm(artist) 

	{
	if (!document.getElementById) return false;
	var existing = document.getElementById("existing_artist");
	var newArtist = document.getElementById("new_artist");
	existing.style.display = "none";
	newArtist.style.display = "none";
	
	 if(this.value == existing){

               existing.style.display = "block";
       }else{


             newArtist.style.display = "block";

   		 }
 }


addLoadEvent(toggleForm);

global.js - Add Load Event
Code:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}



addLoadEvent();

Radio Button Validation

Similar Tutorials

View Content

Wondering how come this doesn't work any ideas? its validating that the radio buttons have been selected.

Code:

if ( ( form.q1[0].checked == false ) && ( form.q2[1].checked == false) && ( form.q3[2].checked == false )) { alert ( "Please Choose a " ); return false; }