不允許使用Javascript

Question

所以基本上我試圖做的是阻止訪問提交信息。我通常通過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()" /> 

提前感謝！

Answer 1

的第一步是防止服從發生的默認操作，即：

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

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

以上綁定元素爲this在test()函數中，並將e發泄物體。

第二步需要加載圖像的異步操作，所以擺脫所有其他功能和隱藏的圖像;那麼繼續下去：

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; 
} 

Answer 2

Option 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> 

Option 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> 

Option 3:更改input到type=button爲不會觸發submit事件。

變化：

<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>