|
JavaScript - Radio Buttons That Lead To Other Pages When Selected
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! Similar TutorialsHey 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>
Hey, I need help with a javascript function to show a div when 3 "Yes" radio buttons are clicked. Heres my code: Code: <form> <ul id="quiz-list"> <li>1. My bed partner complains that I snore. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>2. My bed partner says I hold my breath while asleep. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>3. I wake at night gasping for breath. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>4. I have no energy in the daytime. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>5. I'm tired all the time. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>6. I wake up at night with a dry mouth. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>7. I often wake in the morning with a headache. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>8. I'm at least 20 Ibs. overweight. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>9. I have high blood pressure. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>10. I sweat a lot at night. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>11. I wake up with my heart pounding. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>12. I wake up with my heart skipping beats. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>13. I'm losing interest in sex. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>14. I can't stay awake during the day. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>15. I can't concentrate on my work. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>16. I have had work accidents because I'm tired. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>17. I'm irritable most or all of the time. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>18. My neck collar size is larger than 17". <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>19. I've fallen asleep while driving at night. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> <li>20. I have to pull off the road to nap. <input id="checkme" name="snore" type="radio" value="Yes" />Yes <input id="checkme" name="snore" type="radio" value="No" />No</li> </ul> If you answered YES to 3 or more of the above questions you may have Sleep Apnea - a potentially serious breathing disorder that can lead to heart attack, stroke, or high blood pressure in later life. <div id="extra"> <!--cforms name="Quiz Form"--> </div> </form> Please follow these steps in my jsfiddle: 1. click on the (open grid) link and select option "13", buttons A to N would appear 2. click on the select all answers button, all buttons A to N would turn green. 3. Now click on the open grid again and select option "5". As you can see all the buttons from A to 5 are now selected (Have all turned green). 4. Now go back to grid and choose option 13. As you can see all buttons A to N would be selected. I don't want this to happen. What should happen is that the 5 buttons selected before the option change should remain selected and the other 8 buttons should go back being unselected, but I do not know how to do this. I tried including this in the selectAll() function but it did not work: Code: $('.answerBtns:hidden').removeClass('answerBtnsOn').addClass('answerBtnsOff');
Does anyone have any ideas? Code is in jsfiddle, click [here][1] Thank You [1]: http://jsfiddle.net/C7vcQ/5/ Hi Experts .. not sure if this is the right forum. However here is my question: I have a date field with 25 values (prepopulated Radio Buttons) where we are asking the members to select one day to volunteer. Once a member selects a day we would like to disable that Radio button value (Greyed out) for other members. So basically out of 25 available days we would like to disable values as soon as a member selects one. The field is on a classic ASP form with SQL Server backend. How can I accomplish the above? Please advice. Regards Vinny Greetings Programmers. I'm a graphics artist by trade but I also dabble in web design. I registered to this forum because I need your help. I've been handed a web project at work - to build an intranet site. My coding skills in HTML are sufficient to get the job done and I can plug in some JS and trobleshoot where needed but I've hit a wall with regard to one seemingly simple piece of code - I can't find a script anywhere that will generate a radio button that will, once selected, stay that way pretty much forever...or until I delete the listing on the page where these buttons will sit. I realize this isn't the concept behind these buttons but I need it to function this way because I'd like it to serve as a quick visual notification that a given employee review has been completed. These reviews will remain online for up to several months because there will be three reviews per employee over the course of that time. The selected buttons will indicate the reviews that are complete while the unselected ones will indicate which ones are still pending. I'd like the various levels of management viewing this information to know instantly, via the buttons, where we are with these reviews. So, that's my question, can a radio button be scripted to stay selected indefinitely once it's been clicked on? Thank you in advance for any help. It's greatly appreciated. - Sgt. Spanky 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>
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???? I am new to this kind of scripting, so I have not done it before, I have tried to find solutions on the net but none have worked. I have a 'contact us' form, which includes 2 radio buttons to select how they wish to recieve their reply... the first radio is 'email' the second radio is 'phone' When the 'phone' radio is selected, i want the div including a drop downbox to appear to ask what time to recieve a call, but when the 'email' radio is selected, this div does not appear. This is the script for this section. . .. ... <span>Best way to reply:</span> <input type="radio" name="reply" value="Email" id="reply_0" /> E-mail <BR /> <div style="margin-left:270px;"><input type="radio" name="reply" value="Phone" id="reply_1" onclick=""/>Phone</div> <br/> <div id="timehide"><span>Best time to get hold of you:</span> <select> <option value="Any">Any</option> <option value="06:00 - 10:00">06:00 - 10:00</option> <option value="10:00 - 12:00">10:00 - 12:00</option> <option value="12:00 - 14:00">12:00 - 14:00</option> <option value="14:00 - 16:00">14:00 - 16:00</option> <option value="16:00 - 18:00">16:00 - 18:00</option> <option value="18:00 - 20:00">18:00 - 20:00</option> </select></div> ... .. . if anyone could help me it would be greatly appreciated!!! Cheers, Ben! I am new to this kind of scripting, so I have not done it before, I have tried to find solutions on the net but none have worked. I have a 'contact us' form, which includes 2 radio buttons to select how they wish to recieve their reply... the first radio is 'email' the second radio is 'phone' When the 'phone' radio is selected, i want the div including a drop downbox to appear to ask what time to recieve a call, but when the 'email' radio is selected, this div does not appear. This is the script for this section. . .. ... <span>Best way to reply:</span> <input type="radio" name="reply" value="Email" id="reply_0" /> E-mail <BR /> <div style="margin-left:270px;"><input type="radio" name="reply" value="Phone" id="reply_1" onclick=""/>Phone</div> <br/> <div id="timehide"><span>Best time to get hold of you:</span> <select> <option value="Any">Any</option> <option value="06:00 - 10:00">06:00 - 10:00</option> <option value="10:00 - 12:00">10:00 - 12:00</option> <option value="12:00 - 14:00">12:00 - 14:00</option> <option value="14:00 - 16:00">14:00 - 16:00</option> <option value="16:00 - 18:00">16:00 - 18:00</option> <option value="18:00 - 20:00">18:00 - 20:00</option> </select></div> ... .. . if anyone could help me it would be greatly appreciated!!! Cheers, Ben! Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> I'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message. Code:
<!DOCTYPE html>
<html>
<head>
<title> Conversions of Weight and Length</title>
<script type="text/javascript">
function clearMe()
{
var _s=top;
var _d=_s.document;
_d.open();
_d.write("");
_d.close();
}
function main()
{
var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");
if(repeat==true)
{
convert();
}
else
{
alert("Your program has been terminated!");
self.close();
}
}
function convert()
{
var unit, direction, value, result, original_units, new_units;
document.write("<br/><br/>")
document.write("Weight and Length conversion menu" + "<br/><br/>");
document.write("1. convert length" + "<br />");
document.write("2. convert weight" + "<br />");
document.write("3. convert volume" + "<br />");
unit = window.prompt("select conversion type: ");
if ((unit<0) || (unit>3))
{
alert("Select Menu option 1, 2, or 3!");
unit = window.prompt("Select conversion type: ");
}
switch (unit)
{
case '1':
direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
if (direction =='1')
{
original_units = "meters"; new_units = "meters";
}
else {
new_units = "feet"; original_units = "meters";
}
break;
case '2':
direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />");
if (direction =='1')
{
original_units = "pounds"; new_units = "kilograms";
}
else {
new_units = "pounds"; original_units = "kilograms";
}
break;
case '3':
direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
if (direction =='1')
{
original_units = "gallons"; new_units = "liters";
}
else {
new_units = "gallons"; original_units = "liters";
}
break;
}
value = window.prompt("Enter value to be converted:")
switch(unit)
{
case '1':
result = feet_meters(value, direction);
break;
case '2':
result = pounds_kilograms(value, direction);
break;
case '3':
result = gallons_liters(value, direction);
break;
}
document.write(value + original_units + " = " + result + new_units);
}
function choose_direction(option1, option2)
{
var direction;
document.write(option1);
document.write(option2);
do
{
window.prompt("Select a conversion direction");
return direction;
}
while ((direction!='1') || (direction !='2'));
}
function pounds_kilograms(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(2.2046);
else
return parseFloat(value)*parseFloat(2.2046);
}
function gallons_liters(value, direction)
{
if (direction == '1')
return parseFloat(value)*parseFloat(3.7854);
else
return parseFloat(value)/parseFloat(3.7854);
}
function feet_meters(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(3.2808);
else
return parseFloat(value)*parseFloat(3.2808);
}
</script>
</head>
<body>
<h1> weight and length conversion </h1>
<script type="text/javascript">
convert();
main();
</script>
</body>
</html>
On my website I have a radio button as any other normal radio button. <input type="radio" name="crime" value="4" id="4" class="submit"> is there any way to get rid of this radio button and click something for example <tr> <td>Blah blah</td> <td>Blah Blah</td> </tr> is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section. hello, this is my first attempt in javascript. im trying to make custom radio buttons here is the code i have: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.hide {display:none;}
.radio {width:16px;height:16px;}
</style>
<script type="text/javascript">
// declare variables or different states
var off = 'images/check-off.png';
var on = 'images/check-on.png';
var radioImage = document.createElement('img');
function replaceRadios(){
var radios = document.getElementsByName('radio1');
radios.type = 'radio'
for (r = 1; r < radios.length; r++) {
// if radio is checked configure the img src to var on
if (radios[r].type = 'radio' && radios[r].checked) {
radioImage.src = on;
radioImage.className= 'radio on';
} else {
// otherwise configure the img src to var normal/off and give it a class of radio
radioImage.src = off;
radioImage.className= 'radio off';
}
// give the image an id of radio
radioImage.className = 'radio';
radioImage.onclick= radioStates;
radios[r].parentNode.insertBefore(radioImage,radios[r]);
// hide the radio button to show image
radios[r].className = 'hide';
}
}
function radioStates(r) {
var radios = document.getElementsByName('radio1');
if (radios.checked = true) {
radioImage.setAttribute("class", "radio on");
radioImage.src = on;
} else if (radios.checked = false) {
radioImage.setAttribute("class", "radio off");
radioImage.src = off;
} else {
radioImage.setAttribute("class", "radio off");
radioImage.src = off;
}
}
setTimeout("replaceRadios()", 0);
</script>
</head>
<body>
<form name="radiotest">
<input type="radio" id="radio1" class="radio" name="radio1" />
<input type="radio" id="radio2" class="radio" name="radio1" />
<input type="submit" id="submit" name="submit" />
</form>
</body>
</html>
If anyone could help me, I would greatly appreciate it. Im trying to configuere a form that a. a radio buttons that allow the user to choose between quarters, nickels, dimes and pennies. and show image when click on my radio button im confused on how to get the image to display whenthey click on the radio button On my website I have a radio button as any other normal radio button. <input type="radio" name="crime" value="4" id="4" class="submit"> is there any way to get rid of this radio button and click something for example <tr> <td>Blah blah</td> <td>Blah Blah</td> </tr> is there any code i can put in the <tr> tag so if i click that section it will act as a radio button and when its selected change the background of the tr section. I'm Confused. My HTML: <form action="mail.php" class="contactForm" name="cform" method="post"> <div class="left"> <h1>Insurance Details</h1> <label>Type of Cover:</label> . . . <span class="gender-missing"><br />Please select your gender.<br /></span> <label>Gender:</label> <input class="radio" id="gender" name="gender" type="radio" value="Male" /> Male <input class="radio" id="gender" name="gender" type="radio" value="Female" /> Female Script.js: $('.contactForm').submit( function(){ //statements to validate the form var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; var digitNum = /^([0-9])/; var num1 = document.getElementById('tel'); var num2 = document.getElementById('mobile'); var email = document.getElementById('email'); var dollarUnit = document.getElementById('amount_cover'); var gender = document.getElementsById('gender'); if((document.cform.gender[0].checked== false)&&(document.cform.gender[1].checked== false)) {$('.gender-missing').show(); } else {$('.gender-missing').hide();} if((document.cform.smoke[0].checked== false)&&(document.cform.smoke[1].checked== false)) {$('.smoke-missing').show(); } else {$('.smoke-missing').hide();} if((document.cform.residency[0].checked== false)&&(document.cform.residency[1].checked== false)) {$('.residency-missing').show(); } else {$('.residency-missing').hide();} if (!filter.test(email.value)) { $('.email-missing').show(); } else {$('.email-missing').hide();} if (document.cform.name.value == "") { $('.name-missing').show(); } else {$('.name-missing').hide();} if (document.cform.address.value == "") { $('.address-missing').show(); } else {$('.address-missing').hide();} if (!digitNum.test(num1.value)) { $('.tel-missing').show(); } else {$('.tel-missing').hide();} if (!digitNum.test(num2.value)) { $('.mobile-missing').show(); } else {$('.mobile-missing').hide();} if (!digitNum.test(dollarUnit.value)) { $('.cover-missing').show(); } else {$('.cover-missing').hide();} if (document.cform.message.value == "") { $('.message-missing').show(); } else {$('.message-missing').hide();} if ((document.cform.name.value == "") || ((document.cform.gender[0].checked== false) && (document.cform.gender[1].checked== false)) || ((document.cform.smoke[0].checked== false) && (document.cform.smoke[1].checked== false)) || ((document.cform.residency[0].checked== false) && (document.cform.residency[1].checked== false)) || (!digitNum.test(dollarUnit.value)) || (!filter.test(email.value)) || (!digitNum.test(num2.value)) || (!digitNum.test(num1.value)) || (document.cform.message.value == "")){ return false; } if ((document.cform.name.value != "") && ((document.cform.gender[0].checked == true) || (document.cform.gender[1].checked == true)) && ((document.cform.smoke[0].checked== true) || (document.cform.smoke[1].checked== true)) && ((document.cform.residency[0].checked== true) || (document.cform.residency[1].checked== true)) && (digitNum.test(dollarUnit.value)) && (digitNum.test(num1.value)) && (digitNum.test(num2.value)) && (filter.test(email.value)) && (document.cform.message.value != "")) { //hide the form $('.contactForm').hide(); //show the loading bar $('.loader').append($('.bar')); $('.bar').css({display:'block'}); //send the ajax request $.post('mail.php',{coverType:$('#coverType').val(), coverRequired:$('#coverRequired').val(), amount_cover:$('#amount_cover').val(), terms:$('#terms').val(), message:$('#message').val(), name:$('#name').val(), gender:$('#gender').val(), status:$('#status').val(), Birth_month:$('#Birth_month').val(), days:$('#days').val(), years:$('#years').val(), smoke:$('#smoke').val(), residency:$('#residency').val(), email:$('#email').val(), address:$('#address').val(), tel:$('#tel').val(), mobile:$('#mobile').val()}, //return the data function(data){ //hide the graphic $('.bar').css({display:'none'}); $('.loader').append(data); }); //waits 2000, then closes the form and fades out setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 5000); setTimeout('$(".contact").animate({"marginLeft": "-=963px"}, "slow")',4900); //stay on the page return false; } }); //only need force for IE6 $("#backgroundPopup").css({ "height": document.documentElement.clientHeight }); mail.php code: <?php //declare our variables $coverType = $_POST['coverType']; $coverRequired = $_POST['coverRequired']; $amount_cover = $_POST['amount_cover']; $terms = $_POST['terms']; $message = stripslashes(nl2br($_POST['message'])); $name = $_POST['name']; $gender = $_POST['gender']; $status = $_POST['status']; $Birth_month = $_POST['Birth_month']; $days = $_POST['days']; $years = $_POST['years']; $smoke = $_POST['smoke']; $residency = $_POST['residency']; $email = $_POST['email']; $address = $_POST['address']; $tel = $_POST['tel']; $mobile = $_POST['mobile']; //get todays date $todayis = date("l, F j, Y, g:i a") ; //set a title for the message $subject = "Message from Your Website"; $body = "PERSONAL DETAILS \nFull Name: $name \nGender: $gender \nMarital Status: $status \nBirth Date: $Birth_month $days, $years \nHave you smoke in the past 12 Months? $smoke \nU.S. Residency for at least 12 Months? $residency \n\nCONTACT DETAILS\nEmail Address: $email \nAddress: $address \nTelephone #: $tel \nMobile Number: $mobile \n\nINSURANCE DETAILS\nCover Type: $coverType \nCover Required: $coverRequired \nAmount: $amount_cover \nTerms(Years): $terms \nMessage: \n$message"; $headers = 'From: '.$email.'' . "\r\n" . 'Reply-To: '.$email.'' . "\r\n" . 'Content-type: text/plain; charset=utf-8' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); //put your email address here mail("me@myemail.com", $subject, $body, $headers); ?> <!--Display a thankyou message in the callback --> <div id="mail_response"> <h3>Thank you for your interest <?php echo $name ?>!</h3><br /> <p>We have received your personal information and we will forward it to the next available insurance agent .You can expect to hear from us within 24 hours.</p> <br /><br /> <h5>Message sent on: </h5> <p><?php echo $todayis ?></p> </div> Problem is the thank you message loads in a new page. BUt if I delete this line: var gender = document.getElementsById('gender'); The form run properly, when submit button is click, it will hide the forms and replace by a thank you message but problem is the data send in the email is not the right value eg. in Gender: I select Female. BUt I receive Male as value. Why is that? for live demo: http://gbv.lifeandhealthbenefits.com/ for full Script Code: http://gbv.lifeandhealthbenefits.com/js/scripts.js I've been looking around and all the validation stuff I've seen doesn't work for what I have. Here is what I am trying to do: The user selects the Heads or Tails radio button for the first flip and then selects heads or tails radio button for the 2nd flip. The script then randomly flips two coins and compares it to what the user selected and if they are the same the user wins and if not then they lose. So there would be 4 buttons total, two Heads and two Tails. The first set of Heads and Tails needs to be assigned to "guess1" and the 2nd set is "guess2". So if the user clicks Tails for Flip1 and Heads for Flip2 then Tails is assigned to guess1 and Heads is assigned to guess2. Right now the script just assumes the user is selecting heads for both flips. Code: <html>
<head>
<title>Guess Two Coin Tosses</title>
<script>
function flip5(){
//Input
var guess1 = document.getElementById('guess1').value
var guess2 = document.getElementById('guess2').value
var flip1 = Math.floor(Math.random() * 2)
var flip2 = Math.floor(Math.random() * 2)
var outcomes
if (flip1 == 0) flip1 = 'Heads';
else flip1 = 'Tails';
if (flip2 == 0) flip2 = 'Heads';
else flip2 = 'Tails';
//Processing
if (flip1.toUpperCase() == guess1.toUpperCase()) {
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'win win';
else
outcomes = 'win lose';
}
else { // here we lost the first
if (flip2.toUpperCase() == guess2.toUpperCase())
outcomes = 'lose win';
else
outcomes = 'lose lose';
}
//Output
document.getElementById('flip1').value = flip1
document.getElementById('flip2').value = flip2
document.getElementById('outcomes').value = outcomes
}
</script>
</head>
<body>
<h3>Predict the Futu Guess Two Coin Flips</h3>
Enter Heads for Heads, Tails for Tails! Case does not matter!
<p/>Your Guess for Flip-1:
<input type=radio id="guess1" size="5" value="Heads" />Heads
<input type=radio id="guess1" size="5" value="Tails" />Tails
<p/>Your Guess for Flip-2:
<input type=radio id="guess2" size="5" value="Heads" />Heads
<input type=radio id="guess2" size="5" value="Tails" />Tails
<p/>Flip-1:
<input type="text" id="flip1" size="5" value="???" />
<p/>Flip-2:
<input type="text" id="flip2" size="5" value="???" />
<p/><input type="button" value="Flip Two!"
onclick="flip5()" />
<p/>Outcomes:
<input type="text" id="outcomes" size="20" value="" />
<hr>
</body>
</html>
How do I validate that one of the below buttons is selected? Code: <input type="radio" name="car" class="radio" value="YES" >Yes <input type="radio" name="car" class="radio" value="NO"> No i'm running a validation script to check if my radio buttons are selected, but i can't seem to get it to read the value of the field. heres my form Code: <form name="cases" action="cases_process.php" method="post" onsubmit="return validate(this)">
<input name="uscan" id="uscan" value="n" checked="checked" type="hidden" />
<input type="radio" name="uscan" id="uscan" value="us" class="radial" tabindex="1" /><label>United States</label>
<input type="radio" name="uscan" id="uscan" value="canada" class="radial" tabindex="2" style="margin-left:30px;" /><label>Canada</label>
<input type="radio" name="uscan" id="uscan" value="other" class="radial" tabindex="3" style="margin-left:30px;" /><label>Other</label>
<div style="float:left;margin:-23px 0 0 370px;" id="cancelcon_uscan"></div>
</div>
<table class="category">
<tr><td><label>Case Name:</label></td><td><input type="text" name="casename" id="casename" class="field" tabindex="6" /></td>
<td><div id="cancelcon_casename"></div></td></tr>
</table>
</form>
i have a hidden checked field with a value of n, so there is a value of "n" for "uscan" if no radio is selected. i then run this code on submit: Code: function validate(form) {
var uscan = form.uscan.value;
var casename = form.casename.value;
var reWhiteSpace = new RegExp(/^\s+$/);
if(uscan == "n") {
modinputbad('uscan');
var a = "1";
}else {
modinputgood('uscan');
var a = "0";
}
if(casename == "" || reWhiteSpace.test(casename) == true) {
modinputbad('casename');
var b = "1";
}else {
modinputgood('casename');
var b = "0";
}
function modinputbad(id) {
$(id).style.border = '1px solid #b63939';
$(id).style.background = '#ffdfdf';
$('cancelcon_'+id).innerHTML = '<img style="float:left;" src="static/images/cancel_16.png"/>';
}
function modinputgood(id) {
$(id).style.border = '1px solid #D9D9D9';
$(id).style.background = '#F2F4F3';
$('cancelcon_'+id).innerHTML = '';
}
var added = a+b+c+d+e+f;
var dowork = added.indexOf('1');
if(dowork == '-1')return true; else return false;
}
everything works up until the if(uscan == "n") so idk why it cant find what the value of the field is, because ive tested it and it seems to know even know what the value is. anything im doing wrong? I think I have a fairly simple question. I'm trying to set the values of Radio buttons, check boxes and drop down lists so my users can go back and edit the form for a certain amount of time. So far it only saves text box values I tried to implement the radio buttons in there but it doesn't work. What do I need to do so that radio buttons, check boxes and drop down list values are all saved? Javascript: Code: <script>
/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?*/
function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 5 * 60;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+"="+escape( value ) +
( ( expires ) ? ";expires="+expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
/*
* Get a cookie value
* @param string cookie name*/
function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ";", len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
/**
* Remebers form inputs after you fill them in
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)*/
function rememberFormInputs(form_id, prefix) {
// get a reference to the form element with id 'form_test'
var form = document.getElementById(form_id);
// get all child input elements of the form
var els = document.getElementsByTagName('input');
// iterate through all form child input elements
for (var i = 0; i < els.length; i++) {
// this is the element with index of i
var el = els.item(i);
// make sure this is a text input field
if (el.type == 'text' || el.type == 'radio' || el.type == 'checkbox') {
// event handler to catch onblur events
// it sets the cookie values each time you move out of an input field
el.onblur = function() {
// this is the name of the input field
var name = this.name;
// this is the value of the input field
var value = this.value;
// set the cookie
setCookie( prefix + name, value);
alert('setCookie: '+name + ' = '+value);
};
// this inserts all the remembered cookie values into the input fields
var old_value = getCookie(prefix + el.name);
if (old_value && old_value != '') {
alert('old value remembered: '+old_value);
el.value = old_value;
}
}
}
}
// function will be run after window/document loads
window.onload = function() {
rememberFormInputs('form_test', 'input-');
}
// overload alert
function alert(str) {
var el = document.getElementById('alert');
if (el) {
el.value += str+"\r\n";
}
}
</script>
HTML: Code: <select name="Refrigerant_Type" > <option value="">Please Select Refrigerant Type</option> <option value="R-22">R-22</option> <option value="R-410 A">R-410 A</option> <option value="R-134 A">R-134 A</option> <option value="R-409 A">R-409 A</option> <option value="R-418 A">R-418 A</option> <option value="R-404 A">R-404 A</option> </select> <br /> <input type="text" name="Lubricant" /> <br /> <input type="radio" value="Comfort" name="Duty" class="radio" /> Comfort <input type="radio" value="Commercial" name="Duty" class="radio" /> Commercial <input type="radio" value="Under" name="Duty" class="radio" /> Under 50lbs <input type="radio" value="Other" name="Duty" class="radio" /> Other <br /> <input type="checkbox" name="New1" value="Yes" /> New<br /> <input type="checkbox" name="RecoveredNew1" value="Yes" /> Recovered<br /> |
|||||||