tinfanide Posted October 22, 2011 Share Posted October 22, 2011 <!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>Online Exercise</title><script>function checkAnswers(){if(document.getElementById("response1").value == "a"){ document.getElementById("hint1").innerHTML = "Good thinking shown!"; document.getElementById("hint1").style.color = "green"; document.getElementById("ans1").innerHTML = "Correct"; document.getElementById("ans1").style.color = "green"; } else { document.getElementById("hint1").innerHTML = "Try again!"; document.getElementById("hint1").style.color = "red"; document.getElementById("ans1").innerHTML = "Wrong!" document.getElementById("ans1").style.color = "red"; }}function checkHints(){if(document.getElementById("response1").value == "a"){ document.getElementById("hint1").innerHTML = "On the right track!"; document.getElementById("hint1").style.color = "green"; } else { document.getElementById("hint1").innerHTML = "Think more of the ABC"; document.getElementById("hint1").style.color = "red"; }}</script></head><body><form onsubmit="checkAnswers()"><div id="ques1"> <span id="quesNo1">Question 1</span> <br /> What is the first letter of the English Alphabet?</div> <br /><input type="text" id="response1" onfocus="this.value=''" onblur="checkHints()" value="Answer here please!" /> <input type="submit" value="Submit" /> <label id="hint1"></label> <label id="ans1"></label></form></body></html> My question is:Once the form is submitted, the returned value "Correct" / "Wrong" will be immediately erased out.How can I keep them?Is it what the onsumbit event does? Link to comment Share on other sites More sharing options...
Don E Posted October 22, 2011 Share Posted October 22, 2011 The onsubmit attribute is set to a function and if the function returns true, it will be submitted to the form processor script. If false, it won't.(Returns false). So in other words, you don't need: <input type="submit" value="Submit" /> Because you have the onsubmit attribute for the form. Link to comment Share on other sites More sharing options...
tinfanide Posted October 22, 2011 Author Share Posted October 22, 2011 But even I delete this <input type="submit" value="Submit" /> The part I want to keep still goes immediately. Link to comment Share on other sites More sharing options...
Don E Posted October 22, 2011 Share Posted October 22, 2011 Because you have the onsubmit for the form. Remove that as well and use a button: <input type="button" value="Submit" onclick="checkAnswers();" /> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2011 Share Posted October 22, 2011 keep the onsubmit and use <form onsubmit="checkAnswers(); return false"> which will prevent form being submitted, and clearing the result. Link to comment Share on other sites More sharing options...
tinfanide Posted October 22, 2011 Author Share Posted October 22, 2011 <input type="text" name="ques1" value="" onblur="checkAnswers()" /> I just found another round.I may use onblur(). Link to comment Share on other sites More sharing options...
tinfanide Posted October 22, 2011 Author Share Posted October 22, 2011 Another question: <!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>Online Exercise</title><script>function checkAnswers(q){ if(document.getElementById("response"+q).value == "a" || document.form.ques+q[0].checked == true){ document.getElementById("hint"+q).innerHTML = "Good thinking shown!"; document.getElementById("hint"+q).style.color = "green"; document.getElementById("ans"+q).innerHTML = "Correct"; document.getElementById("ans"+q).style.color = "green"; } else { document.getElementById("hint"+q).innerHTML = "Try again!"; document.getElementById("hint"+q).style.color = "red"; document.getElementById("ans"+q).innerHTML = "Wrong!" document.getElementById("ans"+q).style.color = "red"; } }function checkHints(q){ if(document.getElementById("response"+q).value == "a" || document.form.ques+q[0].checked == true){ document.getElementById("hint"+q).innerHTML = "On the right track!"; document.getElementById("hint"+q).style.color = "green"; } else { document.getElementById("hint"+q).innerHTML = "Think more of the ABC"; document.getElementById("hint"+q).style.color = "red"; } }</script></head><body><form name="form"> <div id="ques1"> <span id="quesNo1">Question 1</span> <br /> What is the first letter of the English Alphabet?</div> <br /> <input type="text" id="response1" onfocus="this.value=''" onblur="checkHints(1)" value="Answer here please!" /> <input type="button" value="Submit" onclick="checkAnswers(1);" /> <label id="hint1"></label> <label id="ans1"></label> <div id="ques2"> <span id="quesNo2">Question 2</span> <br /> What is the first letter of the English Alphabet?</div> <br /> <input type="radio" name="ques2" onclick="checkAnswers(2);" onblur="checkHints(2)" value="a" />a <br /> <input type="radio" name="ques2" onclick="checkAnswers(2);" onblur="checkHints(2)" value="b" />b <br /> <input type="radio" name="ques2" onclick="checkAnswers(2);" onblur="checkHints(2)" value="c" />c <br /> <input type="radio" name="ques2" onclick="checkAnswers(2);" onblur="checkHints(2)" value="d" />d <br /> <input type="button" value="Submit" onclick="checkAnswers(2);" /> <label id="hint2"></label> <label id="ans2"></label> </form></body></html> I want to use the same checkAnswers function for different types of input typeWhy can't I use " || " in the if condition statement? if(document.getElementById("response"+q).value == "a" || document.form.ques+q[0].checked == true) FF Console reports document.getElementById("response"+q) is null Link to comment Share on other sites More sharing options...
tinfanide Posted October 22, 2011 Author Share Posted October 22, 2011 keep the onsubmit and use <form onsubmit="checkAnswers(); return false"> which will prevent form being submitted, and clearing the result. But if I add <form onsubmit="checkAnswers(); return false" action="check.php"> I want to record the user's answer on the check.php page <?phpecho document.getElementById("response1").value;?> Will the php page record it? (because now "return false" is used, the onsumbit event seems to stop working)I know it is wrong to use php in this way.But just no idea of using php to store the javascript thing Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2011 Share Posted October 22, 2011 if checkHints(2) is passed that condition will look for id="response2" which does not exist, and therefore give a null result Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2011 Share Posted October 22, 2011 But if I add <form onsubmit="checkAnswers(); return false" action="check.php"> I want to record the user's answer on the check.php page <?phpecho document.getElementById("response1").value;?> Will the php page record it? (because now "return false" is used, the onsumbit event seems to stop working)I know it is wrong to use php in this way.But just no idea of using php to store the javascript thing Obviously! your first example had no indication this information was going to be sent to another page, and that is why I provided return false code, as i said it prevents form submission, that causes the page to clear and return to original state. A better option would be to store the users answer in hidden input, send that, and show it in check.php function checkAnswers(q){if(document.getElementById("response"+q).value == "a" || document.form.ques+q[0].checked == true){document.getElementById("hint"+q).innerHTML = "Good thinking shown!";document.getElementById("hint"+q).style.color = "green";document.getElementById("ans"+q).innerHTML = "Correct";document.getElementById("ans"+q).style.color = "green";} else {document.getElementById("hint"+q).innerHTML = "Try again!";document.getElementById("hint"+q).style.color = "red";document.getElementById("ans"+q).innerHTML = "Wrong!"document.getElementById("ans"+q).style.color = "red";}document.getElementById("answer").value = document.getElementById("ans"+q).innerHTML;} <input type="hidden" id="answer" name="answer" /> Link to comment Share on other sites More sharing options...
tinfanide Posted October 22, 2011 Author Share Posted October 22, 2011 But can't I pass the parameter q into the form.name like this: // q = 2 if(document.form.ques+q+[0].checked == true) <!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>Online Exercise</title><script>function checkAnswers(q){ if(document.form.ques+q+[0].checked == true){ document.getElementById("ans"+q).innerHTML = "Correct"; document.getElementById("ans"+q).style.color = "green"; } else { document.getElementById("ans"+q).innerHTML = "Wrong!" document.getElementById("ans"+q).style.color = "red"; } }</script></head><body><form name="form"> <div id="ques2"> <span id="quesNo2">Question 2</span> <br /> What is the first letter of the English Alphabet?</div> <br /> <input type="radio" name="ques2" onclick="checkAnswers(2);" value="a" />a <br /> <input type="radio" name="ques2" onclick="checkAnswers(2);" value="b" />b <br /> <label id="ans2"></label> </form></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2011 Share Posted October 22, 2011 Maybe with if(document.form["ques"+q][0].checked == true) or var RefValueJoin="ques"+q; if(document.form[RefValueJoin][0].checked == true) Link to comment Share on other sites More sharing options...
tinfanide Posted October 22, 2011 Author Share Posted October 22, 2011 Yes, thank you. You always remind me of something in scripting.Long time ago someone like you taught me to use [ ].Just don't know why it should be. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.