JavaScript - Setting A Variable Using A Radio Button

I really thought this would work, a user goes to a page, selects a value from a select box then clicks a link to run a report using that hidden variable as a parameter. I am attempting to place the value in the URL to pass it. I'm sure the javascript is working, and maybe it's the HTML I've messed up - not sure.
Here is the javascript (the alert does return the correct value):
Code:

function OnChangeDay() {
	//assign the day id to the hidden variable $day
	x=eval(document.getElementById("day_loc_id_select").value)
	
	if(x) {	
        document.getElementById("test_day_id").value=x;
    } else {
        document.getElementById("test_day_id").value=0;
    }
	// test
	alert(document.getElementById("test_day_id").value)  
}

Here is the calling HTML:
Code:

<input type="hidden" name="test_day" id="test_day_id" value="">

 <select name="day_loc_id" id="day_loc_id_select"  
              onchange="OnChangeDay()"> 
 <option></option>
        <?= form_options($day_loc_options) ?>
</select>

And here is the HTML that should send the value, but I get day= (nothing)
Code:

<a href='/depts/edoptions/excel_extract.php?ex=2&day=<? echo $test_day ?>'>SLIP Data to Excel</a>

Can anyone point out where I've messed up?
Thanks

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.

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.

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>

Ok...so here is what I have:

Code:

function myClass() {
		this.checkLogin = function(name,pwd) {
			if(name.length > 0 && pwd.length > 0) {
				$.ajax({async: false,
								 type: "post",
					 				url: "url",
						 dataType: "json",
								 data: "data",
			 				success: this.parseData});
			}
		}
		this.parseData = function(data) {
			this.status = data.status;
			alert(this.status);
		}
		this.getStatus = function() {
			alert(this.status);
		}
}

Everything works above. The first alert shows that this.status was set to 'error'. However, if I call myClass.getStatus(), I get undefined. How can I get the parseData function to set the variables in the parent function?

Thanks!

hi,
how I can execute this operation :

for example
x=a+b

where "a" it can have value 0 or 1 based on the selection of the radio button.

when a user select 1 on the radio button x=1+b when user select 0 x=0+b .

please help me.

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?

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>

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>

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

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

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

I am looking for some help similar to this old post: http://www.codingforums.com/showthread.php?t=19588

I want my radio buttons to become submit buttons as well. So when a user clicks on a radio button it submits the action and refreshes the page accordingly. As of now using only using onclick="this.form.submit()" the page only refreshes with no change.

Here is a copy of the entire form. It is a custom shipping options form (I did not create it). Any help would be appreciated.

Code:

<!-- Custom shipping form -->
<form action="" method="post" name="update_shipping">

              <table width="300">
      <tr>
        <td><label>
          <input  <?php if (!(strcmp($_SESSION['shippingmethod'],"1"))) {echo "checked=\"checked\"";} ?> name="grpshipping" type="radio" id="grpshipping_0" value="1" checked="checked" onclick="this.form.submit()"/>
          Ground Shipping</label></td>
        <td class="style261"><?php echo date("m/d/Y",$grounddelivery);?></td>
        <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
			echo number_format($row_rsshippingprices['Ground'] + ($row_rsshippingpricesover21['Ground'] * ($varWeightover)) ,2);
			} else {
			echo number_format($row_rsshippingprices['Ground'],2);
			} ?></td>
        </tr>
        <?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") == 0) {//show other shipping options ONLY if a ground shipping only item is not in the cart ?>
      <tr>
        <td><label>
          <input  <?php if (!(strcmp($_SESSION['shippingmethod'],"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="2" id="grpshipping_1" onclick="this.form.submit()" />
          Fedex 3 Day</label></td>
        <td class="style261"><?php echo date("m/d/Y",$fedex3delivery);?></td>
        <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
			echo number_format($row_rsshippingprices['Fedex3'] + ($row_rsshippingpricesover21['Fedex3'] * ($varWeightover)) ,2);
			} else {
			echo number_format($row_rsshippingprices['Fedex3'],2);
			} ?></td>
        </tr>
      <tr>
        <td><label>
          <input  <?php if (!(strcmp($_SESSION['shippingmethod'],"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="3" id="grpshipping_2" onclick="this.form.submit()"/>
          Fedex 2 Day</label></td>
        <td class="style261"><?php echo date("m/d/Y",$fedex2delivery);?></td>
        <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
			echo number_format($row_rsshippingprices['Fedex2'] + ($row_rsshippingpricesover21['Fedex2'] * ($varWeightover)) ,2);
			} else {
			echo number_format($row_rsshippingprices['Fedex2'],2);
			} ?></td>
        </tr>
      <tr>
        <td><label>
          <input  <?php if (!(strcmp($_SESSION['shippingmethod'],"4"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="4" id="grpshipping_3" onclick="this.form.submit()"/>
          Next Day PM</label></td>
        <td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
        <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
			echo number_format($row_rsshippingprices['ONPM'] + ($row_rsshippingpricesover21['ONPM'] * ($varWeightover)) ,2);
			} else {
			echo number_format($row_rsshippingprices['ONPM'],2);
			} ?></td>
        </tr>
        <tr>
        <td><label>
          <input  <?php if (!(strcmp($_SESSION['shippingmethod'],"5"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="5" id="grpshipping_4" onclick="this.form.submit()"/>
          Next Day AM</label></td>
        <td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
        <td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
			echo number_format($row_rsshippingprices['ONAM'] + ($row_rsshippingpricesover21['ONAM'] * ($varWeightover)) ,2);
			} else {
			echo number_format($row_rsshippingprices['ONAM'],2);
			} ?></td>
        </tr>
      </table>

      <table class="eC_ButtonWrapper" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td align="left"><center>Choose an option above and click update to change your shipping preference.<br /><b>PLEASE BE SURE AND PRESS UPDATE IF YOU CHANGE YOUR SHIPPING OPTION<br /><br /><input type="image" name="Update_shipping" id="Update_shipping" value="Update_shipping" alt="Update_shipping" src="WA_eCart/Images/Nautica/Btn4_EN_update.gif" class="eC_ImageButton"  /></center></td>
				</tr>
			</table>
      <?php } //end of show if ground ship item is not in the cart?>
      <?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") <> 0) { ?>
      <font color="red">The cart contains a Ground Shipping only item, this order can only be shipped ground</font><br /><br />
	  <?php } ?>
</form>
<!-- End of Custom shipping form -->

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.