Question

I am trying to execute code when a button is pressed. I currently have the “catch all” alert set up.

My HTML code

<body  style="overflow:hidden;" >
   <div class="addCustomerMain main">
      <h1>Add Customer</h1>
      <hr>
      <form method="post" id="addCustomer">
         <div class="formContent">
            <div class="formElement">
               <label for="custName">Name</label>
               <input class="txtLarge" type="text" name="custName" id="custName">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custAddress">Address</label>
               <input class="txtLarge" type="text" name="custAddress" id="custAddress">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custCity">City</label>
               <input class="txtSmall" type="text" name="custCity" id="custCity">
            </div>
            <div class="formElement">
               <label for="custState">State</label>
               <input class="txtXSmall" type="text" name="custState" id="custState">
            </div>
            <div class="formElement">
               <label for="custZip">Zip</label>
               <input class="txtXSmall" type="text" name="custZip" id="custZip">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custPhone">Phone</label>
               <input type="text" name="custPhone" id="custPhone" class="txtLarge">
            </div>
         </div>
      </form>
      <div class="formContent" id="divCheckInSubmit">
         <div class="formElement">
            <button id="btnCheckInSubmit" class="btnSubmit">Add Customer</button>
         </div>
      </div>
   </div>
   <script src="../js/addCustomer.js" defer></script>
</body>

My Javascript

$(document).ready(function() {
    //bulk submit handler This section works when this form is shown.  In this instance, I have the form
    //I currently have the form hidden
    $("#bulkSubmit").submit(function(e) {
        e.preventDefault();

        var form = $(this);
        var frmUrl = form.attr('action')

        $.ajax({
            type: "POST",
            url: frmUrl,
            data: form.serialize()
        });
    });


});

addButton = document.getElementById('btnCheckInSubmit');
addButton.addEventListener("click", function() {
    alert("clicked");
});

The code I want to work, works if I comment out the JQuery for the bulksubmit, but if it is still in there, the checkinsubmit button’s eventlister for “click” does not fire.

OnClick EventListener not working in my code

LEAVE A COMMENT Hủy