When a response is typed into the box and the user advances to the next, the function upperCase(id,answer,correct) capitalizes the user's input and then checks the input against the correct response (stored in a hidden input whose value is pulled from a SQL query). If the response is correct, the box's background color changes:
My problem is that when the page loads with the values from the SQL query, I want all of the text boxes to run their upperCase function to change their respective background colors and I cannot figure out how to do this when the correct responses and initial text box values are set from the SQL query.
I thought I was genius when I put the onload event in there (which obviously doesnt work with an input element). I need an alternative solution. Please help!
The reason is that you call correctX.value, but in the system it looks like you are calling variable, not selecting a value form the input element. Instead, you should either pass the id and select the element with document.getelementbyid, or you just do
Take note of the apostrophes around the id name, otherwise errors will occur. Other than that your code looks to work fine.
Now, each element does indead have an onload event, however it can not be called from the element itself. Instead, you must catch the onload event by calling the windows onload. This will allow you to run a function on any element when the document loads. This will require you to change your code around, because you will need to loop through your sql result twice. Once to fill the window.onload event, and another to create the inputs. An alternative method, which I provided below, is to simply open a script tag and make the function call below each input. This is not the way I would do it, I would use the onload event, however this method will not require you to change your code, albeit a bit sloppy.
I modified your code so that I could test to make sure it was working.
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>
function upperCase(id,answer,correct){
var x=document.getElementById(id).value
document.getElementById(id).value=x.toUpperCase()
if(answer.toUpperCase() == correct.toUpperCase()){
document.getElementById(id).style.background = "#00FF00" //green
}
else {
document.getElementById(id).style.background = "#FF0000" //red
}
}
window.onload = function(){
// here is where you run a php loop to run the function for each of the elements on the page
//<?php foreach($row as $key => $value){ echo "upperCase('field".$key"',document.getElementById('field".$key."').value,document.getElementById('correct".$key."').value)"; } ?>
}
</script>
</head>
<body>
<input type="text" id="correct1" value="testing" />
<?php $counter = 1; echo "
<input
type='text'
id='field1'
name='field1'
value='testing'
style='width:202px'
onblur=\"upperCase(this.id,this.value,document.getElementById('correct1').value);\");'
onLoad=\"upperCase(this.id,this.value,document.getElementById('correct1').value);\">
<script>upperCase('field1',document.getElementById('field1').value,document.getElementById('correct1').value)</script>
"; ?>
<div onload='alert(1)'>This onload doesn't work.</div>
</body>
</html>
On a final note, I am not sure what type of security you imagine for your answers, but if a user wanted to find the answer to your question they could simply view the source code, since all the answers are stored within the document. It may not be a big deal, but just thought I would point that out. If you wanted to make sure that the user was answering correctly without submitting the form and without having the answers available in plain site you could include an ajax event in your function that calls the server to capture the answer.
Thanks for the help with the bad code, JavaScript is not my strong suit.
Your solution worked perfectly! Thanks so much for the time and effort you put into it. I had no idea it was possible to use php within a JavaScript function. Obviously you can use it anywhere.
As for the security of the answers - this page will only be seen by the user (teacher) who had set the correct answers in the first place. The students will not have access to this page. Thanks for the heads up though!
Alternative to html element onload
Reply With Quote
Bookmarks