JavaScript - Radio Button Click Problem

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

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>

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

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.

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

Hi,

I am trying to use the radio button to display the information for the users. For example, when I click radio button "1", the form should display 1 text box each for first name, last name and so on. When the user clicks on radio button 2, there should be text boxes displayed for user 1 and user 2 to enter their info(first name, last name and so on).

I looked at the forum, but couldn't find something similiar.Please advise.



Something like
================================
Number of Users 1 2 3

# if radio button 2 is selected then

User 1
First Name
Last Name

User 2
First Name
Last Name

================================

The code is as below:

<html>
<head>
<script type="text/javascript">

function showUser()
{

for(i=0;i<document.form.users.length;i++)
{
if (document.form.users[i].checked)
val=parseInt(document.form.users[i].value);
for(j=0;j<=val;j++)
{
document.form.write("<table cellSpacing=1 cellPadding=0 width=600 border=0>");
document.form.write("<tr>
<td width='20%' align='right'><font color="#660000"><b>First Name:&nbsp;</b></font></td>");
document.form.write("<td><input type='text' name='fname1' size='25' maxlength='25'></td></tr>");
document.form.write("<tr><td width='20%' align='right'><font color="#660000"><b>Last Name:&nbsp;</b></font></td>");
document.form.write("<td><input type='text' name='lname1' size='25'maxlength='25'></td></tr>");
document.form.write("</table>");

}
}

}

</script>
</head>
<form>
Check the number of users to display additional input fields.<br><br>

<input type="radio" name="users" value="1" onclick = "showUser()"/> 1<br/>
<input type="radio" name="users" value="2" onclick = "showUser()"/>2 <br/>
<input type="radio" name="users" value="3" onclick = "showUser()"/>3 <br/>

</form>

</html>

========================================================
Thanks in advance.

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>

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>

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.

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>