JavaScript - Operation With Radio Button Value

I am ignorant in java scripting. I want to use the following java script to create the radiobutton in obiee reporting. This java script will change the regular prompt to radio button,however I do not know how to debug if it is working.

Waiting for kind reply.

Anil
PHP Code:
<script type="text/javascript">

function getElementsByClass(searchClass,node,tag) {
    
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

var tables = getElementsByClass('DashboardPromptViewTable',null, 'table');

for (var table = 0; table < tables.length; table++){

    var stringFunc = '';
    var selects = tables[table].getElementsByTagName('select');
    
    if ( selects.length == undefined || selects.length == 0 || selects[0].name === 'Match'){
        if (debug === 1) { document.write("No selects found.  Continue to next record."+"<BR>");}
        continue;  // This DB Prompt doesn't have any select statements
    }
    
    var spans = getElementsByClass('minibuttonOn',tables[table],'span');
    
    spans[0].style.display="none";
    stringFunc = String(spans[0].getElementsByTagName('a')[0].onclick);
    stringFunc = stringFunc.substr(stringFunc.indexOf('{')+1, stringFunc.length - 2 - stringFunc.indexOf('{'));
    
    for (var s =0; s < selects.length; s++){
        var new_form = document.createElement('form');
        var options  = selects[s].getElementsByTagName('option');
        new_form.name = selects[s].name+"_radio"; 
        new_form.id   = selects[s].id+"_radio";
        for (var o=0; o<options.length; o++) {
            var new_input       = document.createElement('input');
            new_input.type      = 'radio';
            new_input.value     = options[o].value;
            new_input.name      = selects[s].name+"_radio";
            if(selects[s].selectedIndex == o){
                new_input.checked = true;
            }
            var onClickStringFunc = "var sel = document.getElementById(this.name.substr(0,this.name.length-6));" +
                                    "if ( sel == null){"+
                                        "return;"+
                                    "}"+
                                    "var opts = sel.getElementsByTagName('option');"+
                                    "for( var opt = 0; opt < opts.length; opt++){"+
                                        "if( opts[opt].value == this.value){"+
                                            "sel.selectedIndex = opt;"+
                                        "}"+
                                    "}";                                
            new_input.onclick = new Function(onClickStringFunc + stringFunc);
            var new_text        = document.createTextNode(options[o].innerHTML);
            new_form.appendChild(new_input);        
            new_form.appendChild(new_text);
        } // end options for loop
        selects[s].parentNode.insertBefore(new_form,selects[s]);
        selects[s].style.display="none";
    } // end selects for loop
} // end table foor loop
</script> 

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>

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!

I'm trying to make radiobuttons with a javascript function that gets called when a button is selected to make an image appear depending on what they click. However, after looking it up for a while I have nothing since some tell me to do document.formName.name.value; some tell me to use an id with my buttons and just use a document.getElementByID(""); etc.

This is for a project and we havent used parameters yet and I dont know how to implement them in the HTML as well

This is my code:

function classchoice()
{
if(document.getElementById('mage') == true)
{
classtype = "<img class='display' src='mage.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
if(document.classes.classes.paladin == true)
{
classtype = "<img class='display' src='paladin.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
if(document.classes.classes.hunter == true)
{
classtype = "<img class='display' src='hunter.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
if(document.classes.classes.rogue == true)
{
classtype = "<img class='display' src='rogue.jpg'>";
document.getElementById("picture").innerHTML=classtype;
}
}

This is the HTML:

<form name="classes">
<input type="radio" name = "classes" id="mage" onmousedown="classChoice();"> <img src = "mage.jpg" />
<input type="radio" name = "classes" id = "Paladin" onmousedown="classChoice();"> <img src = "Paladin.png" />
<input type="radio" name = "classes" id = "hunter" onmousedown="classChoice();"> <img src = "hunter.PNG" />
<input type="radio" name = "classes" id = "rogue" onmousedown="classChoice();"> <img src = "rogue.jpg" />
</form>


I hope it's readable because I copy and pasted my code and the indentations are a bit messed up

Hi hope someone here can help me with a problem i'm stuck on. Basically I have 3 radio buttons and one of them has to be selected otherwise display a error message but I cant figure it out.

Here is my failed attempt:
Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["name"].value;
var y=document.form1.difficulty.value;

if (x==null || x=="")
  {
  	alert("First name must be filled out");
  	return false;
  }
if (y==false)
{
	alert(y);
	return false;	
}
}
</script>
</head>
<body>
<div id="horizon">
<div id="content">
<img src="images/logo.jpg" width="649" height="410"></div>
<div id="content2"><form name ="form1" method ="post" action ="game.php" onSubmit="return validateForm()" >

Name: <input type ='text' name='name' />
<br />
<Input type = 'Radio' Name ='difficulty' value= '1' />Easy

<Input type = 'Radio' Name ='difficulty' value= '2'  />Medium

<Input type = 'Radio' Name ='difficulty' value= '3'  />Hard
<br /><Input type = "Submit" Name = "Submit" VALUE = "Submit">
</form></div></div>
</body>
</html>

Thanks in advance

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 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;}
  }

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

i need to add an alert if the male is not selected in following after clicking on submit button
Code:

<html><head>
</HEAD><BODY>
<br><form name="feedback" method=post>
Your Gender: <input type="radio" name="gender" value="male" id="male" /> Male <input type="radio" name="gender" value="female" id="female"CHECKED> Female</td>
<input type='button' value='Submit' />
</form></BODY></HTML>

I have the following code which I want to make a selection and the value should reflect in the text box and the text box should take on that value for future calculations.

Code:

<!-- Row 13, Col 1 Order Value -->
<tr><td colspan="2" align="right">Delivery Options: 
<input type="radio" name="sapo" value="35" onclick="deliveryCost('35')" /> R35 - SA Post Office 
<input type="radio" name="sapo" value="80" onclick="deliveryCost('80')" /> R80 - Speed Services 
<input type="radio" name="sapo" value="150" onclick="deliveryCost('150')" /> R150 - Courier Services 
</td>

<!-- Row 13, Col 2 Order Value Box-->
<td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="delivery" size="10" readonly="readonly" />
</td></tr>

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">
<!--
function goSearch(){
//search according to checked radio button
}
-->
</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>

As the code example below shows, I have three radio buttons that perform an javascript action when selected.

Code:

<script language="javascript"> 
function OnProductClick(product) 
{	
	if (product.value == "Car")
	{			
		// do something
	}
	else if (product.value == "Boat")
	{
		// do something else..
	}
	else if (product.value == "Train")
	{
		// do else
	}
}
</script> 

<p>Select option
	<input type="radio" name="product" onclick="OnProductClick(this)" value="Car">Car</input>
	<input type="radio" name="product" onclick="OnProductClick(this)" value="Boat"> Boat</input>
	<input type="radio" name="product" onclick="OnProductClick(this)" value="Train">Train</input>
</p>

This setup is triggerred by a click, clicking multiple times on the same radio button will yield multiple calls to the OnProductClick function. This last part is what I would like to prevent. Say a user selects the option 'car' and then for some reason clicks on the same option again, this will lead to the OnProductClick function being executed twice. How can I prevent the second execution?

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?

I'm trying to get the value of a radio button when clicked.

I'm dynamically creating these radio buttons while populating a table like this:


Code:

var rad
for(blah blah blah){
insert array data into table...
insert array data into table...
insert array data into table...
rad = document.createElement('input');
		rad.setAttribute('type', 'radio');
		rad.setAttribute('name', 'options');
		rad.setAttribute('value', id);
		rad.onclick = function() { doSomething() }; 
		cell.appendChild(rad);
}

If I'm in the doSomething function, how do I access the value or ID of the radio button?

Thanks!

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.