I cant figure out why my button isn't communicating with SweetAlert2

46 Views Asked by At

I have a form to issue gear and equipment to employees. At the bottom, I have a button that should use SweetAlert2 to pop-up an agreement message. I have the script and css links in the head section already. Its just when I click on the button, nothing happens. Im new to this and assume im missing something important.

<div class="mt-2">
<button  type="submit" class="btn btn-primary me-2" id="issueGear">Issue Gear</button>
<button type="reset" class="btn btn-outline-secondary">Cancel</button>
</div>

                        
<script type="text/javascript">

$(document).ready(function() {
$('#issueGear').click(function(){
Swal.fire({
type: 'success',
title: 'Agreement',
text: 'I agree to return all issued items upon my voluntary or involuntary dismissal from 
the department. If I fail to return any item(s), I may be help responsible for the 
replacement cost of the item(s).'
})
})
}
                 
</script>
1

There are 1 best solutions below

2
gunatheeban On

There is a syntax error in "$(document).ready"

    <script type="text/javascript">
            $(document).ready(function() {
                $('#issueGear').click(function(){
                    Swal.fire({
                        type: 'success',
                        title: 'Agreement',
                        text: 'I agree to return all issued items upon my voluntary or involuntary dismissal from the department. If I fail to return any item(s), I may be held responsible for the replacement cost of the item(s).'
                    });
                });
            });
        </script>

then change the button type to "button"

<button  type="button" class="btn btn-primary me-2" id="issueGear">Issue Gear</button>