I have a very simple HTML respond to webhook node that is getting hung open. How can I troubleshoot this?
Multiple Payment Form /* Style for the table font color */ table, table th, table td { color: white; }Multiple Payment Form
Property:
Select Property
Property 1
Property 2
Property 3
<!-- Payment Method Selection -->
<div class="form-group">
<label for="paymentMethod">Payment Method:</label>
<select class="form-control" id="paymentMethod" name="paymentMethod" required>
<option value="" disabled selected>Select Payment Method</option>
<option value="credit_card">Credit Card</option>
<option value="bank_transfer">Bank Transfer</option>
<option value="paypal">PayPal</option>
</select>
</div>
<div class="form-group">
<label for="payee">Payee:</label>
<select class="form-control" id="payee" name="payee" required>
<option value="" disabled selected>Select Payee</option>
<option value="payee1">Payee 1</option>
<option value="payee2">Payee 2</option>
<option value="payee3">Payee 3</option>
</select>
</div>
<!-- Payment Type Selection (Moved under Payment Method) -->
<div class="form-group">
<label for="paymentType">Payment Type:</label>
<select class="form-control" id="paymentType" name="paymentType" required>
<option value="" disabled selected>Select Payment Type</option>
<option value="Cash">Cash</option>
<option value="Check">Check</option>
</select>
</div>
<!-- Payment Date (Default to today) -->
<div class="form-group">
<label for="paymentDate">Payment Date:</label>
<input type="date" class="form-control" id="paymentDate" name="paymentDate" required>
</div>
<!-- Amount (Numeric input) -->
<div class="form-group">
<label for="amount">Amount:</label>
<input type="number" step="0.01" class="form-control" id="amount" name="amount" required>
</div>
<!-- Notes (Initially hidden) -->
<div class="form-group" id="notesGroup" style="display: none;">
<label for="notes">Notes:</label>
<textarea class="form-control" id="notes" name="notes"></textarea>
</div>
<!-- Toggle for Notes -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="showNotes">
<label class="form-check-label" for="showNotes">Show Notes</label>
</div>
<!-- Add Payment Button -->
<button type="button" class="btn btn-success mt-3" id="addPayment" disabled>Add Payment</button>
<!-- Display Added Payments as a Table -->
<div id="addedPayments">
<h3 class="mt-4">Added Payments</h3>
<h4 id="totalAmount">Total Amount: $0.00</h4> <!-- Updated for Total Amount -->
<table class="table table-bordered">
<thead>
<tr>
<th>Property</th>
<th>Payment Method</th>
<th>Payment Type</th>
<th>Amount</th>
<th>Payment Date</th>
<th>Notes</th>
<th>Action</th> <!-- New column for the Remove button -->
</tr>
</thead>
<tbody>
<!-- Added payments will be displayed here -->
</tbody>
</table>
</div>
<!-- Submit Button (Soft Commit) -->
<button type="button" class="btn btn-primary mt-3" id="softCommit">Soft Commit Payments</button>
<!-- Submit Button (Hard Commit) -->
<button type="submit" class="btn btn-danger mt-3" id="hardCommit" style="display: none;">Submit Payments</button>
</form>
</div>
<!-- Include jQuery and Bootstrap 4 JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
// Function to log messages to the console
function logMessage(message) {
console.log(message);
}
$(document).ready(function () {
// Function to toggle the Notes field visibility
$('#showNotes').change(function () {
$('#notesGroup').toggle(this.checked);
logMessage('Notes field toggled.');
});
// Function to enable/disable the "Add Payment" button based on required fields
function toggleAddButton() {
var property = $('#property').val();
var paymentMethod = $('#paymentMethod').val();
var paymentType = $('#paymentType').val();
var amount = $('#amount').val();
var paymentDate = $('#paymentDate').val();
var addButton = $('#addPayment');
addButton.prop('disabled', !(property && paymentMethod && paymentType && amount && paymentDate));
logMessage('Add Payment button state changed.');
}
// Call the toggleAddButton function when any of the required fields change
$('#property, #paymentMethod, #paymentType, #paymentDate, #amount').change(function () {
toggleAddButton();
logMessage('Required fields changed.');
});
// Enable or disable the Payee dropdown based on Property selection
$('#property').change(function () {
var selectedPropertyId = $(this).val();
var payeeSelect = $('#payee');
payeeSelect.empty().prop('disabled', true); // Clear and disable Payee dropdown initially
toggleAddButton(); // Update the "Add Payment" button state
logMessage('Property selection changed.');
});
// Click event handler for the "Add Payment" button
$('#addPayment').click(function () {
// Get values from the form fields
var property = $('#property').val();
var paymentMethod = $('#paymentMethod').val();
var paymentType = $('#paymentType').val();
var amount = $('#amount').val();
var paymentDate = $('#paymentDate').val();
var notes = $('#notes').val();
var payee = $('#payee').val(); // Get the selected payee
// Format amount as currency
var amountFormatted = '$' + parseFloat(amount).toFixed(2);
// Create a new row in the table to display the payment
var paymentRow = '<tr>' +
'<td>' + property + '</td>' +
'<td>' + paymentMethod + '</td>' +
'<td>' + paymentType + '</td>' +
'<td>' + amountFormatted + '</td>' +
'<td>' + paymentDate + '</td>' +
'<td>' + notes + '</td>' +
'<td>' + payee + '</td>' +
'<td><button class="btn btn-danger removePayment">Remove</button></td>' +
'</tr>';
// Append the payment row to the table body
$('#addedPayments tbody').append(paymentRow);
// Clear the form fields except for the amount field
$('#amount').val('');
// Recalculate and update the total amount
updateTotalAmount();
logMessage('Payment added.');
// Disable the "Add Payment" button after adding a payment
$('#addPayment').prop('disabled', true);
});
// Function to update the total amount
function updateTotalAmount() {
// Calculate the total amount from the added payments
var totalAmount = 0;
$('#addedPayments tbody tr').each(function () {
var amount = parseFloat($(this).find('td:eq(3)').text().replace('$', ''));
totalAmount += amount;
});
// Update the total amount display
$('#totalAmount').text('Total Amount: $' + totalAmount.toFixed(2));
logMessage('Total amount updated.');
}
// Click event handler for the "Soft Commit" button
$('#softCommit').click(function () {
// Log a message when the "Soft Commit" button is clicked
logMessage('Soft Commit button clicked.');
});
// Log a message when the form is submitted (Hard Commit)
$('#paymentForm').submit(function (event) {
logMessage('Form submitted (Hard Commit).');
});
});
</script>