|
JavaScript - Radio Buttons Disable Second Set With Id And Not Value
Hi..
I have 2 groups of radio buttons.. I can manage to make one set be disabled via a selection.. but i can only get this right with the VALUE... Is it possible to use the radio id to do the same?? Just use the link below for they jquery <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<br />
<br />
<div> 1 - <input type="radio" id="1" value="11" /> </div>
<div> 2 - <input type="radio" id="2" value="22"/> </div>
<div> 3 - <input type="radio" id="3" value="33"/> </div>
<br />
<br />
<div> 1 - <input type="radio" id="1" value="11" /> </div>
<div> 2 - <input type="radio" id="2" value="22" /> </div>
<div> 3 - <input type="radio" id="3" value="33" /> </div>
<script>
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
</script>
</body>
</html>
Similar Tutorialshi i have following code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--<meta http-equiv="refresh" content="51;url=quiz2action.php" />-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id = "time"></div>
<script type = "text/javascript">
}
function display(secs) {
if (secs <= 0) {
alert("Your time is up!");
return;
}
secs--;
document.getElementById("time").innerHTML = "You have " +
Math.floor(secs/60) + ":" + (secs % 60 < 10 ? "0" : "" ) + (secs % 60) + " left";
setTimeout("display("+secs+")",1000);
}
display(51); // 300 seconds = 5 minutes
</script>
<p>
<form name="form1" method="post" action="quiz2action.php">
<?php
$db = mysql_connect("localhost");
mysql_select_db("videoshop", $db);
//$queryquestions = "SELECT * FROM quiz ORDER BY RAND()" or die();
$queryquestions = "SELECT * FROM quiz" or die();
$resultquestions = mysql_query($queryquestions) or die();
while($rowquestions = mysql_fetch_array($resultquestions))
{
$questionid = $rowquestions['id'];
$question = $rowquestions['question'];
$answerone = $rowquestions['option1'];
$answertwo = $rowquestions['option2'];
$answerthree = $rowquestions['option3'];
$answerfour = $rowquestions['option4'];
echo "
<b>Question $questionid: $question</b><br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"1\"> $answerone <br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"2\"> $answertwo <br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"3\"> $answerthree <br>
<input type=\"radio\" name=\"question[$questionid]\" value=\"4\"> $answerfour <br>";
echo "<br><br>";
}
?>
</p>
<label>
<input type="submit" name="Submit" id="button" value="Submit">
</label>
</form>
<p> </p>
</body>
</html>
above is the code of quiz which is created in php. that quiz is fine. the problem in in js script above the php script. what i want is when the time of 5 mins is completed then i want to disable all those radio buttons except submit button. how can this be done? 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. 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 Within my project, using PHP/HTML/Javascript, I am trying to set up a page where a corresponding submit button is enabled when a given checkbox is checked. What complicates my attempt is that the checkboxes and submit buttons are in the form of arrays. Here is a snippet of my code: Code: <form name="myform4" id="list_apps" method="post">
<?php
for ($i=0; $i<$num_rows;$i++)
{
?>
<p>
<input type="checkbox" name="app[]" id="app[]" onclick="enable_perm()">
<input name="set_perm[]" type="submit" id="set_perm[]" value="Set Permissions">
</p>
<?php
}
</form>
Here is my attempt at using Javascript to disable the first submit button after clicking any check box: Code:
function enable_perm()
{
document.myform4.set_perm[0].disabled = true;
}
What am I missing here, or, how do I enable/disable submit buttons that are part of an array? Hello all, I have 2 radio buttons update bsc value update mnr value when user selects update mnr value, two more radio buttons should appear. I have mnr value I do not have mnr value. On selecing I do not have mnr value im submitting the form and enabling the user to select values from dropdown. ( not shown in the code as it is a coldfusion code.). On submit I am not able to still keep the 'but2', and 'my_select3' elements disabled. Please advice. I have been working on this since quite sometime. <script language="JavaScript"> function makeChoice() { var obj1 = document.getElementById('box1') var obj2 = document.getElementById('box2') if (document.getElementById('but1').checked) { obj2.setAttribute('readOnly','readonly'); obj1.removeAttribute('readOnly'); document.getElementById('but1').disabled=true; document.getElementById('but2').disabled=true; } else if (document.getElementById('but2').checked) { obj1.setAttribute('readOnly','readonly'); obj2.removeAttribute('readOnly'); document.getElementById('but2').disabled=true; document.getElementById('but1').disabled=true; } } </script> <script type="text/javascript"> function showSelect() { if (document.getElementById('but2').checked) { document.getElementById('but2').disabled=true; } } </script> <script type="text/javascript"> function showSelect1() { if (document.getElementById('but2').checked) { document.myform.submit(); document.getElementById('but2').disabled=true document.getElementById('my_select3').disabled=true } } </script> <td><input type="radio" id="but1" name="vals" onclick="makeChoice()"></td> <td>Update BSC Value </td> <tr> <td><input type="radio" id="but2" name="vals" onclick="makeChoice();showSelect();" ></td> <td>Update MNR Value </td> <td> <input id="my_select1" class="show" type="radio" name="my_select1" onclick="this.myform['my_select1'].disabled=true"></td> <td> I have a Position Number </td> <td><input id="my_select3" class="show" type="radio" name="my_select3" onclick="showSelect1();"></td> <td> I do not have a Position Number </td> Dear All, The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script language="javascript"> function enable_text(status) { status=status; var form = document.forms[0]; var rads = form.elements.radio1; for (var i=0; i < rads.length; i++) { var color = rads[i].checked? "red" : ""; document.getElementById("check"+i).style.backgroundColor = color; document.getElementById("check"+i).disabled = status; } } </script> <body onload=enable_text(false);> <div> <form name="form1" method="post" action=""> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td class="PortletText1" nowrap><strong>ALL Data</strong></td> <td class="PortletText1" nowrap><strong>YES</strong></td> <td class="PortletText1" nowrap><strong>NO</strong></td> <td class="PortletText1" nowrap><strong>N/A</strong></td> <td class="PortletText1" nowrap><strong>Comments</strong></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="PortletText1" nowrap>Data 1:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td> <td class="PortletText1" nowrap> <input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 2:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 3:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td> </tr> <tr> </div> </form> </body> </html> </body> </html> thanks in advance. Regards sona 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. 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 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. 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 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>
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 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>
All, I wish to allow the use of a checkbox based on which radio button is selected. Pseudo Code: IF RadioButton "Adult_or_Child"= Adult Then Checkbox "Pensioner" = Available to click End IF Else IF RadioButton "Adult_or_Child"= Child Then Checkbox "Pensioner" = Not Available to click. End If As you can see, a person can be an adult and a pensioner but not a child and a pensioner. Thanks for your help. Dan Hi, I'm a year 11 student studying GCSE computing. I'm doing a project and I need to conduct some primary resarch, so I would be grateful if someone could explain to me how to go about coding radio buttons in a HTML web page which uses JavaScript. Thank you! I can't get the radio buttons to work properly in my browser. If you don't press one the alert box does not tell you that you have to tick either male or female. Also I noticed you can tick both but it won't say you must choose only one, how can I sort this...any help please. case "radio_hidden": if (fld.value != "1")/* radio male or female button should be checked*/ { fld.valid = true; } break; if (frm.radio_hidden.valid == false) { report_text += " You must click a radio button male or female.\n\n" } <br><u>Select Your gender:</u><br> <input type="radio" name="male" value="" onchange="radio_hidden.value = 1;"> Male <br> <input type="radio" name="female" value="" onchange="radio_hidden.value = 1;"> Female <br> <input name="radio_hidden" value="" type="hidden"> 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 Hello, I'm currently trying to figure out how I can make each radio button call a different page. For example If i click on radio button 1 and click submit it will take me to www.website1.com and if I click radio button 2 and click submit it will take me to www.website2.com. I would really appreciate your help Thank you Eric |
|||||||