JavaScript - Problem With Radio Button And External Script

Hi, I'm having a problem trying to get my html web form to work. I have a list of 8 radio button options for people to choose one option with the last option being other - and then I want if the user clicks other that the text field box next to it becomes a required field and the form will not submit until this text field is filled in. If the user selects one of the other radio button options then the text field is not compulsory.

I am using a linked javascript validation file which checks that all fields on the form which I have stated as required - become required, but I am having problems getting this "Other" button and text field to work with it all and not have the submit continue without this text field being completed! any help would really be appreciated! Thanks in advance!

Hi, I want the user to choose one option in each of the radio group. But when I click only one button out of all 12 buttons, it allows the user to submit. How do I change it to a way that the user must click one option for each group in order to allow him/her to submit the form?

Javascript
Code:

function valbutton(thisform) 
{
    // place any other field validations that you require here
    // validate myradiobuttons
    myOption = -1;
    for (i=thisform.myradiobutton.length-1; i > -1; i--)
    {
        if (thisform.myradiobutton[i].checked)
        {
            myOption = i; i = -1;
        }
    }
    
    for (i=thisform.myradiobutton1.length-1; i > -1; i--)
    {
        if (thisform.myradiobutton1[i].checked)
        {
            myOption = i; i = -1;
        }
    }

    for (i=thisform.myradiobutton2.length-1; i > -1; i--)
    {
        if (thisform.myradiobutton2[i].checked)
        {
            myOption = i; i = -1;
        }
    }

    for (i=thisform.myradiobutton3.length-1; i > -1; i--)
    {
        if (thisform.myradiobutton3[i].checked)
        {
            myOption = i; i = -1;
        }
    }
    
    for (i=thisform.myradiobutton4.length-1; i > -1; i--)
    {
        if (thisform.myradiobutton4[i].checked)
        {
            myOption = i; i = -1;
        }
    }

    for (i=thisform.myradiobutton5.length-1; i > -1; i--)
    {
        if (thisform.myradiobutton5[i].checked)
        {
            myOption = i; i = -1;
        }
    }                    

    if (myOption == -1) 
    {
        alert("You must select a radio button");
        return false;
    }

    // place any other field validations that you require here
    thisform.submit(); // this line submits the form after validation
}

HTML

Code:

<p>Cookies</p>
<input type="radio" value="1st value" name="myradiobutton" class="style31" />Enable
<input type="radio" value="2nd value" name="myradiobutton" class="style31" />Enable<br />
<p>Java</p>                                
<input type="radio" value="3rd value" name="myradiobutton1" class="style31" />Enable
<input type="radio" value="4th value" name="myradiobutton1" class="style31" />Enable<br />
<p>Javascript</p>
<input type="radio" value="5th value" name="myradiobutton2" class="style31" />Enable
<input type="radio" value="6th value" name="myradiobutton2" class="style31" />Enable<br />                                   
<p>PHP</p>
<input type="radio" value="7th value" name="myradiobutton3" class="style31" />Enable
<input type="radio" value="8th value" name="myradiobutton3" class="style31" />Enable<br />
<p>C#</p> 
<input type="radio" value="9th value" name="myradiobutton4" class="style31" />Enable
<input type="radio" value="10th value" name="myradiobutton4" class="style31" />Enable<br />
<p>CSS</p>                                     
<input type="radio" value="11st value" name="myradiobutton5" class="style31" />Enable
<input type="radio" value="12nd value" name="myradiobutton5" class="style31" />Enable<br />                                                                                              
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
<input type="reset" name="reset" value="Clear" />

Hello,

I am trying to have my print button appear only once the script for my validation button has gone through without any errors. To do this, I used the following script in my validation button (I've truncated most of it since you get the point after two lines):

// hidden field
var lrcf = this.getField("LastRCFalse");

var ei = this.getField("Employee ID number");

if ( lrcf.value != ""){
var tempname = lrcf.value;
if (tempname == "Employee ID number")
{ei.setFocus();}}
else {
var ei = this.getField("Employee ID number");
if (ei.value != "" && (ei.value == "0000000" || ei.value < 1259)){
app.alert("Employee ID number, if entered, must be between 0001259 and 0999999")
ei.setFocus();}

else {
var city = this.getField("Effective date");
if (city.value == ""){
app.alert("Please enter Effective date")
city.setFocus();}
else {
var gmf = this.getField("Gender");
if (gmf.value != "M" && gmf.value != "F" ){
app.alert("Please select gender of employee")
gmf.setFocus();}

else {

// Making fields visible for printing
VisibleToPrint();
app.alert("Your form is ready to print. Please press the PRINT button on this form.",3)

The red part is where it all seems to be breaking apart. I've verified that none of the script before is incorrect and it all goes smoothly except that my print button does not appear afterwards. (The print button doesn't have any complicated script just a "execute a menu item" and is put as hidden in common properties so that no one can print before having gone through the verification).

Should I have created another print button which sits on top of the other one?

I am really new to this so any help would be greatly appreciated.

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>

Problem resolved. Please delete.

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.

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

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

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.

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

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