|
JavaScript - Need Help Validating Radio Buttons
I have 5 radio buttons called A, B, C, D, and E in my html file.
I need to validate them using javascript. If no radio buttons are selected, then a message should come up and say "none selected". I actually got this part done, and it works. However, I need to do one more thing. If radio button E and any other radio button(s) are selected simultaneously, then an error message should pop up and say "Wrong combinations." How should I go about doing this? I think I'll need a logical function to do this... thanks for any help! Similar TutorialsJust wondering what the code would be to validate the radio buttons, thus when i click get score a pop up will tell me that one of the radio buttons was not selected. If you really want to help me it would be good if i was able to have get score and submit working on one button, and validating every field. My code is below (don't mind the questions and answers ) Code: <HEAD>
<script language="JavaScript">
var numQues = 5;
var numChoi = 3;
var answers = new Array(5);
answers[0] = "Life";
answers[1] = "Disturbing";
answers[2] = "Yahoo Answers";
answers[3] = "Playing Video Games in the Basement";
answers[4] = "About the portion of my Sandwich";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
if (currSelection.value == answers[i]) {
score++;
break;
}
}
}
}
score = Math.round(score/numQues*100);
form.percentage.value = score + "%";
var correctAnswers = "";
for (i=1; i<=numQues; i++) {
correctAnswers += i + ". " + answers[i-1] + "\r\n";
}
form.solutions.value = correctAnswers;
}
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(at,(lat+1))!=-1){
alert("Please Enter a Valid E-mail")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("Please Enter a Valid E-mail")
return false
}
if (str.indexOf(" ")!=-1){
alert("Please Enter a Valid E-mail")
return false
}
return true
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(Name,"Name must be filled out!")==false)
{Name.focus();return false;}
if (validate_required(Surname,"Surname must be filled out!")==false)
{Surname.focus();return false;}
{
var emailID=document.submitting.email
if ((emailID.value==null)||(emailID.value=="")){
alert("Please Enter a Valid E-mail")
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}
}
}
</script>
</HEAD>
<BODY>
<h3>Quiz</h3>
<form name="quiz">
1. What do i win at..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q1" value="Life">Life</li>
<li><input type="radio" name="q1" value="Nothing At All">Nothing At All</li>
<li><input type="radio" name="q1" value="Using a Computer">Using a Computer</li>
</ul>
2. My Life is..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q2" value="Boring">Boring</li>
<li><input type="radio" name="q2" value="Disturbing">Disturbing</li>
<li><input type="radio" name="q2" value="Like everyone elses">Like everyone elses</li>
</ul>
3. I don't learn off my mother i learn off ..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q3" value="Google">Google</li>
<li><input type="radio" name="q3" value="Yahoo Answers">Yahoo Answers</li>
<li><input type="radio" name="q3" value="The Bible">The Bible</li>
</ul>
4. I Spend Most of my time ..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q4" value="Cutting Down Palm Tree's">Cutting Down Palm Tree's</li>
<li><input type="radio" name="q4" value="Eating">Eating</li>
<li><input type="radio" name="q4" value="Playing Video Games in the Basement">Playing Video Games in the Basement</li>
</ul>
5. I Complain the most about ..?
<ul style="margin-top: 1pt">
<li><input type="radio" name="q5" value="JavaScript">JavaScript</li>
<li><input type="radio" name="q5" value="About the portion of my Sandwich">About the portion of my Sandwich</li>
<li><input type="radio" name="q5" value="Lag">Lag</li>
</ul>
<input type="button" value="Get score" onClick="getScore(this.form)">
<input type="reset" value="Clear answers">
<p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br>
Correct answers:<br>
<textarea class="bgclr" name="solutions" wrap="virtual" rows="4" cols="30" disabled>
</textarea>
</form>
<form action="submit.htm" onsubmit="return validate_form(this)" method="post" name="submitting">
Name:
<input type="text" name="Name" size="30">
<br>
<br>
Surname: <input type="text" name="Surname" size="30"><br><br>
Email: <input type="text" name="email" size="30"><br>
<form action="submit.htm" onSubmit="return validate_form(this)" method="post">
<input type="submit" value="Submit" >
</form>
</body>
hello everyone Im new to javascript as well as to this forum, Im coming here for first class help that I can only get from skilled programmers like you. I have a html form that uses javascript for validation, this is an assignment that consists of a form that sells hard drives from three different manufacturers, more specifically the part im stuck on is where if a manufacturer hoes have a number in the number of drives textbox, javascript needs to check to see that one of the radio buttons in that row is checked, if no radio button is checked an alert is displayed, however when I do select a radio button I still get the alert I used a "if...else if...else" construction but my logic is not well structured and thereby I get those problems, I have included the code down below if anyone is interested in helping a newbie out, thanks Code: <html>
<head>
<style type="text/css">
.bold {font-weight:bold ; font-family:"comic sans ms"}
</style>
<script type="text/javascript">
function number_of_drives()
{
//checks that a value is entered for at least one drive's manufacturer
if(document.myform.drive1.value=="" && document.myform.drive2.value=="" && document.myform.drive3.value=="")
{
alert("please enter a quantity for the number of drives you wish to purchase from a manufacturer"); //if no value is entered in any the message is displayed
return; //no further calculation is done
}
else if(isNaN(document.myform.drive1.value || document.myform.drive2.value || document.myform.drive3.value ))//verifies that only numeric values were entered
{
alert("make sure you enter a numeric values for the 'number of drives' column");
return;
}
else
{
if(document.myform.drive1.value !="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)
alert("please select a size for the western digital drive");
else if(document.myform.drive2.value !="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)
alert("please select a size for the maxtor digital drive");
else if(document.myform.drive2.value !="" && document.myform.quantum[0].checked==false && document.myform.quantum[].checked==false && document.myform.quantum[2].checked==false)
alert("please select a size for the quantum digital drive");
}
}
function check_radios()//function to check that a size is selected in the same row as the number of drives textbox//function to check that a size is selected in the same row as the number of drives textbox
{
if(document.myform.drive1!="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)// if drive1 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'western digital' drive");
return;
}
else{return;}
if(document.myform.drive2!="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)// if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'maxtor' drive");
return;
}
else{return;}
if(document.myform.drive3!="" && document.myform.quantum[0].checked==false && document.myform.quantum[1].checked==false && document.myform.quantum[2].checked==false) // if drive2 textbox is not empty and no radio button is selected, a message will appear
{
alert("please select a size for the 'quantum' drive");
return;
}
else{return;}
}
function clear_form()
{
document.myform.western[0].value=="";
document.myform.western[1].value=="";
document.myform.western[2].value=="";
document.myform.maxtor[0].value=="";
document.myform.maxtor[1].value=="";
document.myform.maxtor[2].value=="";
document.myform.quantum[0].value=="";
document.myform.quantum[1].value=="";
document.myform.quantum[2].value=="";
document.myform.drive1.value=="";
document.myform.drive2.value=="";
document.myform.drive3.value=="";
document.myform.size1.value=="";
document.myform.size2.value=="";
document.myform.size3.value=="";
document.myform.totalsize.value=="";
document.myform.totalcost.value=="";
document.myform.discount.value=="";
document.myform.grandtotal.value=="";
}
</script>
<title></title>
</head>
<body>
<form name="myform">
<table align="center" border="1" width="80%">
<tr style="font-family:'comic sans ms'; font-size:24pt"><td align="center" colspan="6">Rupert's Hard Drive Emporium</td></tr>
<tr><td class="bold" valign="middle" align="center" rowspan="2">Manufacturer</td><td colspan="3" align="center" class="bold">Drive Size</td><td rowspan="2" class="bold">Number of Drivers</td><td rowspan="2" class="bold">Number of GB</td></tr>
<tr><td class="bold">500 Gigabytes</td><td class="bold">1 Terabyte</td><td class="bold">2 Terabytes</td></tr>
<tr><td>Western Digital ($0.12/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="western" value="500" /></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="2048"/></td><td align="center"><input type="text" name="drive1"/></td><td align="center"><input type="text" name="size1"/></td></tr>
<tr><td>Maxtor ($0.16/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="2048"/></td><td align="center"><input type="text" name="drive2"/></td><td align="center"><input type="text" name="size2"/></td></tr>
<tr><td>Quantum ($0.09/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="2048"/></td><td align="center"><input type="text" name="drive3"/></td><td align="center"><input type="text" name="size3"/></td></tr>
<tr><td rowspan="4" align="center"><img src="hardisk.jpg" height="120pt" width="90pt"/></td><td colspan="3" align="right">Total Gigabytes Purchased</td><td align="center" colspan="2"><input type="text" name="totalsize" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Total Cost of Drives</td><td align="center" colspan="2"><input type="text" name="totalcost" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Discount</td><td align="center" colspan="2"><input type="text" name="discount" readonly="true"/></td></tr>
<tr><td colspan="3" align="right">Grand Total</td><td align="center" colspan="2"><input type="text" name="grandtotal" readonly="true"/></td></tr>
<tr><td align="center"><input type="submit" value="calculate" onclick="number_of_drives()"/></td><td align="center" colspan="5"><input type="submit" value="clear the form" onclick="clear_form()"/></td></tr>
</table>
</form>
</body>
</html>
Im new to javascript and was hoping someone could help me with my problem. I have a form that has multiple radio button groups and i want it to validate so that if any button is selected in one group you cannot make a selection in the other groups. any advice would be appreciated The problem: I can't get the code to send out my alerts due to empty radio groups. what I'm trying to accomplish: I want Javascript to send a alert to the user if none of the radio buttons within a group are checked. Short Summary: I'm new to Javascript and I've been trying to figure this out myself, but I honestly don't know what's wrong. If you guys can help that'd be great. Thanks in advance. and if the information that I've provided is in anyway confusing let me know and I'll try to help, but again my knowledge is limited. Here is a simplified version of my form.*There are originally 10 questions total. "Names: q1-q10"* Code: <html> <head> <script type="text/javascript" src="val.js"></script> </head> <body> <form method="POST" name="theForm" onsubmit="javascript:check();" class="surv_style" > <p class="ttl" ><label>Question 1: </label></p> <p><label> <input type="radio" name="q1" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q1" value="some"> Sometimes </label></p> <p><label> <input type="radio" name="q1" value="no"> No </label></p> <p class="ttl" ><label>Question 2: </label></p> <p><label> <input type="radio" name="q2" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q2" value="somet"> Sometimes</label></p> <p><label> <input type="radio" name="q2" value="no"> No</label></p> <p><label> <input type="radio" name="q2" value="no_notice"> I havent noticed</label></p> <p class="ttl" ><label>Question 3: </label></p> <p><label> <input type="radio" name="q3" value="yes"> Yes </label></p> <p><label> <input type="radio" name="q3" value="somet"> Sometimes</label></p> <p><label> <input type="radio" name="q3" value="no"> No</label></p> <input type="submit" name="sub_butt" value="Submit"> </form> </body> </html> Here is my Javascript code: Code: function valR_butt(rbgn){
var formName = "theForm";
var form = document.form[formName];
var isChecked = false;
var counter = form[rbgn].length;
for(var x=0;x<counter;x++){
if(form[rbgn][x].checked==true){
isChecked=true;
break;
}
}
if(isChecked==false){
alert(errorMessage);
return false;
}else{
return true;
}
}
function check(){
var q1 =validateRadioButton("q1");
if(q1==false){
alert("Please select a answer to question 1");
return false;
}
function check(){
var q2 =validateRadioButton("q2");
if(q1==false){
alert("Please select a answer to question 2");
return false;
function check(){
var q3 =validateRadioButton("q3");
if(q1==false){
alert("Please select a answer to question 3");
return false;
}
alert("OK!\nYour selection is valid");
return true;
}
}
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>
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. 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>
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 Hi all, I have a form with multiple Divs containing radios, text etc. What I'm trying to do is write a function that will validate all radios only within a specified Div (in the code example below, Div4). I need to validate if all the radios in the div have "no" selected, or button[1]. If any have yes selected, then nothing happens. Only if all have No selected do I need something to happen. Assigning radios to groups for validation is something I've done on a global (all of form) scale, but I can't figure how to be explicit to a div. The code below works, but only on individual radios, not groups. I've included a few buttons outside the div for effect. Oh, and the final product won't have alerts, it will be used to trigger a hidden div elsewhere in the form. Any help or pointers would be greatly appreciated. Code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function radCheck(){
var d = document.getElementById("Div4");
var list = d.getElementsByTagName("input");
for (var i = 0; i < list.length; i++){
var node = list[i];
if (node.getAttribute('type') == 'radio'){
if (node.checked == false){
alert("something bad");
}
else{
alert("something good");
}
}
}
}
</script>
</head>
<body>
<form name="radiotest" action="">
<div id="Div4">
<input type="radio" name="radReason1" id="R1" value="Yes"><label for="R1">Yes</label>
<input type="radio" name="radReason1" id="R2" value="No"><label for="R2">No</label><br><br>
<input type="radio" name="radReason2" id="R3" value="Yes"><label for="R3">Yes</label>
<input type="radio" name="radReason2" id="R4" value="No"><label for="R4">No</label><br><br>
<input type="radio" name="radReason3" id="R5" value="Yes"><label for="R5">Yes</label>
<input type="radio" name="radReason3" id="R6" value="No"><label for="R6">No</label><br><br>
<input type="radio" name="radReason4" id="R7" value="Yes"><label for="R7">Yes</label>
<input type="radio" name="radReason4" id="R8" value="No"><label for="R8">No</label><br><br>
</div>
<input type="radio" name="radReason5" id="R9" value="Yes"><label for="R9">Yes</label>
<input type="radio" name="radReason5" id="R10" value="No"><label for="R10">No</label><br><br>
<input type="radio" name="radReason6" id="R11" value="Yes"><label for="R11">Yes</label>
<input type="radio" name="radReason6" id="R12" value="No"><label for="R12">No</label><br><br>
<input type="button" value="Check" onclick="javascript:radCheck();"><br>
</body>
</html>
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 Is it possible to add events using addEventListener to multiple radio buttons with same id ? <input id="radId" type="radio" value="0" name="radioname">No <input id="radId" type="radio" value="1" name="radioname">Yes I tried to attach event using document.getelementByID BUT it always picks the first radio button. Is there a way around this, any help would be highly appreciated. Thanks Hello, I'm trying to create a function that will print out: "Nice job!" after a user clicks on a radio button. The code which I have below is my attempt, but I fear that nothing happens. Code: $(':radio').click(function() {
if ($(this).attr('checked')) {
$('#show_response').innerHTML = 'Nice Job';}})
}
Within my html I have: Code: <span id="show_response"></span> right next to the radio buttons of interest. However, nothing happens when I view my page. Any thoughts on this would be most appreciated. Thank you... 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>
Originally I had the following code. What it does is for a user to type the folder name of their choice and then after clicking submit a window will pop open and they will be taken to "C:\folder" (assuming the user typed "folder" and such a folder existed). Here is the code in case I wasn't clear. Code: <html>
<head>
<script type="text/javascript">
function goTo()
{
var drive = document.forms[0].drive.value;
var folder = document.forms[0].folder.value;
window.location = drive+folder;
return false;
}
</script>
</head>
<body>
<center>
<b><u>Folder Search</u></b>
<form action="" method="get" onsubmit="return goTo()">
Choose drive:
<input type="hidden" name="drive" id="drive" value="C:\">
<br>
Enter folder name:
<input type="text" name="folder" id="folder">
<p>
<input type="submit" value="Submit">
</form>
</center>
</body>
</html>
However, what I want to do now is change it so that the user can click on radio buttons to choose the drive they want. I realize I could use the code above and have the user type in the drive they want but I would rather have radio buttons for them to choose. Here is what I have so far. Code: <html>
<head>
<script type="text/javascript">
function goTo()
{
var drive = document.forms[0].drive[i].value;
var file = document.forms[0].file.value;
window.location = drive+folder;
return false;
}
</script>
</head>
<body>
<form method="get" action="" onsubmit="return goTo()">
Choose Drive:
<input type="radio" name="drive" id="C Drive" value="C:\">C Drive
<input type="radio" name="drive" id="D Drive" value="D:\">D Drive
<input type="radio" name="drive" id="F Drive" value="F:\">F Drive
<br>
Enter Folder Name:
<input type="text" name="folder" id="folder">
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Now after the user clicks submit nothing really happens. I'm a real n00b at this. I could use some help. Thanks in advance. Hello, I have a form with two yes/no questions that have radio buttons for the yes or no answer. Each question has a yes and a no button. If the user answers yes to the first question then they must answer the second question. If they answer no to the first question then they don't have to answer the second question. I have some code to pop an alert if the first question is not answered but I haven't been able to make the second part work (if answer is yes, then pop an alert if the second question is not answered or forget it if it is not. The radio buttons for the first question each have the same name (yesNo1) but one value is yes and the other is no. The second question buttons have the name yesNo2. Here's the code for the first part: Code: function radio_button_checker()
{
// set var radio_choice to false
var radio_choice = false;
// Loop from zero to the one minus the number of radio button selections
for (counter = 0; counter < frm1.yesNo1.length; counter++)
{
// If a radio button has been selected it will return true
// (If not it will return false)
if (frm1.yesNo1[counter].checked)
radio_choice = true;
}
if (!radio_choice)
{
// If there were no selections display an alert box
alert("Please select Yes or No to the first question of Section D.")
return (false);
}
return (true);
}
I thought I could use the same code with some name changes and with an If statement to check the second question but I haven't been able to get it right at all and I spent all day messing with this stuff. I thought I should put the code for the second question check right in the spot where the return (true) is but so far no luck. I'm new to javascript so any help would be appreciated. Thanks, Rick 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 |
|||||||