Onclickアプリケーションイベントをキャンセルする

Question

js ...に新しいあなたの助けが必要です。キャンセルボタンをクリックして、オンラインフォームセッションをキャンセルするキャンセルボタンを作成したいとします。セッションをキャンセルする前に、アプリケーションセッションをキャンセルする前にユーザーの確認を求める通知ポップアップ（onclickイベント）を表示する必要があります。以下のコードを参照してください：あなたは上で聴きたい要素に「クリック」イベントリスナーを添付し、要素を選択し、フォームを編集せず

<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

ユーザーを要求されますクリックconfirm関数に必要な最初にあなたがキャンセルコードを配置しようとしている

<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

を、この場合には、タグを「キャンセル」。クリックが登録されると、確認ボックスを使用して確認します。もしOKがフォームを取得してそれをリセットし、ユーザーをリダイレクトするなら。そうでなければ、何かをしてください。

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