JezK
Edit File: delivery-slots-frontend.js
jQuery(document).ready(function($) { const form = $('#check-delivery-slot-form'); const resultContainer = $('#delivery-slots-result'); const submitButton = form.find('button[type="submit"]'); const resetButton = $('#reset-form'); form.on('submit', function(e) { e.preventDefault(); const pincode = $('#check-pincode').val(); // Add loading state submitButton.addClass('loading').prop('disabled', true); resetButton.prop('disabled', true); resultContainer.empty(); $.ajax({ url: deliverySlots.ajaxUrl, type: 'POST', data: { action: 'check_delivery_slot', pincode: pincode, nonce: deliverySlots.nonce }, success: function(response) { if (response.success) { const slots = response.data.slots; let html = '<div class="success-message">'; html += '<h3>Delivery Timings</h3>'; html += '<div class="slots-list">'; slots.forEach(function(slot) { html += `<div class="slot-item"><p>${slot}</p></div>`; }); html += '</div></div>'; resultContainer.html(html); } else { resultContainer.html(` <div class="error-message"> <p>${response.data}</p> </div> `); } }, error: function() { resultContainer.html(` <div class="error-message"> <p>An error occurred while checking delivery slots. Please try again.</p> </div> `); }, complete: function() { // Remove loading state submitButton.removeClass('loading').prop('disabled', false); resetButton.prop('disabled', false); // Scroll to results $('html, body').animate({ scrollTop: resultContainer.offset().top - 50 }, 500); } }); }); // Reset button functionality resetButton.on('click', function() { // Clear the form form[0].reset(); // Clear and hide results with animation resultContainer.fadeOut(300, function() { $(this).empty().show(); }); // Focus back on input $('#check-pincode').focus(); }); });