JavaScript - Radio Button Value Save To Database

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

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

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

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

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

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

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?

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>

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

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.

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