jQuery, Java Script : Form에 삭제 확인 모달 추가 : 예제, 구현

jQuery, Java Script : Form에 삭제 확인 모달 추가 : 예제, 구현

 

이 튜토리얼에서는 삭제와 같은 것을 위해 form에 확인 모달 상자를 추가하는 방법입니다. 대부분의 튜토리얼은 한 가지 목적으로 설계된 양식 으로이 작업을 수행하는 방법과 양식에 채워진 엔티티를 삭제하는 방법에 대한 예만 보여줍니다.

즉, 삭제를 위해 제출 버튼이 하나만 있음을 의미합니다 . form에 두 개의 제출 단추가있는 대화 상자를 추가하는 방법을 보여줍니다. 즉, 하나의 제출 단추를 사용하여 엔티티를 편집하고 다른 제출 단추를 사용하여 form을 삭제하는 편집 양식에서 이 예제를 사용할 수 있습니다. 

 

 

HTML Form And Modal Box

먼저 HTML 양식을 만들어 시작하겠습니다. 중요한 부분은 제출 버튼과 JavaScript이므로 이 예제를 매우 기본적입니다.  아래는 모달 상자 내용이 아래에있는 HTML form이며, 모달 상자에는 삭제를 확인하는 단추와 삭제를 취소하는 단추가 두 개 있습니다.

 

<form action="" method="">

<p><label for="username">Username:</label> <input type="text" name="username" id="username"></p>

<input type="submit" id="delete" name="delete" value="Delete" class="confirm-delete-modal" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>

<div class="modal modal-effect-blur" id="modal-1">
    <div class="modal-content">
        <h3>Are you sure you want to delete?</h3>
        <div>
            <button class="modal-delete">Delete</button>
            <button class="modal-delete-cancel">Cancel</button>
        </div>
    </div>
</div>
<div class="modal-overlay"></div>

 

이제 기능에 필요한 기능을 정확히 설명하기 위해, 엔티티 데이터로 양식을 채울 때 이 데이터를 편집하고 제출 편집 버튼을 클릭 할 수 있습니다. 서버 측에서 클릭 한 제출 버튼을 선택할 수 있습니다.

$ _POST 변수에 추가됩니다. 우리는 단순히 양식을 제출하기 위해 편집 버튼에 아무것도 할 필요가 없지만 삭제 버튼은 기본 동작을 비활성화하고 클릭 이벤트를 변경하여 모달 상자를 표시해야합니다. 그런 다음 확인 삭제 버튼에 다른 클릭 이벤트를 추가해야합니다. 그러면 삭제 제출 버튼을 사용하여 양식을 제출하여 서버 측에서 제출 삭제 버튼을 클릭했을 수 있습니다.

이 예제에서는 jQuery를 사용하여 모달 박스의 기능을 수행하고 양식 제출을 트리거합니다. 먼저 삭제 제출 버튼의 기본 동작을 비활성화해야합니다. 삭제 버튼에 클릭 이벤트를 추가하고 false를 반환하면 이 작업을 쉽게 수행 할 수 있습니다.

 

$('.confirm-delete-modal').on('click', function(e){
    return false;
});

 

또한 기본 동작을 비활성화 할 때 모달 상자를 표시해야합니다. 이 작업은 HTML 클래스의 modal-show를 추가하여 수행됩니다.

 

 

$('.confirm-delete-modal').on('click', function(e){
    $('#modal-1').addClass('modal-show');
    return false;
});

 

이제 모달 박스의 두 버튼에 기능을 추가 할 수 있습니다. 취소 버튼은 단순히 모달 표시 HTML 클래스를 제거하여 모달 박스를 숨기려고 합니다.

 

 

$('.modal-delete-cancel').on('click', function(){
    $(this).closest('.modal').removeClass('modal-show');
});

 

일반적으로 jQuery에서는 .submit () 함수를 사용하여 양식을 제출할 수 있지만 제출 버튼을 클릭 한 서버 측에서 픽업 버튼을 클릭했는지 확인해야합니다. 이를 위해 양식 삭제 버튼에서 클릭 이벤트를 트리거합니다.

 

$('.modal-delete').on('click', function(){
    $('.confirm-delete-modal').trigger('click');
});

 

현재 우리가 겪고있는 문제는 이미이 버튼의 기본 동작이 false를 반환하도록 변경되어 양식을 제출하지 않았다는 것입니다. 따라서 이 트리거 이벤트에서 기능을 변경하여 true를 반환하고 양식을 제출해야합니다. 이것은 이 예제에서 여러 가지 방법으로 수행 할 수 있습니다. 양식 요소에 데이터 공격자를 추가 할 것입니다.이 설정되면 true를 반환하고 양식을 제출하십시오. 설정되지 않은 경우 모달 상자를 표시하고 false를 반환합니다 아래 최종 jQuery를 제공합니다.

 

 

var $ = jQuery.noConflict();
jQuery(document).ready(function( $ ){
    delete_confirmation_modal.init();
});

var delete_confirmation_modal =
{
    init: function()
    {
        $('.confirm-delete-modal').on('click', function(e){
            if($(this).closest('form').attr('data-submit') == "true")
            {
                $(this).closest('form').removeAttr('data-submit');
                $('.modal-delete').closest('.modal').removeClass('modal-show');
                return true;
            } else {
                $('#modal-1').addClass('modal-show');
                return false;
            }
        });

        $('.modal-delete').on('click', function(){
            $(this).closest('.modal').prev('form').attr('data-submit', 'true');
            $('.confirm-delete-modal').trigger('click');
        });

        $('.modal-delete-cancel').on('click', function(){
          $(this).closest('.modal').removeClass('modal-show');
        });
    }
}