Jquery not handling href click

user_1706738 0
Viewed 90

I have a delete hyper link

<a href="#" class="btn btn-danger btn-mini" id="delCategory">Delete</a>

and my Jquery function

    $(document).ready(function()
    {
        $("#password_validate").validate({
            rules:{
                current_pwd:{
                    required: true,
                    minlength:6,
                    maxlength:20
                },
                new_pwd:{
                    required: true,
                    minlength:6,
                    maxlength:20
                },
                confirm_pwd:{
                    required:true,
                    minlength:6,
                    maxlength:20,
                    equalTo:"#new_pwd"
                }
            },
            errorClass: "help-inline",
            errorElement: "span",
            highlight:function(element, errorClass, validClass) {
                $(element).parents('.control-group').addClass('error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parents('.control-group').removeClass('error');
                $(element).parents('.control-group').addClass('success');
            }
        });
        $("#delCategory").click(function(){
            alert("Test");
            if(confirm('Are you sure you want to delete this Category?')){
                return true;
            }
            return false;
        });
    });

My other parts of the code can access the #password_validate and make sure the password field is required and all. But the #delCategory from the same HTML page is unable to access the function and return confirmation.

I am able to call the Jquery function from Chrome Console and get the pop-up and confirmation, but my href is failing to call it and it processes the delete without confirming.

html jquery javascript
1 Answers

Add event.preventDefault() to your click(...) event handler to prevent the default action/behaviour that belongs to the event from occurring. i.e:

Event.preventDefault()

<form  method="POST" action="{{ url('/admin/delete-category/'.$category->id) }}">
    @csrf
    @method("DELETE")
    <input type="hidden" name="id" value="{{$category->id}}">
    <input id="delCategory" type="submit" class="btn btn-danger text-center btn-mini" value="Delete">
</form>

jQuery


$("#delCategory").click(function (e) {

    e.preventDefault();

    if (!confirm('Are you sure you want to delete this Category?')) {
        return;
    }

    const $form = $(this).closest("form");

    $.ajax({
        type: $form.attr("method"),
        url: $form.attr("action"),
        data: {
            "_method": $form.find("input[name=_method]").val(),
            "_token": $form.find("input[name=_token]").val(),
            "id": $form.find("input[name=id]").val()
        }
    });
});

ADDENDUM

If you have multiple "delete" buttons in a single document, you may consider using a class=... attribute instead of id=....i.e:

<!-- Instead of: -->
<input id="delCategory" ...> ❌

<!-- Use this: -->
<input class="delCategory" ...> ✅

Modify the JavaScript accordingly. i.e:

$(".delCategory").click(function (e) {
    // ...

That would ensure that the event handler is applied to all relevant 'dom' elements with a particular class attribute instead of a single dom element matching a unique id attribute.

Resources:
What's the difference between an id and a class?

What is the difference between id and class in CSS, and when should I use them?

user_73765900
Related