Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to work with get element by id

Status
Not open for further replies.
vanan4u

vanan4u

IS-IT--Management
Feb 26, 2012
3
i've created a set of online questionnaire and writing javascript to calculate the percentage.there are 12 questions with answer choice from 0-6. the below code is written to do calculation but because this is an online questionnaire i need to use get element by id to do it.i m not very sure how to do it..anyone can help me..thanks

//html codes <form name =myform method="post" action="">

var numOfGroups = 12;

function calc() {
var score = 0;
for (var j=1; j<=numOfGroups; j++) {
var f = document["myform"]["ques"+j];
for (var i=0; i<f.length; i++) {
if (f.checked) {
score += Number(f.value /72 *100);
}
}
}

alert ("Your Score is " + score);
return false;
</script
 
Sort by date Sort by votes
Not sure I understand, seems like you are already doing the calculates. Why do you need to change? getElementById has no bearing on wether it's online or off. Your current approach should work fine online.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
ok..then...but how to validate user check all the questions before proceeding with calculation..at the moment i dont have alert on the unchecked button..tq
 
Upvote 0 Downvote
Well that depends on how your questions are set up.

Show us some HTML of your questionnaire.

As a starter make sure each set of answers has its own name, and simply loop as you are doing through each set making sure you find at least one that is checked.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote


<script type = "text/javascript">

function validate_form ( )
{


if ( ( document.myform.gender[0].checked == false ) && ( document.myform.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );

return false;
}

if ( ( document.myform.nationality[0].checked == false ) && ( document.myform.nationality[1].checked == false ) )
{
alert ( "Please choose your Nationality" );

return false;
}


if ( document.myform.age.selectedIndex == 0 )
{
alert ( "Please select your Age." );
return false;
}

var numOfGroups = 12;

function calc() {
var score = 0;
for (var j=1; j<=numOfGroups; j++) {
var f = document["myform"]["ques"+j];
for (var i=0; i<f.length; i++) {
if (f.checked) {
score += Number(f.value /72 *100);
}
}
}

alert ("Your Score is " + score);
return false;
</script
</script>

<HTML>
<HEAD>
<H2><P ALIGN="CENTER"
<TITLE><font color="blue"> ABC:</font></TITLE><H2></P>
<H3><P ALIGN ="CENTER"><font color="ff0ff0"><font face="arial"> CDE </font></font></P></H3>
</HEAD>
<body>
<form name="myform" onSubmit="return validate_form();">

<table border="5" cellspacing="5" cellpadding="3" align="center" bgcolor="#FFFFFF">
<tr>
<th colspan="15" bgcolor="66FFCC"> Part A: </th>
<tr>
<td>Please select your gender:</td>
<td colspan="15"><input type="radio" name="gender" value="Male">Male <input type="radio" name="gender" value="Female">Female</td>
</tr>
<td>Nationality:</td>
<td colspan="15"><input type="radio" name="nationality" value="Malaysian">Malaysian<input type="radio" name="nationality" value="Others (please specify)">Others(please specify)<input type="text" size="30" maxlength="30" /></td>
<tr>
<td>Please select your age group:</td>
<td colspan="15">
<select name="age">
<option value="">Please Select an Option:</option>
<option value="1"><25</option>
<option value="2">25-35</option>
<option value="3">36-45</option>
<option value="4">46-55</option>
<option value="5">>56</option>
</select>
</tr>
</table><br />

<TH colspan="15" bgcolor="66FFCC" ALIGN="center"> &nbsp; &nbsp; Part B: Please choose the answer where appropriate.</br> </p>
<tr>
<td>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<td>1. I like apple </td>
<td align="center"><input type="radio" name="ques1" value="0" /></td>
<td align="center"><input type="radio" name="ques1" value="1" /></td>
<td align="center" ><input type="radio" name="ques1" value="2" /></td>
<td align="center" ><input type="radio" name="ques1" value="3" /></td>
<td align="center"><input type="radio" name="ques1" value="4" /></td>
<td align="center" ><input type="radio" name="ques1" value="5" /></td>
<td align="center" ><input type="radio" name="ques1" value="6" /></td>
</tr>
<tr>
<td>2. I like orange.</td>
<td align="center"><input type="radio" name="ques2" value="0" /></td>
<td align="center"><input type="radio" name="ques2" value="1" /></td>
<td align="center" ><input type="radio" name="ques2" value="2" /></td>
<td align="center" ><input type="radio" name="ques2" value="3" /></td>
<td align="center"><input type="radio" name="ques2" value="4" /></td>
<td align="center"><input type="radio" name="ques2" value="5" /></td>
<td align="center"><input type="radio" name="ques2" value="6" /></td>
</tr>
<tr>
<td>3. I like grape</td>
<td align="center"><input type="radio" name="ques3" value="0" /></td>
<td align="center"><input type="radio" name="ques3" value="1" /></td>
<td align="center"><input type="radio" name="ques3" value="2" /></td>
<td align="center"><input type="radio" name="ques3" value="3" /></td>
<td align="center"><input type="radio" name="ques3" value="4" /></td>
<td align="center"><input type="radio" name="ques3" value="5"/>/td>
<td align="center"><input type="radio" name="ques3" value="6"/>/td>
</tr>
</table><br/>
<input type="submit" name="send" value="Send Details">
<input type="reset" value="Reset!">
</form>
</body>

</html>
 
Upvote 0 Downvote
Something like this:

Loop through the questions, and loop through the radio buttons until you find a checked one. then move on to the next question. If you don't find a checked one in a set of answered issue an alert and stop execution there.

Code: 
function validateAnswers(){
 for(var i=1;i<=12; i++){
   var Answered=false;
   for(var j=0; j<=6;j++){
      if(document.forms["myform"]["ques"+ i][j].checked){
	Answered=true;
        continue;
      }
    }
   if(Answered==false){
   alert("Question #" + i + "has not been answered");
	return false;
   }
  return true; 
}

}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
381
Kennelbloke
Kennelbloke
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
275
Rayj0000
Rayj0000
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
313
lexer
lexer
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
104
ggriffit
ggriffit
zydjohn
  • Locked
  • Question
How to load JavaScript files to enable DOM element click
Replies
1
Views
111
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top