Advanced Search

Results 1 to 8 of 8

Thread: Display an image in a div with javascript

  1. #1
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Display an image in a div with javascript

    Ok, I have a form which will be filled in by customers.

    I want a small image to be displayed next to each textbox when the user has filled in the box. I have the validation sorted with javascript, but I would like an image to be displayed in a div depending on if they have filled in the correct information or not.

    My JS isn't brilliant, but I'm thinking I'm going to need to use the getelementbyid thingy.

    Something that basically says:

    if blah blah = blah

    document.getElementbyID('MyDiv') = frmvalidation
    frmvalidation.image.src = 'tick.gif'

    else

    document.getElementbyID('MyDiv') = frmvalidation
    frmvalidation.image.src = 'cross.gif'



    You get the picture.

    Any help would be appreciated!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Show us your form validation script so we could whip the requirement for you.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Code:
    <SCRIPT LANGUAGE=javascript>
    function checkTestInput(me,e) {
    	var complete;
    	var valueEntered;
    	
    	complete = me.value;
    	
    	if(complete!=null || complete.length!=0) {
    		valueEntered = complete.substring(complete.length-1,complete.length);
    			if ( (allowedChars.indexOf(valueEntered) == -1) && (checkIfCRLF(e)==false) ) {
    				Layer501.style.visibility='visible';
    				Layer500.style.visibility='hidden';
    			} else {Layer501.style.visibility='hidden'; Layer500.style.visibility='visible';
    				complete = complete.substring(0, complete.length-1);
    			
    			} 
    		
    			<!--- me.value = complete; --->
    	}
    }
    </SCRIPT>
    
    				<table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="10"><input name="Name" type="text" class="Main" size="20" value="<cfif IsDefined ('session.CheckRequiredOrderFirstName')><cfif #session.CheckRequiredOrderFirstName# IS ''><cfelse>#session.CheckRequiredOrderFirstName#</cfif></cfif>" onBlur="checkTestInput(this,event);"></td>
                        <td><div name="Layer500" id="Layer500" style="visibility:hidden;width:60px;height:0px">Good</div><div name="Layer501" id="Layer501" style="visibility:hidden;width:60px;height:0px">Bad</div></td>
                      </tr>
                    </table>
    At the moment, its got 2 divs, and depending on the user input, it displays or hides them. I'd rather work out of one div, with a new image to display in the div (ie. a tick) for a correct input and a cross for a bad input. Also, I want the image to display as soon as the user moves onto the next textbox, so onBlur right?

    Thanks

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    How does the validation works? What should be the correct input and what's not?
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The validation is taken from a script in another file, which, basically defines some allowed characters.

    So if a user entered a series of letters, the image would show a 'tick', if the user entered some characters that weren't allowed, i.e. &*%$ then the image would show a 'cross'.

    Thanks

  6. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    I'm completely buffled.

    There are some variables in your script that are'nt working:
    allowedChars, checkIfCRLF function, Layer501 and Layer500 variable is'nt a part of the snippet you've provided.


    Anyway, if this does works in reality, have you tried replacing the texts good and bad with the image you wish?
    Code:
    <div name="Layer500" id="Layer500" style="visibility:hidden;width:60px;height:0px">Good</div><div name="Layer501" id="Layer501" style="visibility:hidden;width:60px;height:0px">Bad</div>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  7. #7
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The functions you mention are working, and appear in a separate script.

    The method you have mentioned would work, but I really want this to work with just one div, not two. And I have two images that need to be loaded, therefore, I would need two div (using your method).

    I want to load the images into one div, depending on the user input.


  8. #8
    Join Date
    May 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey,
    why don't you change the "src" attribute of image and then dynamically load the image.

Bookmarks

Posting Permissions

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