|
JavaScript - Validating Radio Groups For Survey Issue
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;
}
}
Similar TutorialsIm 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 Just 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>
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! 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>
Hello everyone! I hope you can help me. I am writing a submit form that has to have an indication if a form is missing information upon hitting the submit button. I have followed along the steps with my text and I can't seem to figure out what I am doing wrong. Can anyone help me? Here is my code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD.HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/htm14/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kudler Fine Foods Contact Page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<!---Kami Demnyan
21 December 2009-->
<script type="text/javascript">
/*<![CDATA[*/
<!--This code ensures that the zip code and telephone numbers are actual numerical digits, not letters-->
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert ("Please enter a numerical value");
return false;
}
}
<!--This code ensures that all of the fields contain text, its not functioning, I'm using page 263 in the text as my
guide-->
function submitForm() {
if (document.forms[0].name.value == ""
|| document.forms[0].address.value == ""
|| document.forms[0].city.value == ""
|| document.forms[0].state.value == ""
|| document.forms[0].zip.value == ""
|| document.forms[0].phone.value == ""
|| document.forms[0].email.value == "") {
window.alert("Please enter your missing information");
return false;
}
else
return true;
}
/*]]>*/
</script>
</head>
<body>
<h1> KUDLER FINE FOODS </h1>
<h2> JOIN OUR MAILING LIST</h2>
<!--This is where the user will input all of their information to join the mailing list-->
<form action="completeform.html" method="get" onsubmit="return onSubnit();"
enctype="application/x-www-form-urlencoded">
<p>Name<br />
<input type="text" name="name" size="50" /></p>
<p>Address<br />
<input type="text" name="address" size="50" /></p>
<p>City, State, Zip <br />
<input type="text" name="city" size="30" />
<input type="text" name="state" size="3" />
<input type="text" name="zip" size="10"; onchange="return checkForNumber(this.value)"; /></p>
<p>Telephone<br />
<input type="text" name="phone" size="25" onchange="return checkForNumber(this.value)"; /></p>
<p>Email Address<br />
<input type="text" name="email" size="50" /></p>
<!--This is where the submit and reset buttons are located-->
<p><input type="submit" value="Submit Form" />
<p><input type="reset" value="Reset Form" />
</form>
</body>
</html>
ALSO: My instructor does not want me to use the onchange tag, is there a suitable replacement for that? Any help would be greatly appreciated, thank you. Kami I have set's of radio buttons that have on click functions, and when i restore the form data i would like the onclick functions to re-calculate. Is there a simply way such as if this.checked = true run onclick function that i can apply to every radio with onload???
Reply With Quote 01-10-2015, 01:51 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts You cannot auto-click for security reasons. But you can use local storage to keep the status of the radio buttonds and reinstate them on page reload. You can then run a script to do whatever is required. Hello guys, I'm trying to basically build a survey that validates gender and age, and with those variables display the correct products for them. The problem is that the variables are not passing to the functions and not displaying nothing. Please help in this, here's my code: <iframe> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><!-- Localized --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex,nofollow"> <title>Visitor Survey - Please Take A Minute...</title> <link href="survey_files/style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="survey_files/jquery.js"></script> <script> var genero = null; var edad = null; function q1() { $('#q1').hide(); $('#q2').show(); } function q2() { $('#q2').hide(); $('#q2').show(); } function q2() { $('#q2').hide(); $('#loader').show(); setTimeout(showProducts, 1500); } function setgender(g) { if (g == 'f') { genero = 'f'; } if (g == 'm') { genero = 'm'; } function setage (a) { if (a == '1017') { edad = '1017'; } if (a == '1825') { edad = '1825'; } if (a == '2639') { edad = '2639'; } if (a == '40') { edad = '40'; } } function showProducts() { $('#loader').hide(); $('#products').show(); if ( genero == 'f' && edad == '1017') { document.getElementById('fgift').style.display = 'block'; } if ( genero == 'm' && edad == '1017') { document.getElementById('mgift').style.display = 'block'; } } } </script> <style> .hoverspan { background-color:transparent; color:#000000; } .hoverspan:hover { background-color:#D9D9D9; color:#000000; } .btn { cursorointer; } .clear{clear:both;} html, body { height:100%; padding:0; margin:0; background-color:#D8D8D8; } #wrapper { min-height: 100%; height: auto !important; height: 100%; } .footer, .push { height: 4em; font-size:10px; width:90%; line-height:14px; padding:20px; text-align:center; } </style> </head><body> <div id="wrapper" style="margin: 0pt auto;"> <div id="content"> <div id="header" style="margin-left: 50px; padding-top: 12px;"> <img src="survey_files/thankyou.png" alt="Thank You" title="Thank You" border="0"> </div> <div id="leftbox" style="width: 306px; height: 336px;"> <p class="header">Dear Visitor,</p> <p>You've been selected to take part in our anonymous survey. Complete this 30 second questionnaire, and to say "thank you", we'll offer you a few exclusive prizes including a WalMart or Best Buy Gift Card. </p><p><br>This offer is available today only: <strong><script language="Javascript"> // Array of day names var dayNames = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); // Array of month Names var monthNames = new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December"); var now = new Date(); now.setDate(now.getDate()); document.write(dayNames[now.getDay()] + ", " + monthNames[now.getMonth()] + " " + (now.getDate()) + ", " + now.getFullYear()); // --> </script>Wednesday, January 26, 2011 </strong></p> </div> <div id="rightbox"> <form name=""> <div id="q1"> <p> </p> Question 1 of 3:<br> Are you male or female?<br> <div class="hoverspan" onclick="javascript:setgender('m'); javascript:q1();" style="padding: 2px; margin: 2px;"> <input id="q1_a1" onclick="javascript:setgender('m'); q1();" type="radio"><label id="male">Male</label> </div> <div class="hoverspan" onclick="javascript:setgender('f'); javascript:q1();" style="padding: 2px; margin: 2px;"> <input id="q1_a2" onclick="javascript:setgender('f'); q1();" type="radio"><label id="female">Female</label> </div> </div> <div id="q2" style="display: none;"> <p> </p> Question 2 of 3:<br> How old are you?<br> <div class="hoverspan" onclick="javascript:setage('1017'); javascript:q2();" style="padding: 2px; margin: 2px;"> <input id="q2_a1" onclick=" javascript:setage('1017'); q2();" type="radio"><label id="age">10-17</label> </div> <div class="hoverspan" onclick="javascript:setage('1825'); javascript:q2();" style="padding: 2px; margin: 2px;"> <input id="q2_a2" onclick="javascript:setage('1825'); q2();" type="radio"><label id="age">18-25</label> </div> <div class="hoverspan" onclick="javascript:setage('2639'); javascript:q2();" style="padding: 2px; margin: 2px;"> <input id="q2_a3" onclick=" javascript:setage('2639'); q2();" type="radio"><label id="age">26-39</label> </div> <div class="hoverspan" onclick="javascript:setage('40'); javascript:q2();" style="padding: 2px; margin: 2px;"> <input id="q2_a4" onclick="javascript:setage('40'); q2();" type="radio"><label id="age">40+</label> </div> </div> <div id="loader" style="display: none; text-align: center;"> <p> </p> <p>Thank you for your responses!</p> <p><img src="survey_files/loader.gif" alt="loading..." title="loading..."></p> <p>Submitting your answers...</p> </div> </form> <div id="products" style="display: none;"> <p>Thank you for participating in our survey! Please select your prize!</p> <div> <table id="fgift" style="display: none;" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr id="gift2" class="hoverspan" onclick="PreventExitSplash=true; location.href='victorias.php';" style="cursor: pointer;"> <td style="padding: 0pt 5px 5px 0pt;"><img src="survey_files/vs2.jpg" id="vs"></td> <td class="mid"><p><b> $1,000 Victoria's Secret Gift Card</b></p> Quantity Left: 3</td> <td class="right" align="right"><form method="post" action="victorias.php"><input value="Choose Victoria's" class="btn" onclick="PreventExitSplash=true;" type="submit"></form></td> </tr></tbody></table> <table id="mgift" style="display: none;" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr id="gift2" class="hoverspan" onclick="PreventExitSplash=true; location.href='walmart.php';" style="cursor: pointer;"> <td style="padding: 0pt 5px 5px 0pt;"><img src="survey_files/walmart.jpg" id="walmart"></td> <td class="mid"><p><b> $1,000 WalMart Gift Card</b></p> Quantity Left: 2</td> <td class="right" align="right"><form method="post" action="walmart.php"><input value="Choose WalMart" class="btn" onclick="PreventExitSplash=true;" type="submit"></form></td> </tr> </tbody></table> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr id="gift2" class="hoverspan" onclick="PreventExitSplash=true; location.href='bestbuy.php';" style="cursor: pointer;"> <td style="padding: 0pt 5px 5px 0pt;"><img src="survey_files/bestbuy.jpg" id="bestbuy"></td> <td class="mid"><p><b> $1,000 Best Buy Gift Card</b></p>Quantity Left: 4</td> <td class="right" align="right"><form method="post" action="bestbuy.php"><input value="Choose Best Buy" class="btn" onclick="PreventExitSplash=true;" type="submit"></form></td> </tr> </tbody></table> </div> </div> </div> <div class="clear"></div> <div class="push"></div> </div> <div id="footer" class="footer" style="margin: -100px auto 0pt; text-align: center;"> </div> <embed src="survey_files/nifty.swf" quality="high" bgcolor="#FFFFFF" name="niftyPlayer1" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="1" width="1"> </div></body></html> </iframe> can anyone help me validate a survey page i have? it has many questions and each question has 5 radio buttons. i followed many guides and none of them worked for me. I refered to http://www.dynamicdrive.com/forums/s...00&postcount=9 guide and http://javascript.about.com/library/blradio4.htm but for somereason it doesn't seem to work. So can u guys plz look over my simplified version of the survey and see whats is wrong. Sorry if i sound like a noob, I am new here. 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>
<script type="text/javascript">
var btn = valButton(form.q1);
if (btn == null) alert('No radio button selected');
else alert('Button value ' + btn + ' selected');
function valButton(btn) {
var cnt = -1;
for (var i=btn.length-1; i > -1; i--) {
if (btn[i].checked) {cnt = i; i = -1;}
}
if (cnt > -1) return btn[cnt].value;
else return null;
}
</script>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="20">
<form name="science" method="post" action="ad.html" onsubmit="return valButton(btn);">
<tr>
<td width="475"><h3>
<center>
Reasons for organizing Science Olympiad
</center>
</h3></td>
<td width="17"><h3>
<center>
1
</center>
</h3></td>
<td width="17"><h3>
<center>
2
</center>
</h3></td>
<td width="17"><h3>
<center>
3
</center>
</h3></td>
<td width="17"><h3>
<center>
4
</center>
</h3></td>
<td width="17"><h3>
<center>
5
</center>
</h3></td>
</tr>
<tr>
<td width="475">1. It is fun</td>
<td width="17"><input type="radio" id="q1" name="q1" value="1" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="2" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="3" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="4" /></td>
<td width="17"><input type="radio" id="q1" name="q1" value="5" /></td>
</tr>
<tr>
<td>2. To motivate students to pursue further education in Science and Engineering</td>
<td width="17"><input type="radio" id="q2" name="q2" value="1" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="2" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="3" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="4" /></td>
<td width="17"><input type="radio" id="q2" name="q2" value="5" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" /></td>
</tr>
<tr></tr>
</form>
</table>
testing
</body>
</html>
Hi im wondering if someone could be of some help please, im a newbie to javascript and after some help and advice if possible please. Ive used a template from the web which was a quiz template. Im just trying to get my javascript script to work. I want it to populate my html question/advice box so people can input what there answer to the question and it will give them advice. It's for a data classification advice for a work project. I just dont know where im going wrong or what im missing out - ive read loads of help sections on the web and still cant get the javascript to populate my html boxes. Any help or advice would be really appreciated. Thanks Lee Heres my html code which seems to work ok... the box etc is displayed just doesnt have any content. ----------------------------------------------------------------------- Code: <form method="POST">
<div align="center"><center><table BORDER="1">
<tr>
<td COLSPAN="2" BGCOLOR="#4C0000"><div align="center"><center><p><font SIZE="+3"
COLOR="#FFFFFF">Data Classification </font></td>
</tr>
<tr>
<td COLSPAN="2" BGCOLOR="#4C0000"><div align="center"><center><p><font SIZE="-1"
COLOR="#FFFFFF">2010 <a HREF="Data Governance</font> </p>
</center></div><div align="center"><center><p><font COLOR="#FFFFFF">Click on "Next
Question" to start advice. Be sure to use small letters (no caps) when entering your
letter choice.</font> </td>
</tr>
<tr>
<td><b>Question #:</b></td>
<td ALIGN="LEFT"><input TYPE="TEXT" NAME="questNo" SIZE="4"></td>
</tr>
<tr>
<td><b>Question:</b></td>
<td><div align="center"><center><p><textarea COLS="70" ROWS="2" name="question"
wrap="virtual"></textarea></td>
</tr>
<tr>
<td ALIGN="RIGHT"><b>a)</b></td>
<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceA" SIZE="75"></td>
</tr>
<tr>
<td ALIGN="RIGHT"><b>b)</b></td>
<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceB" SIZE="75"></td>
</tr>
<tr>
<td ALIGN="RIGHT"><b>c)</b></td>
<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceC" SIZE="75"></td>
</tr>
<tr>
<td ALIGN="RIGHT"><b>d)</b></td>
<td><div align="center"><center><p><input TYPE="TEXT" NAME="choiceD" SIZE="75"></td>
</tr>
<tr>
<td ALIGN="RIGHT"><b>Your choice:</b></td>
<td><input TYPE="TEXT" NAME="yourChoice" SIZE="4"></td>
</tr>
<tr>
<td COLSPAN="2"><div align="center"><center><p><input TYPE="button"
VALUE="Check Current Advice" onClick="checkAnswer(this.form)"><input TYPE="button"
VALUE="Next Question" onClick="nextQuestion(this.form)"> <input TYPE="reset"
VALUE="Start Over" onClick="clearForm(this.form)"></td>
</tr>
<tr>
<td ALIGN="RIGHT"><b>Results:</b></td>
<td><div align="center"><center><p><textarea COLS="70" ROWS="3" name="Advice"
wrap="virtual"></textarea></td>
</tr>
<tr>
</form>
-------------------------------------------------------------------------- Now heres my javascript which i just cant seem to get to work or integrate with the html question/advice box. There will be some text in there that was originally part of the template that i was going to remove at a later stage once id got a better underatnding of where i was going wrong. Code: <html>
<head>
<script LANGUAGE="JavaScript">
<!-- hide this script tag's contents from old browsers --->
function jumpBox(list) {
location.href = list.options[list.selectedIndex].value
}
//Lee Quinn 2010 All Rights Reserved
function init()
{
questions = new Array()
questions[1] = "Is the information you are collecting or creating any of the following?"
questions[2] = "Is the information you are collecting or creating any of the following?"
questions[3] = "Is the information you are collecting or creating any of the following?"
questions[4] = "Is the information you are collecting or creating any of the following?"
answerA = new Array()
answerA[1] = "Marketing brochures, Customer disclosure statements,Published annual reports, Interviews with news media, Press releases"
answerA[2] = "Employee Handbook,Telephone Directory,Organization Charts,Policies and Standards,Training Manuals"
answerA[3] = "Customer records, Correspondence containing customer information, Credit card listings,Personnel records/Employee performance reviews,Unit business plans,Proprietary/custom software,Budget information,Internal audit reports,Business reports on strategy, exposures etc"
answerA[4] = "Strategic Plans,Encryption keys,Details of mergers or acquisitions,Financial results prior to publication,Online access codes such as passwords or pin"
answerB = new Array()
answerB[1] = "None of the above"
answerB[2] = "None of the above"
answerB[3] = "None of the above"
answerB[4] = "None of the above"
rightAns = new Array
rightAns[1] = "A"
rightAns[2] = "b"
rightAns[3] = "c"
rightAns[4] = "d"
reference = new Array()
reference[1] = "You have indicated yes to question 1, therefore the information you are collecting/creating will be classified as PUBLIC information. It is information that can be disclosed to anyone without violating an individual?s right to privacy. Knowledge of this information does not expose CFS to financial loss, embarrassment, or jeopardize the security of assets."
reference[2] = "You have indicated yes to question 2, therefore the information you are collecting/creating will be classified as INTERNAL USE information. It is information that, due to technical or business sensitivity, is limited to employees and contractors who work on-site. It is intended for use only within CFS. Unauthorized disclosure, compromise, or destruction would not have a significant impact on CFS or its employees."
reference[3] = "You have indicated yes to question 3, therefore the information you are collecting/creating will be classified as CONFIDENTIAL information. It is information that CFS and its employees have a legal, regulatory, or social obligation to protect. It is intended for use solely within defined groups in CFS. Unauthorized disclosure, compromise, or destruction would adversely impact CFS its customers or its employees.
Unless otherwise stated all data should be treated as CONFIDENTIAL.Sensitive data = Confidential or Highly Confidential data."
reference[4] = "You have indicated yes to question 4, therefore the information you are collecting/creating will be classified as HIGHLY CONFIDENTIAL information, It is the highest level of classification and is information whose unauthorized disclosure, compromise, or destruction could result in severe damage, provide significant advantage to a competitor, or incur serious financial impact to CFS or its employees. It is intended for restricted use by a very small number of people (possibly 0 or 1) with an explicit, predetermined need to know."
}
function nextQuestion(form)
//set the total number of questions equal to quizend
{ var quizEnd = eval(4 * 1);
if(form.questNo.value =5= quizEnd) {
form.question.value = "1";
form.choiceA.value = "Marketing brochures, Customer disclosure statements,Published annual reports, Interviews with news media, Press releases";
form.choiceB.value = "None of the above";
form.choiceC.value = "Unsure";
form.yourChoice.value = "a,b,c,d";
form.results.value = "End of Advice. Your final results are listed below."; } else {
if(form.questNo.value == "") {form.questNo.value = 1} else {
form.questNo.value = eval(form.questNo.value) + 1;
}
form.question.value = questions[form.questNo.value];
form.choiceA.value = answerA[form.questNo.value];
form.choiceB.value = answerB[form.questNo.value];
form.choiceC.value = answerC[form.questNo.value];
form.choiceD.value = answerD[form.questNo.value];
form.yourChoice.value = "";
form.results.value = "";
if(form.myScore.value == "") {form.myScore.value = 0; } else {
form.myScore.value = form.myScore.value; }
}
}
function checkcurrentadvice(form) {
var myScore = 0;
var curve = 0;
if(form.results.value != "") {form.results.value = "Sorry, no guessing allowed. In order to retry this question you will have to start the quiz over. Click on ''Next Question'' to continue."; }
else if(form.yourChoice.value == rightAns[form.questNo.value]) {
form.myScore.value = eval(form.myScore.value) + eval(1);
form.results.value = "Conratulations! You are correct. That brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on ''Next Question'' to continue."; } else {
form.results.value = "Sorry, you are incorrect. Please refer to " + reference[form.questNo.value] + " before retaking the quiz. This brings your cumulative score to " + form.myScore.value + " out of a possible " + form.questNo.value + ". Click on ''Next Question'' to continue." }
function clearForm(form)
{
form.questNo.value = "";
form.question.value = "";
form.choiceA.value = "";
form.choiceB.value = "";
form.choiceC.value = "";
form.choiceD.value = "";
form.yourChoice.value = "";
form.results.value = "";
form.myScore.value = "";
form.percent.value = "";
form.grade.value = "";
}
</script>
</head>
</html>
I'm sorry I'm not to good at javascript. I know VB.net, but I have not learned javascript yet, and I need some help. I am working on a project to get a survey to pop up for new visitors on the index page of our site. What I need to do: on load look for a cookie, if that cookie is not found run a script telling the site to pull up another page in lightview using its own "on load" command. If the cookie is there the site will not open this other page. What I've done: I already found a way to do most of this, but I can only use a hyper link as a trigger for the site to load the other page in lightview. Here is a link of what I have so far: http://naomi-dr.com/template2.html Please let me know if you have any questions or need more information. This is the code that I'm presently using: Code: <script language="JavaScript" type="text/javascript">
<!--
function Cal(obj){
var total=0;
var ticked=0;
for (var zxc0=1;zxc0<obj['B'].length;zxc0++){
if (obj['B'][zxc0].checked){
total+=obj['B'].length-1;
ticked+=zxc0;
}
}
for (var zxc1=1;zxc1<obj['C'].length;zxc1++){
if (obj['C'][zxc1].checked){
total+=obj['C'].length-1;
ticked+=zxc1;
}
}
for (var zxc2=1;zxc2<obj['D'].length;zxc2++){
if (obj['D'][zxc2].checked){
total+=obj['D'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['E'].length;zxc2++){
if (obj['E'][zxc2].checked){
total+=obj['E'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['F'].length;zxc2++){
if (obj['F'][zxc2].checked){
total+=obj['F'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['G'].length;zxc2++){
if (obj['G'][zxc2].checked){
total+=obj['G'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['H'].length;zxc2++){
if (obj['H'][zxc2].checked){
total+=obj['H'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['I'].length;zxc2++){
if (obj['I'][zxc2].checked){
total+=obj['I'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['J'].length;zxc2++){
if (obj['J'][zxc2].checked){
total+=obj['J'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['K'].length;zxc2++){
if (obj['K'][zxc2].checked){
total+=obj['K'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['L'].length;zxc2++){
if (obj['L'][zxc2].checked){
total+=obj['L'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['M'].length;zxc2++){
if (obj['M'][zxc2].checked){
total+=obj['M'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['N'].length;zxc2++){
if (obj['N'][zxc2].checked){
total+=obj['N'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['O'].length;zxc2++){
if (obj['O'][zxc2].checked){
total+=obj['O'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['P'].length;zxc2++){
if (obj['P'][zxc2].checked){
total+=obj['P'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['Q'].length;zxc2++){
if (obj['Q'][zxc2].checked){
total+=obj['Q'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['R'].length;zxc2++){
if (obj['R'][zxc2].checked){
total+=obj['R'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['S'].length;zxc2++){
if (obj['S'][zxc2].checked){
total+=obj['S'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['T'].length;zxc2++){
if (obj['T'][zxc2].checked){
total+=obj['T'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['U'].length;zxc2++){
if (obj['U'][zxc2].checked){
total+=obj['U'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['V'].length;zxc2++){
if (obj['V'][zxc2].checked){
total+=obj['V'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['W'].length;zxc2++){
if (obj['W'][zxc2].checked){
total+=obj['W'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['X'].length;zxc2++){
if (obj['X'][zxc2].checked){
total+=obj['X'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['W'].length;zxc2++){
if (obj['W'][zxc2].checked){
total+=obj['W'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['X'].length;zxc2++){
if (obj['X'][zxc2].checked){
total+=obj['X'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['Y'].length;zxc2++){
if (obj['Y'][zxc2].checked){
total+=obj['Y'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['Z'].length;zxc2++){
if (obj['Z'][zxc2].checked){
total+=obj['Z'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AA'].length;zxc2++){
if (obj['AA'][zxc2].checked){
total+=obj['AA'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AB'].length;zxc2++){
if (obj['AB'][zxc2].checked){
total+=obj['AB'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AC'].length;zxc2++){
if (obj['AC'][zxc2].checked){
total+=obj['AC'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AD'].length;zxc2++){
if (obj['AD'][zxc2].checked){
total+=obj['AD'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AE'].length;zxc2++){
if (obj['AE'][zxc2].checked){
total+=obj['AE'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AF'].length;zxc2++){
if (obj['AF'][zxc2].checked){
total+=obj['AF'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AG'].length;zxc2++){
if (obj['AG'][zxc2].checked){
total+=obj['AG'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AH'].length;zxc2++){
if (obj['AH'][zxc2].checked){
total+=obj['AH'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AI'].length;zxc2++){
if (obj['AI'][zxc2].checked){
total+=obj['AI'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AJ'].length;zxc2++){
if (obj['AJ'][zxc2].checked){
total+=obj['AJ'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AK'].length;zxc2++){
if (obj['AK'][zxc2].checked){
total+=obj['AK'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AL'].length;zxc2++){
if (obj['AL'][zxc2].checked){
total+=obj['AL'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AM'].length;zxc2++){
if (obj['AM'][zxc2].checked){
total+=obj['AM'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AN'].length;zxc2++){
if (obj['AN'][zxc2].checked){
total+=obj['AN'].length-1;
ticked+=zxc2;
}
}
for (var zxc2=1;zxc2<obj['AO'].length;zxc2++){
if (obj['AO'][zxc2].checked){
total+=obj['AO'].length-1;
ticked+=zxc2;
}
}
obj['Score'].value='Sco '+ticked+'/'+total;
}
//-->
</script>
However, what this piece of code does is that, every radio button gets only 1 point. What I intended is that every subsequent radio button in each <td> garners incremental points by 1. Eg: Q1, 1st radio button gets 0pt, 2nd radio button gets 1pt, 3rd radio button gets 2pt. Does anyone have any idea how to implement that, all help are greatly appreciated! Hi, I'm completely new to using JavaScript having never used it before so please forgive me if this is ridiculously easy to solve. I want to include an expandable FAQ section in part of my website. I managed to find some code that works however by default the sections are expanded. I want them to automatically be collapsed when the page loads and when you click the image it then expands and shows the hidden text. The code I found is Code: <head><title> Untitled Page </title>
<script type="text/javascript">
function expandable_toggle(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; } var bExpand = tr.style.display == '';
tr.style.display = (bExpand ? 'none' : '');
}
function expandable_changeimage(id, sMinus, sPlus)
{
var img = document.getElementById(id);
if (img!=null)
{
var bExpand = img.src.indexOf(sPlus) >= 0;
if (!bExpand) img.src = sPlus;
else img.src = sMinus;
}
}
function Toggle_trGrpHeader1()
{
expandable_changeimage('trGrpHeader1_Img', 'images/minus.gif', 'images/plus.gif');
expandable_toggle('trRow1');
}
function Toggle_trGrpHeader2()
{
expandable_changeimage('trGrpHeader2_Img', 'images/minus.gif', 'images/plus.gif');
expandable_toggle('row1');
}
</script>
</head>
<body>
<div> <table border="0"> <tr id="trGrpHeader1"> <td colspan="4"><span onclick="javascript:Toggle_trGrpHeader1();"><img src="images/minus.gif" id="trGrpHeader1_Img"/>Pretend this is a header for row 1</span></td> </tr> <tr id="trRow1"> <td> Hello<br><br></td></tr>
<tr id="trGrpHeader2"><td colspan="4"><span onclick="javascript:Toggle_trGrpHeader2();"><img src="images/minus.gif" id="trGrpHeader2_Img"/>Pretend this is a header</span></td> </tr> <tr id="row1"> <td> 123</td></tr>
</table>
</div>
</body>
</html>
Any help you can give would be greatly appreciated. Many thanks Hi! I have a website that requires preloading images a lot. I would like to preload only the most important images first and display the page as quickly as possible. After that it will take at least 20 seconds before the user will need the rest of the images. Is there a way of making two preloading groups and have the second group load in background after the page is already visible? My current preload code is simply like this: <SCRIPT language="JavaScript"> if (document.images) { pic01= new Image(200,200); pic01.src="images/base.jpg"; pic02= new Image(200,200); pic02.src="images/grump1.jpg"; pic03= new Image(200,200); pic03.src="images/grump2.jpg"; pic04= new Image(200,200); pic04.src="images/grump3.jpg"; pic05= new Image(200,200); pic05.src="images/grump4.jpg"; pic06= new Image(200,200); pic06.src="images/love.jpg"; pic07= new Image(200,200); pic07.src="images/smile1.jpg"; pic08= new Image(200,200); pic08.src="images/smile2.jpg"; pic09= new Image(200,200); pic09.src="images/smile3.jpg"; pic10= new Image(200,200); pic10.src="images/smile4.jpg"; pic10= new Image(200,200); pic10.src="images/rotate.gif"; } </SCRIPT> Hi guys! I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster. Here's the script from html page: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">
<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
<img src="06.jpg"/>
<img src="07.jpg"/>
<img src="08.jpg"/>
<img src="09.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
<img src="14.jpg"/>
<img src="15.jpg"/>
<script>
var interval = 4 * 1; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 1000);
};
fade();
</script>
</body>
So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time? Thanks for help! Hey folks, I have a question around Spry. There are two navigational elements to the website I'm building and I'm using Spry to do it. I have a horizontal header menu and vertical main menu. Both menus must load their content in the same content area. I've tried a ton of things and I can't get them to work without breaking anything. Here is the basic Spry code. Any help would be very much appreciated. Thanks!! Code: <div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
The CSS and Jscript files are attached. if you start composing a new message in google groups http://groups.google.com/ and then click the back button a window appear that looks like a javascript confirm popup, however instead of the "OK" "Cancel" buttons, the buttons show a custom wording "Leave this page" "Stay on this page". Anyone knows how do they do that in javascript? I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery Code: <img class="border" alt="googtatic_map" src="http://maps.google.com/maps/api/staticmap?center=51.454863,0.011673&zoom=13&markers=United+Reformed+Church,+111+Burnt+Ash+Road,++Lee,+London+SE12+8RG,+UK&size=250x250&sensor=true" /> I have the above code and it is not validating with the w3c validation for XHTML it has thrown up 8 errors and 14 warnings. Should I ignore them or what? As I do like my code to validate. Hi im not good with javavscript so got some code off the net to do some rollovers, however it doesnt validate. can anyone please help me as to why this maybe? 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" type="text/css" href="joho.css" />
<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</head>
<body>
<div id="wrapper">
<div id="contentwrapper">
<div id="col1">
<ul>
<li><A
HREF="home.html"
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
><img src="menu/row1sq1_home_OP.png" border="0" alt="Home" NAME="home"/></a><SCRIPT TYPE="text/javascript">
<!--
setrollover("rollovers/row1sq1_home_RO.png");
//-->
</SCRIPT></li>
<li><img src="menu/row2sq1_OP.png" alt="2"/></li>
<li><A
HREF="illustrations.html"
onMouseOver = "rollover('illustrations')"
onMouseOut = "rollout('illustrations')"
><img src="menu/row3sq1_illustrations_OP.png" border="0" alt="illustrations" NAME="illustrations"/></a><SCRIPT TYPE="text/javascript">
<!--
setrollover("rollovers/row3sq1_illustrations_RO.png");
//-->
</SCRIPT></li>
<li><img src="menu/row4sq1_OP.png" alt="4"/></li>
</ul>
</div>
<div id="col2">
<ul>
<li><img src="menu/row1sq2_OP.png" alt="1"/></li>
<li><img src="menu/row2sq2_OP.png" alt="2"/></li>
<li><img src="menu/row3sq2_OP.png" alt="3"/></li>
<li><A
HREF="portraits.html"
onMouseOver = "rollover('portraits')"
onMouseOut = "rollout('portraits')"
><img src="menu/row4sq2_portraits_OP.png" border="0" alt="portraits" NAME="portraits"/></a><SCRIPT TYPE="text/javascript">
<!--
setrollover("rollovers/row4sq2_portraits_RO.png");
//-->
</SCRIPT></li>
</ul>
</div>
<div id="col3">
<ul>
<li><A
HREF="about.html"
onMouseOver = "rollover('about')"
onMouseOut = "rollout('about')"
><img src="menu/row1sq3_about_OP.png" border="0" alt="About" NAME="about"/></a><SCRIPT TYPE="text/javascript">
<!--
setrollover("rollovers/row1sq3_about_RO.png");
//-->
</SCRIPT></li>
<li><A
HREF="cards.html"
onMouseOver = "rollover('cards')"
onMouseOut = "rollout('cards')"
><img src="menu/row2sq3_cards_OP.png" border="0" alt="cards" NAME="cards"/></a><SCRIPT TYPE="text/javascript">
<!--
setrollover("rollovers/row2sq3_cards_RO.png");
//-->
</SCRIPT></li>
<li><img src="menu/row3sq3_squeak_OP.png" border="0" alt="1"/></li>
<li><A
HREF="contact.html"
onMouseOver = "rollover('contact')"
onMouseOut = "rollout('contact')"
><img src="menu/row4sq3_contact_OP.png" border="0" alt="contact" NAME="contact"/></a><SCRIPT TYPE="text/javascript">
<!--
setrollover("rollovers/row4sq3_contact_RO.png");
//-->
</SCRIPT></li>
</ul>
</div>
<div id="col4">
<ul>
<li><img src="menu/row1sq4_OP.png" alt="1"/></li>
<li><img src="menu/row2sq4_OP.png" alt="2"/></li>
<li><A
HREF="weddings.html"
onMouseOver = "rollover('weddings')"
onMouseOut = "rollout('weddings')"
><img src="menu/row3sq4_wedding_OP.png" border="0" alt="weddings" NAME="weddings"/></a><SCRIPT TYPE="text/javascript">
<!--
setrollover("rollovers/row3sq4_wedding_RO.png");
//-->
</SCRIPT></li>
<li><img src="menu/row4sq4_OP.png" alt="4"/></li>
</ul>
</div>
</div>
</div>
</body>
</html>
thank Q C |
|||||||