2017-12-09 25 views
0

나는 SweetAlert2을 사용하고 있습니다. 사용자가 Reset 버튼을 클릭하면 확인을 위해 SweetAlert의 팝업이 나타납니다. 나는 이미 이것을했다.
HTMLsweetalert2로 서식을 재설정하는 방법

<form id="storyForm" action="ephp/storyPublish.php" method="POST"> 
<input type="text" name="userName" /> 
<input type="Email" name="userEmail" /> 
<button type="submit">Publish</button> 
<button type="reset" class="model_img" id="sa-warning">Reset</button> 
</form> 

JS

$("#storyForm").on('reset', function(e) { 
    var form = $(this); 
    e.preventDefault(); 
    swal({ 
     title: "Are you sure?", 
     text: "Do you really want to reset?", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: '#DD6B55', 
     confirmButtonText: 'Go on!', 
     cancelButtonText: "Ops no!", 
    }).then(function(isConfirm) { 
     swal({ 
      title: 'Success!', 
      text: 'Invoice created! Go to the invoice tab to pay it.', 
      type: 'success' 
     }, function() { 
      form.reset(); 
     }); 
    },function(dismiss) { 
     if(dismiss == 'cancel') { 
      swal("Cancelled", "Invoice not created!", "error"); 
     } 
    }); 
}); 

팝업이 표시되지만 양식을 다시 설정하라는되지 않으며,이 자바 스크립트 문제점은 무엇입니까?
여기에 내가 다시 당신의 양식을 얻을 수 있지만, 처리 후, 내가 입력 ID를 부여하여 작동하도록 얻을 수 있었다 당신의 form.reset() 함수를 사용하지 않았다 안녕 Fiddle

답변

0

입니다 sweetalerts 결과를 사용하여 재설정.

HTML

<form id="storyForm" action="ephp/storyPublish.php" method="POST"> 
<input type="text" name="userName" id="userName" /> <!--added the id here--> 
<input type="Email" name="userEmail" id="userEmail" /> <!--added the id here--> 
<button type="submit">Publish</button> 
<button type="reset" class="model_img" id="sa-warning">Reset</button> 
</form> 

자바 스크립트

$("#storyForm").on('reset', function(e) { 
    var form = $(this); 
    e.preventDefault(); 
    swal({ 
     title: "Are you sure?", 
     text: "Do you really want to reset?", 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: '#DD6B55', 
     confirmButtonText: 'Go on!', 
     cancelButtonText: "Ops no!", 
    }).then((result) => { 
     if (result.value) { 
      $("#userName").val(""); 
      $("#userEmail").val(""); 
      swal(
      'Reset!', 
      'Your form has been reset.', 
      'success' 
     ) 
      /*swal({ 
      title: 'Success!', 
      text: 'Invoice created! Go to the invoice tab to pay it.', 
      type: 'success' 
      });*/ 
      // result.dismiss can be 'cancel', 'overlay', 
      } else if (result.dismiss === 'cancel') { 
      swal("Cancelled", "Invoice not created!", "error"); 
     } 
     }); 
}); 

주 - 나는 송장을 추가하지 않는 한 귀하의 성공 swal에서 주석하지만 당신은 그래서 그냥 해제 주석에게 그것을 제거하려는 경우 위의 sweetalert.

여기있는 jsFiddle

나는이 행운 도움이되기를 바랍니다!