JavaScript - Radio Button Is Selected Then Show Text Box

Hey javascript newbie,

Im trying to figure out how to add different radio if its selected or not

example:

Radio_Button1 value="5": Selected
Radio_Button2 value="15": Not Selected
Radio_Button3 value="25": Selected
Radio_Button4 value="35": Selected

var addingitup = ??? and im lost????

here is the html code that i have

PHP Code:
<td valign="middle" valign="middle">
                                                <input type="radio" name="gender" id="genderM" value="Male" />&nbsp;Male&nbsp;&nbsp;&nbsp;&nbsp;
                                                <input  type="radio" name="gender" id="genderFM" value="Female" />&nbsp;Female
                                            </td> 


and here is the js funtion

PHP Code:
    var $j = jQuery.noConflict();
    function isValidEmail(str) {
       return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
    }
    function validateForm(){
            var firstName;
            var lastName;
            var email;
            var mobile;
            var comment;
            var error;
            
            firstName = $j('#firstName').val();
            lastName = $j('#lastName').val();
            email = $j('#email').val();
            mobile = $j('#mobile').val();
            comment = $j('#comment').val();
            if(firstName=='' || firstName.length < 3){
                error = 'Please Enter Your First Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            if(lastName=='' || lastName.length < 3){
                error = 'Please Enter Your Second Name';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
        
            //mob
            //$jmob_pattern = '^\d{10}$j';
            if(mobile.length != 10 || isNaN(mobile)){
                error = 'Please Enter Your Mobile Number';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
                if(email=='' || !isValidEmail(email)){
                error = 'Please Enter Your Email Address';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            
            if(comment.length < 5){
                error = 'Please Enter A Comment';
                $j('#errormsg').html('<p class="errors">'+ error +'</p>');
                return false;
            }
            return true;
    } 


Does anybody know how i check to see if the radio button is select and also can anybody tell me how i can check for an email in the correct format

the function isValidEmail in the above alows emails to pass through if they are in this format aaa@aaa. i only want them to go through if they are aaa@aaa.com

Thanks for your help if you give it

Dear Javascript programmers,

Do you have an example of a Javascript something like this:

A dropdownlist with values "one" and "two". The radio button is not visible (as a start).
- If you have selected "one" from the dropdown list, then a radio button will appear.
- If you have selected "two" from the dropdown list, then a radio button will NOT appear.

Thanks,

Cornelis
Gouda - The Netherlands

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>

Hello everyone

Background
I have an electronics site on which I have a code generator.
Im an stuck on how to acheive something.

I will simplify what I want to do, so I can then adapt it to my code.
I have a paragraph of text on the web page, on which I want to change some words with in the paragraph depending on 2 radio buttons.

Example (radio buttons & short paragraph):

(Radio Button) Apples (checked)
(Radio Button) Bananas
"Welcome to jakes fruit shop.
You have selected apples today"
(apples being the word that would change if the banana radio button is checked)

Here is the code generator if your interested.
http://www.jakeselectronics.net/conf...erator877A.php
What I actually want to do is put other 'fixed' text in the input text area (near botton of page) with only the config line changing.

And If I can be shown how to do the short example above, i think I will be able to edit my generator and get it to do what i want it to do.

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!

Dear All,

I am trying to design a from with radio buttons and text boxes which will accept text values upon clicking the radio buttons. So basically the textbox only appears when the radio button is clicked.
The problem I am facing is the textbox does not hide upon selecting different radio button.

Below I am posting the javascript and the associated html form for the same.
I would like to request some suggestions and directions for the same.

Regards

Code:

Javascript:
<script type="text/javascript">
  function show() {
  var i = 0;
  var el;
  while(el = document.getElementsByName('radio')[i++] ) {
	(document.getElementById('radio'+i).checked) ?
	document.getElementById('text'+i).style.display="block" :
	document.getElementById('text'+i).style.display="none"
	}
	}  
 </script>

Code:

<div id="SeqInput">
      	  <form method="post" action="the url to process this form" >
	<div>			
	  <label><input type="radio" name="seqinput" value="accession" id="radio1" onclick="show()"></label> NCBI accession number: <label for="accession"><input type="text" id="text1"></label><br>
	  <label><input type="radio" name="seqinput" value="gene"         id="radio2" onclick="show()"></label> NCBI Gene Name:        <label for="gene">     <input type="text" id="text2"></label><br>
	  <label><input type="radio" name="seqinput" value="file"            id="radio3"></label> Upload fasta sequence from file: <label for="file"><input type="file" id="file"></label><br> 
	  <label><input type="radio" name="seqinput" value="fasta"         id="radio4" onclick="show()"></label> Click to type in or copy/paste the fasta sequence:<br>
	  <label><textarea rows="10" cols="100" id="text3" style="display: none"> </textarea></label>  
	</div>    	
	</form>
    </div>

So I need some help with figuring out how to reset both my text boxes when I click a different radio button so that I can give another value in the textbox area. I am trying to do it without a reset button. Any helpful ideas? I am just confused with the process of resetting the values of both the text boxes in the code.Hmmm......lol I feel like the answer is to put it inline in the <input> tag...

Code:

<body>

  <div id="content">
    <h1>Convert temperature</h1>
        
    <input type="radio" name="conversion_type" id="to_celcius" onclick="document.getElementById('degrees_celcius').disabled=this.checked;"  />From Fahrenheit to Celcius<br />
    <input type="radio" name="conversion_type" id="to_fahrenheit" onclick="document.getElementById('degrees_fahrenheit').disabled=this.checked;"  />From Celcius to Fahrenheit<br />
    <br />
    
    <label>Degrees Fahrenheit:</label>
    <input type="text" id="degrees_fahrenheit" class="disabled" /><br />
    <label>Degrees Celcius:</label>
    <input type="text" id="degrees_celcius"  class="disabled"/><br />
    <br />
   
    <input type="button" id="convert" value="Convert" /><br />
    <br />        
  </div>
  
</body>

I have 4 rows in a table.

Each row consist of 4 radio buttons.

Each radio button per row has different values in it but has the same name (group)
ex:
<input type="radio" name="a" value="1">
<input type="radio" name="a" value="2">
<input type="radio" name="a" value="3">
<input type="radio" name="a" value="4">

<input type="radio" name="b" value="1">
<input type="radio" name="b" value="2">
<input type="radio" name="b" value="3">
<input type="radio" name="b" value="4">

and so on..

If I click radio button A with value 2, I want to output the total at the bottom as "2"..

Also, if I click radio button B with value 3, I want to output the total of A and B as 5

and so on..

How can I automatically calculate the answer based on which radio button was click?

update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery

Hey,

I've got the following problem:

I want to edit this code:

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.pp"><img src="http://blog.bastian.info/wp-content/uploads/2010/02/facebook-glossy-logo.jpg"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

So that after they click the button that triggers the facebook share, 7 seconds after they click it, some text appear and the picture they click disappears.

Cheers

like for example i have text areas named upload1 and upload2

when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts"

Hey everyone, I cant seem to get this submitForm Validator to work. It needs to see if one of the two radio buttons are selected. I just cant seem to get it to work, anyone know whats wrong? Thanks.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Concert</title>
<meta http-equiv="content-type" content="text/html;
	charset=iso-8859-1" />
<script type="text/javascript">
/* <![CDATA[ */
function setFormFocus() {
	document.forms[0].visitor_name.focus();
}

function validateIt() {
				if(document.forms[0].visitor_name.value == ""
				|| document.forms[0].phone.value ==""
				|| document.forms[0].email.value ==""
				|| document.forms[0].area.value ==""
				|| document.forms[0].feet.value ==""
				|| document.forms[0].bedrooms.value ==""
				|| document.forms[0].price.value ==""){
				
					window.alert("You must enter enter information in all text boxes");
					return false;	
				}
function submitForm(){
var radioSelected = false;
for (var i=0; i<5; ++i) {
if (document.forms[0].contactHow[i].checked == true) {
radioSelected = true;
	break;
}
if (radioSelected == false){
window.alert("you");
return false;
}
else
return true;
}
}
}
/* ]]> */
</script>


</head>
<body onload="setFormFocus();">
<h1>Real Estate Inquiry</h1>
<form action="FormProcessor.html" method="get" onsubmit="return validateIt(); onsubmit="return submitForm();"
enctype="application/x-www-form-urlencoded">
<p>Name<br />
<input type="text" name="visitor_name" size="50" value="Enter your name" onclick="if (this.value == 'Enter your name') this.value = '';" /></p>
<p>E-mail address<br />
<input type="text" name="email" size="50" value="Enter your e-mail address" onclick="if (this.value == 'Enter your e-mail address') this.value = '';" /></p>
<p>Phone<br />
<input type="text" name="phone" size="50" value="Enter your phone number" onclick="if (this.value == 'Enter your phone number') this.value = '';" /></p>
<p>Area of town<br />
<input type="text" name="area" size="50" value="What are of town are you interested in?" onclick="if (this.value == 'What are of town are you interested in?') this.value = '';" /></p>

<p>Property <select name="property_type">
	<option value="unselected">Select a Property Type</option>
	<option value="condo">Condos</option>
	<option value="single">Single Family Homes</option>
	<option value="multi">Multifamily Homes</option>
	<option value="mobile">Mobile Homes</option>
	<option value="land">Land</option>
</select>
Sq. feet <input type="text" name="feet" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>Bedrooms <input type="text" name="bedrooms" size="5" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
Maximum price <input type="text" name="price" size="12" value="???" onclick="if (this.value == '???') this.value = '';" /> </p>
<p>How should we contact you? <input type="radio" name="contactHow"value="call_me" /> Call me
<input type="radio" name="contactHow" value="e-mail_me" />
E-mail me</p>
<p><input type="submit" /></p>
</form>




</body>
</html>

I'm making a javascript game for a digital media class and I'm having a hard time figuring out how to code this. The idea is that there's three similar images, one that's different and the user must select the image that's different by selecting the radio button below it and pressing the Submit button.

So in the if/else statement, I want it to be programmed so that if the correct answer is selected and then submitted, it will take you to another webpage. If an incorrect answer is selected, I want an alert to pop up and say Sorry, that's Incorrect. Here's the coding I have so far, none of which is working.

Code:

<script type="text/javascript">
function processAnswer()
{

  for (i = 0; i <= 3; i++)
  {
	if (document.myForm.radSize[i].checked == true)
	{
	  size = document.myForm.radSize[i].value;
	} // end if
  } // end for loop
  alert("You Selected a Button")
} // end 


</script>

And in the body...

<div id="imagediv"><br /><br /><center>
<form name = "myForm" action="">
<table width="500" border="0">
  <tr>
    <td><center><img src="images/image2.png" /><br />
    <Input type = radio Name = r1 Value = "1" >
</center>
    </td>
    <td><center><img src="images/image1.png" /><br />
    <Input type = radio Name = r1 Value = "2" >
</center>
    </td>
    <td><center><img src="images/image2.png" /><br />
    <Input type = radio Name = r1 Value = "3" >
</center></td>
  </tr>
</table><br /><br />
<center><input type = "button"
           value = "Submit"
           onClick = "processAnswer()"/>
</center>

Any help would be greatly appreciated, I've never worked with javascript before so I'm having a really hard time!

When a particular radio option is selected and the user presses the submit button, based on what is selected I want a particular lightbox to popup [like an alert].

The JavaScript below is what I used to turn images I created into radio buttons so I could have my own custom styles instead of using the default DOM version.

Any help is appreciated.



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<LINK REL=StyleSheet HREF="global.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">

// Leave next 2 lines as is. Customization is a few lines down.
var RadioCheckedImage = new Image();
var RadioUncheckedImage = new Image();

// Customization section:
// Specify the relative or absolute URL of each image. Examples:

RadioCheckedImage.src = "images/radio_on.png";
RadioUncheckedImage.src = "images/radio_off.png";

// No other customizations needed.
function RadioClicked(radioid,radiosetname,formid) {
// - first, uncheck all radio buttons of the set
var form = document.getElementById(formid);
for( var i = 0; i < form.length; i++ ) {
   if(form[i].name == radiosetname) {
      document.getElementById(form[i].id).checked = false;
      document.getElementById("Image"+form[i].id).src = RadioUncheckedImage.src;
      }
   }
// - then, check the clicked button
document.getElementById(radioid).checked = true;
document.getElementById("Image"+radioid).src = RadioCheckedImage.src;
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[@name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
		
      alert('One of the radio buttons is checked!');
    }
  });
});
</script>
</head>

<body>
	<div id="container">
	<img class="main_pic" src="images/cain.jpg" alt="..." />
        <img class="herman_slice" src="images/herman.png" alt="..." />
        <img class="cain_slice" src="images/cain.png" alt"..." />
        <img class="is_slice" src="images/is.png" alt="..."  />
        <img class="what_slice" src="images/what.png" alt="..."  />
        
		<!-- Form -->
		<span style="display:none;">
        <form id="MyFormID">
	    <input type="radio" name="thisradio" value="yes" id="RadioFieldID1">
            <input type="radio" name="thisradio" value="yes" id="RadioFieldID2">
            <input type="radio" name="thisradio" value="yes" id="RadioFieldID3">
            <input type="radio" name="thisradio" value="yes" id="RadioFieldID4">
        </form>
		</span>
        <!-- Start of Form -->
        <div class="radio_section">
        <img id="ImageRadioFieldID1" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID1','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="smart_slice" src="images/smart_slice.jpg" alt="..."  />
		<img id="ImageRadioFieldID2" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID2','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="smart_slice" src="images/dumb_slice.jpg" alt="..."  />
        <img id="ImageRadioFieldID3" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID3','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="average_slice" src="images/average_slice.jpg" alt="..."  />
        <img id="ImageRadioFieldID4" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID4','thisradio','MyFormID')" style="cursor:pointer;">
        <img class="idk_slice" src="images/idk_slice.jpg" alt="..."  />
        </div>
		<!-- End of Form -->
        <img class="submit_btn" src="images/submit_btn.jpg" alt="..."  />
        
		
        
    </div>
</body>
</html>

My goal is that when I click on the submit button, I just want to display an alert box with the values selected, and also look at this in the console.log.
Can anyone help me? Thanks.

Code:

<html>
<head>

</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(init);

function init() {
$ ("#t").submit(function() {
    var g = showCheckedValues();
    console.log(g);
    alert(g);

});


function showCheckedValues() {
// Gather all values of checked checkboxes with name "bedrooms".
var checked = $('input[name=bedrooms]:checked').map(function() {
return this.value;
}).get();
}}
</script>
<body>

        <form id="t">
            <input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
            <input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
            <input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
            <input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
	    <input type="submit" name="save-changes"></input>
        </form>

</body>
</html>