不允许继续使用Javascript

Not allowing to procceed using Javascript

本文关键字：Javascript 继续 不允许      更新时间：2023-09-26

所以基本上我要做的是阻止访问提交信息。我通常通过onsubmit=CheckForm()来做到这一点，如果返回false，那么数据就不会被发送。在这段代码中，我使用了不同的函数，并且还没有找到一种可以返回false而不允许继续的方法。

*这些函数基本上通过警告来判断输入的URL是否为有效图像。警报发出后，它发送数据。我希望它显示警报，但只是简单地不发送任何东西，但刷新(例如)。

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()" />

提前感谢!

选项1:在函数中返回false

通过在onclick处理程序中返回false，它将阻止提交事件发生。

改变:

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>

: 

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>

选项2:传递事件处理程序并停止默认事件的发生

改变:

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>

: 

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>

选项3:将input更改为type=button，以不触发提交事件

改变:

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

: 

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

第一步是防止提交的默认操作发生，即:

function test(e)
{
    e.preventDefault();
    // ...
}
<button type="submit" ... onclick="test.call(this, event);" ... >

以上将元素绑定为test()函数中的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;
}
相关文章：