www.webdeveloper.com
Results 1 to 4 of 4

Thread: Alternative to html element onload

Hybrid View

  1. #1
    Join Date
    Apr 2011
    Posts
    3

    Question Alternative to html element onload

    I have a text box that gets its name, id, and value from a SQL query.
    PHP Code:
    echo "<input type='text' id=" $row['ID'] . "field" $counter " name=" $row['ID'] . "field" $counter " value='" $response['I' $counter] . "' style='width:12px' onblur='upperCase(this.id,this.value,correct" $counter ".value);' onload='upperCase(this.id,this.value,correct" $counter ".value);'>" 
    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:
    Code:
    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
    		}
    	}
    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!

  2. #2
    Join Date
    Apr 2011
    Posts
    3
    This might help to see the text box code more easily:
    Code:
    <input type='text' 
    	   id=" . $row['ID'] . "field" . $counter . " 
    	   name=" . $row['ID'] . "field" . $counter . " 
    	   value='" . $response['I' . $counter] . "' 
    	   style='width:12px' 
    	   onblur='upperCase(this.id,this.value,correct" . $counter . ".value);' 
    	   onchange='upperCase(this.id,this.value,correct" . $counter . ".value);'>

  3. #3
    Join Date
    Mar 2010
    Posts
    128
    Hello,

    A couple quick things. Technically, this should not work
    Code:
    onblur='upperCase(this.id,this.value,correct" . $counter . ".value);'
    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
    Code:
    onblur='upperCase(this.id,this.value,document.getElementById('correct" . $counter . "').value);'
    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.

  4. #4
    Join Date
    Apr 2011
    Posts
    3
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles