Not allowing to procceed using Javascript

Question

So basically what I'm trying to do is to block access to submit information. I usually do this by onsubmit=CheckForm() and if a false is returned then the data just won't be sent. In this code, I'm using different functions and haven't found a way in which I could return false and not allow to continue.

*The functions basically say if the typed URL is a valid image, or not, by an alert. After the alert, it sends the data. I would like it to show the alert, but just simply not send anything but refresh(For instance).

Javascript:

        var test = function () {
            document.getElementById('image2').src = document.getElementById('image').value;
        }

        var errorCallback = function () {
            alert('Image did not exist');
            return false;
        }

        var loadCallback = function () {
            alert('Image existed');
        }

HTML:

<p style="font-size:20px; font-family:Arial; font-weight:800;">URL to prested Image: </p><input type="text" id="image" name="image" class="URLs" value="http://"/>


        <p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>  
        <img style="display: none" id="image2" onerror="errorCallback()" onload="loadCallback()" />

Thanks in advance!

"*if a `false` is returned then the data just won't be sent*". This behavior is non-standard (but widely supported, though). The only standard way to cancel default actions is [`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault). — Oriol, Jul 05 '14 at 00:33

score 2 · Answer 1 · 2014-07-05T00:16:29.743

2

Option 1: Return false in the function.

By returning false in the onclick handler, it will prevent the submit event from taking place.

Change:

var test = function () {
  document.getElementById('image2').src = document.getElementById('image').value;
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>

To:

var test = function () {
  document.getElementById('image2').src = document.getElementById('image').value;
  return false;
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="return test()" /></p>

Option 2: Pass the event handler and stop the default event from occurring.

Change:

var test = function () {
  document.getElementById('image2').src = document.getElementById('image').value;
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="return test()" /></p>

To:

var test = function (e) {
  document.getElementById('image2').src = document.getElementById('image').value;
  e.preventDefault();
};

<p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="return test(event)" /></p>

Option 3: Change the input to type=button as to not trigger a submit event.

Change:

 <p><input type="submit" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>

To:

 <p><input type="button" class="myButton" style="padding: 25px 150px; line-height:6px;" value="Submit Details" onclick="test()" /></p>

edited Jul 05 '14 at 00:16

answered Jul 05 '14 at 00:11

Second fix should be `var test = function(e) {//...` – Andreas Louv Jul 05 '14 at 00:13
1

Hey, thanks. But I disagree. In all your methods it'll just return false constantly, no matter if the loadCallback or the errorCallback was activated. What I'm actually trying to do is return true and continue if loadCallback was activated(Image exists), or return false if errorCallback was activated(Image does not exist). – Dan Brooks Jul 05 '14 at 00:28
Your question was how you were to prevent the form from submitting, and I was trying to show you various ways to do so. Feel free to update your question if it is different. – Jul 05 '14 at 00:31
The question isn't so much about preventing the form submission but rather how to allow it in case of success .. and the success depends on an asynchronous process :) – Ja͢ck Jul 05 '14 at 00:32
"*By returning `false` in the `onclick` handler, it will prevent the submit event from taking place*". This behavior is non-standard (but widely supported, though). The only standard way to cancel default actions is [`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault). – Oriol Jul 05 '14 at 00:43
@Oriol Both `event.preventDefault` and `return false` are standard. The deprecated method is setting `event.returnValue` to `false`. – Barmar Jul 05 '14 at 05:01
@Barmar See http://stackoverflow.com/a/18971429/1529630. `return false` is DOM0, and there isn't a W3C specification for this. – Oriol Jul 05 '14 at 15:42
@Oriol So, prior to DOM2, there was no standard way, because DOM0 wasn't specified anywhere. The de facto standard was `return false`, and every browser supports it. `Event.preventDefault()` was added later, but DOM0 is still supported for compatibility. – Barmar Jul 05 '14 at 15:56

Ja͢ck · Accepted Answer · 2014-07-05T01:08:40.590

0

The first step is to prevent default action of submit to take place, i.e.:

function test(e)
{
    e.preventDefault();
    // ...
}

<button type="submit" ... onclick="test.call(this, event);" ... >

The above binds the element as this in the test() function and passes the event object.

The second step requires an asynchronous action of loading an image, so get rid of all the other functions and the hidden image; then proceed with just this:

function test(e)
{
    e.preventDefault();

    var form = this.form; // keep reference of the form

    var i = new Image(); // create image object
    i.onload = function() {
        form.submit(); // hurray, it works, save it!
    };

    i.onerror = function() {
        alert('awww, image did not exist');
    };

    // all set, load the image!
    i.src = document.getElementById('image').value;
}

edited Jul 05 '14 at 01:08

answered Jul 05 '14 at 00:28

Ja͢ck

170,779
38
263
309

Thank you so much, that worked for me! Could you explain please what the following lines of code: onclick="return test.call(this);" - What the .call for, and the this? i.src = document.getElementById('image').value; - I have got a question about that; this line code defines the src of the image, which is used in the functions above it. How could it be then? Shouldn't it be placed ONLY above the function for them to work?(Just a logical question - I know it works both ways) – Dan Brooks Jul 05 '14 at 01:00
@user3804691 The `this` inside `onclick=""` refers to the element, so `test.call(this)` binds it to the `test()` function as `this` as well. – Ja͢ck Jul 05 '14 at 01:03
@user3804691 The `.src` just sets a property on the `Image` object, just like `.onclick` and `.onerror`. The trick to only setting `.src` at the last point is to avoid cache hits not calling the `.onload()`. – Ja͢ck Jul 05 '14 at 01:05

Not allowing to procceed using Javascript

2 Answers2