JavaScript - Check Default Radio Button Onload

Hello

Can anyone help with the following problem

On the following page

http://www.stroudskittles.co.uk/signingon.html

I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker)

If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems.

The Chained Menu works, however the IFrame Ticker does not display.

Both events ahave ben placed on the boady tag.

Can anyone advise how I can get both to display in Firefox

Can anyone

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>

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

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>

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.

Hi guys...I am new to javascript.....I need help with my code below.I need to change it to " the font size of a paragraph should only be changed if the "Magnified" button is selected AND the mouse cursor is over a paragraph. When the mouse moves over a paragraph, increase the font size by a factor of 3. When it is no longer over the paragraph, reduce the font back to its original size" HELP and thanks....

<html>
<head>
<title>Assignment 4</title>
</head>
<body>
<p>
<script launguage="javascript">
var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.body.style.fontSize = fontSize + "em";
}
</script>
</p>
<h2>Joseph&rsquo;s text zoom and radio buttons</h2>
<p>Click on below buttons and see the text getting zoomed in and out..!!</p>
<input type="radio" name="radio" value="fontSize -" onclick = "zoomOut()"/>
<label for="original">Standard</label>
<br><br>

<input type="radio" name="radio" value="fontSize -" onclick = "zoomIn()"/>
<label for="zoomed">Magnified</label>

</body>

</html>

Hello Friends,
i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content.
Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>

<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p>
<p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p>
<p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p>
</div>

<div id="div1" class="tab">
<p>this is div 1</p>
</div>

<div id="div2" class="tab">
<p>this is div 2</p>
</div>

<div id="div3" class="tab">
<p>this is div 3</p>
</div>

<div id="div4" class="tab">
<p>this is div 4</p>
</div>
</div>

<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');

/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}

/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}

hideTabs(); /* hide tabs on load */

/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>


Thank you for your help in advance.

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,


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

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

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

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>