1

function getMeta() {
  var img = new Image();
  var verif = true;
  img.onload = function() {
    if (this.width != 468 && this.height != 60) {
      alert('error : only these image sizes are accepted : 468x60');
      return false;
    } else
      alert('loaded successfully');
  };
  img.onerror = function() {
    alert('error : this is not a valid image');
    return false;
  };
  img.src = document.getElementById('t1').value;
  return true;
}
<form action="https://www.paypal.com/cgi-bin/webscr" 
      method="post" target="_blank" id="form1" 
      onsubmit="return getMeta();">

function img.onload won't return anything I need a return value of true or false.

I want to use the return value in onsubmit of the form. could anyone help me?

king bla
  • 55
  • 1
  • 8
  • 1
    `.onload` is async which means it is called by the system some time in the future and any value you return from it just goes back into the system, not into your own code. – jfriend00 Apr 24 '16 at 16:09
  • I tried to use callback but it doesn't work for me.. however, i just need a solution for my code. if you could help me i'll be greatful. thanks – king bla Apr 24 '16 at 16:55
  • @Oriol - This is NOT a straight duplicate of that post because that post does NOT describe how to solve this particular problem. Yes, it describes why you can't return results from an async callback via callbacks or promises, but it does not explain how to apply a solution to an async form submit. I originally marked this as a dup of that and then upon further comment form the OP realized that that other answer does NOT explain how to solve this problem so I reopened it. You should reopen. That other post is not going to provide a complete answer for this OP. – jfriend00 Apr 24 '16 at 17:23
  • @jfriend00 That's exactly what i wanted to say, thanks – king bla Apr 24 '16 at 17:31
  • Please don't mark this a dup of [How do I return the response from an asynchronous call](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). It has already been marked a dup of that twice and then reopened each time because that post does not describe how to actually solve the async form submit problem here. It does help understand why there's a problem, but doesn't address an actual solution to this problem. – jfriend00 Apr 24 '16 at 17:43

2 Answers2

1

For general reference, you should go read How do I return the response from an asynchronous call?. This describes the general issue of obtaining an async result. After reading that, you will hopefully understand why you can't just return a value from .onload() and expect that to be the return value from getMeta(). But, that answer by itself doesn't offer a full solution to your specific issue.

So, now lets describe in a bit more detail what's going on in your code and then discuss an option for fixing it.

img.onload is asynchronous. That means it finishes sometime, long after getMeta() has already returned.

Meanwhile, you're trying to do this:

onsubmit="return getMeta();"

Which makes it look like you're trying to use an async result to determine whether the form should submit or not. That simply can't be done that way. The async result is not yet known and your getMeta() function always returns true.

You can restructure your code so that it never submits synchronously. You load the image and, only when the image loads, do you either display an error to the user or manually submit the form. This has potential user interface issues because the user hits the submit button and nothing happens immediately (because you're loading the image to validate). This leaves the user wondering what's going on. They will often think it didn't work and either press the submit button again or think it's just broken. So, you typically need a bunch of UI around this to disable the button, provide feedback that you're verifying the image now, then provide an appropriate error message if the image doesn't verify and often other UI controls should be disabled while you're verifying the image so the user doesn't go off and do other things while you're in the middle of trying to decide if you're going to submit this form or not.

So, to fix the submit:

In your onsubmit handler, you would always return false so the form never submits immediately. Then, in the onload() handler (after the image has loaded), you would manually submit the form or show an error.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • @Oriol - If you're the downvoter, please reconsider. The post you marked this a dup of does not actually tell the OP how to solve their particular problem. It does describe some of the issues, but is not a complete solution which is why I provided an answer that tries to address this particular issue more directly. – jfriend00 Apr 24 '16 at 17:26
  • I didn't downvote. I'm considering if I should retract my close vote. – Oriol Apr 24 '16 at 17:27
  • @Oriol - I originally closed it as a dup of the same question, but then changed my mind when I realized that that other answer doesn't fully tell the OP how to solve a form submit issue which is the specific question here. I've added more info about [that dup](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) in my answer as background and as a contributor to the actual solution. – jfriend00 Apr 24 '16 at 17:30
  • @jfriend00 i found the solution finally : else alert( 'loaded successfully' ); document.getElementById('form1').submit(); /////////////////////////////////////////////////////////////////////////////
    ///////////////////////////////// thanks a lot, you helped me so much
     – king bla Apr 24 '16 at 18:25
  • @kingbla - Since it looks you may be relatively new here, if your question is now answered, you can indicate that to the community by clicking the checkmark to the left of the answer that helped you the most. That will also earn you some reputation points which can lead to earning more privileges on the site. – jfriend00 Apr 24 '16 at 18:26
1

Finally I found the solution which is like said jfriend00 to submit the form manually when image loaded successfully and by adding return false to "onsubmit" to block the form submission on error. thanks every body 

<script>
function getMeta(){   
    var img = new Image();
    img.onload = function(){
        if (this.width != 468 && this.height != 60)
    {alert( 'error : only these image sizes are accepted : 468x60' );
    return false;}
    
    else
    alert( 'loaded successfully' );
    document.getElementById('form1').submit();
    };
 img.onerror = function() {alert( 'error : this is not a valid image');
 return false;
  };
    img.src = document.getElementById('t1').value;
 return true;
}
</script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="form1" onsubmit="getMeta(); return false;">
king bla
  • 55
  • 1
  • 8