Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 36

Thread: Anyway to know if an image did NOT display in the browser?

  1. #11
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Oh. Then do what Nile was saying. Take the source of the image that the user submits or whatever an put it in that "new Image('image here');' declaration. Replace 'image here' with the image name. That's just about it.

  2. #12
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I see. Can you help me configure this. I have a user submitting a full url of an image in a simple form. I want to check that the form exists before allowing the submit? if it doesnt exists I dont want the form to submit.

  3. #13
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Nonono...
    Code:
    <img src="image.png" onerror="alert('Your picture doesn\'t exist!');" />
    Jeremy | jfein.net

  4. #14
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nile View Post
    Nonono...
    Code:
    <img src="image.png" onerror="alert('Your picture doesn\'t exist!');" />
    By nonono you mean there's no way to validate an image url through a form textfield first before an attempted display on screen?

    Maybe I should have a passthrough page and validate the attempted submission on the next page before committing an entry so the image can actually attempt to display first? And then maybe I could disable the submit button on the second page if an onerror is thrown for the image and have them go back to the first form for re-entry.

    I'll just do the message to inform the user at least for now.
    Last edited by monaya; 02-27-2009 at 02:44 PM.

  5. #15
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nile View Post
    Nonono...
    Code:
    <img src="image.png" onerror="alert('Your picture doesn\'t exist!');" />
    Also the code above did not work correctly, but this one is perfect:

    <script type="text/javascript">
    var newImage = new Image();
    newImage.src = "image.png";
    newImage.onerror = function(){
    alert("Your picture doesn't exist. ");
    };
    </script>

  6. #16
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Try this:
    Code:
    <script type="text/javascript">
    var validateImg = function(form){
       var validate = new Image();
       validate.src = form.elements["imageURL"].value;
       validate.onerror = function(){ alert("Bad Image!"); };
    };
    </script>
    <form onsubmit="validateImg(this); return false;">
    <input type="text" name="imageURL" /><input type="submit" value="Validate!" />
    </form>
    Jeremy | jfein.net

  7. #17
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    That's great. But right now its not submitting the form if the image does validate properly.

    Also is there a way to limit image widths and heights or is that way complicated?
    Last edited by monaya; 02-27-2009 at 10:59 PM.

  8. #18
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I tried using return true;

    it still doesnt submit the form if the image validates properly. It just ignores it.

  9. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,372
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function validateImg(form){
       if(validateImg.loaded){
        validateImg.loaded = false;
        return true;
       }
       form.elements.sub.disabled = true;
       if(validateImg.obj[form.elements["imageURL"].value + '_$_attempted']){
        if(!confirm(form.elements["imageURL"].value + ' has been attempted before and failed.\n' +
        'continue anyway?')){
         form.elements["imageURL"].value = '';
         return form.elements.sub.disabled = false;
        }
       else validateImg.obj[form.elements["imageURL"].value] = false;
       }
       if(!validateImg.obj[form.elements["imageURL"].value]){
        validateImg.obj[form.elements["imageURL"].value] = true;
        var validate = new Image();
        validate.onload = function(){
         validateImg.loaded = true;
         validateImg.obj[form.elements["imageURL"].value] = form.elements.sub.disabled = false;
         form.submit();
        };
        validate.onerror = function(){
         alert("Bad Image!");
         form.elements.sub.disabled = validateImg.loaded = false;
         validateImg.obj[form.elements["imageURL"].value + '_$_attempted'] = true;
        };
        validateImg.loaded = false;
        validate.src = form.elements["imageURL"].value;
       }   
       return false;
    }
    validateImg.obj = [];
    </script>
    </head>
    <body>
    <form action="#" onsubmit="return validateImg(this);">
    <div>
    <input type="text" name="imageURL"><input name="sub" type="submit" value="Validate!">
    </div>
    </form>
    </body>
    </html>
    Last edited by jscheuer1; 02-28-2009 at 06:15 PM. Reason: punctuation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #20
    Join Date
    Jan 2009
    Posts
    82
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    OK. That's pretty darn nice. I love your special touch about picking up second attempts. I might want to still disallow allowing it go through however. But I guess its a good idea in case the script fails to authenticate properly as well!

Tags for this Thread

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
  •