Respond to webhook hanging open

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>
        <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>

        <!-- 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>

        <!-- 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>

        <!-- 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>

        <!-- 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>

        <!-- 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>

        <!-- 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">
                        <th>Payment Method</th>
                        <th>Payment Type</th>
                        <th>Payment Date</th>
                        <th>Action</th> <!-- New column for the Remove button -->
                    <!-- Added payments will be displayed here -->

        <!-- 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>

<!-- Include jQuery and Bootstrap 4 JS -->
<script src=""></script>
<script src=""></script>

    // Function to log messages to the console
    function logMessage(message) {

    $(document).ready(function () {
        // Function to toggle the Notes field visibility
        $('#showNotes').change(function () {
            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 () {
            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>' +

            // Append the payment row to the table body
            $('#addedPayments tbody').append(paymentRow);

            // Clear the form fields except for the amount field

            // Recalculate and update the total amount
            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).');

It looks like your topic is missing some important information. Could you provide the following if applicable.

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:

Hi @jreibel, I am sorry you’re having trouble.

It looks like your screenshot got lost. Seeing your code appears to be a HTML snippet I am not quite sure where n8n comes into play and what the problem is here.

Can you confirm which error exactly you are seeing, and which version of n8n exactly you are running?

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.