Onclick取消應用程序事件

Question

新的js ...需要你的幫助。我想創建一個取消按鈕，取消按鈕被點擊時取消在線表單會話。在取消會話之前，我想要一個通知彈出窗口（onclick event），在取消應用程序會話之前詢問用戶的確認。請參見下面的代碼：

<form> 
    <div class="form-group"> 
     <label for="Product">Product</label> 
     <input type="text" name="product" id="product" required="required" value=""> 
    </div> 
    <div class="form-group"> 
     <label for="Product">Product1</label> 
     <input type="text" name="product1" id="product1" required="required" value=""> 
    </div> 
    <div class="form-group"> 
     <label for="Product">Product2</label> 
     <input type="text" name="product2" id="product2" required="required" value=""> 
    </div> 
    <div> 
    <button name="submit">Add Product</span></button>&nbsp;&nbsp;<a href="http://www.google.com" onclick="">**Cancel**</a>   
    </div> 


</form> 

Answer 1

首先你需要點擊確認功能，會詢問用戶之前批准繼續

<a href="http://www.google.com" onclick="confirmCancel()">**Cancel**</a> 
<script> 
    function confirmCancel() { 
     var message = "Are you sure?"; 
     if (confirm(message)) { 
      // do what you want 
     } 
    } 
</script> 

Answer 2

<form id='form1'> 
<div class="form-group"> 
<label for="Product">Product</label> <input type="text" name="product" id="product" required="required" value=""> </div> 
<div class="form-group"> 
<label for="Product">Product1</label> <input type="text" name="product1" id="product1" required="required" value=""> </div> 
<div class="form-group"> <label for="Product">Product2</label> <input type="text" name="product2" id="product2" required="required" value=""> </div> 
<div> 
<button name="submit">Add Product</span></button>&nbsp;&nbsp; 
<a href="javascript:void(0)" onclick="reset('form1')">**Cancel**</a> </div> 
</form> 
    <script> 
    function(id){ 
     if(confirm("do you want to cancel?")){ 
      $("#"+id)[0].reset(); 
     } 
    } 
    </script 

> 

Answer 3

沒有編輯表單中選擇元素，附加一個「點擊」事件偵聽器，你要聽上，在這種情況下，「取消」標籤的元素。點擊註冊後，使用確認框確認。如果確定獲取表單並重置它並重定向用戶。否則，做別的事。

// grab your cancel anchor tag 
 
var anchor = document.querySelector("[href='http://www.google.com']"); 
 
// grab your form 
 
var form = document.getElementsByTagName('form')[0]; 
 
// add an event listener on to your cancle anchor tag 
 
anchor.addEventListener('click',clicked =>{ 
 
// assign your confirm to varable yes 
 
var yes = confirm('are you sure you want to cancle'); 
 
if(yes===true){ 
 
// if they confirm their departure reset the form 
 
form.reset(); 
 
//alert them of a successfull form reset and inform them of the reroute 
 
alert('the form has been reset you are going to be rerouted to google'); 
 
// use location to reroute to a different domain 
 
//window.location.href("http://www.google.com") 
 
// or within the current domain using a relative path 
 
// window.location.href = '../' one level up 
 
// winsow.location.href = '/path' relative to a domain 
 
}else{ 
 
alert('you decided to cancle'); 
 
// do nothing 
 
} 
 
});

<form> 
 
    <div class="form-group"> 
 
     <label for="Product">Product</label> 
 
     <input type="text" name="product" id="product" required="required" value=""> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="Product">Product1</label> 
 
     <input type="text" name="product1" id="product1" required="required" value=""> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="Product">Product2</label> 
 
     <input type="text" name="product2" id="product2" required="required" value=""> 
 
    </div> 
 
    <div> 
 
    <button name="submit">Add Product</span></button>&nbsp;&nbsp;<a href="http://www.google.com" onclick="">**Cancel**</a>   
 
    </div> 
 
</form>