Warum funktioniert der Button Offene Zahlungen begleichen nicht?

Hallo!

Mein Button Offene Zahlungen begleichen übergibt nicht den UserNamen der in dem DropDown menü asgewählt wird und ich habe keine Ahnung warum das so ist?

<div class="col-md-4"> <!-- Adjust the column width to make it narrower -->

<!-- Filters Card -->

<div class="card mb-3">

<div class="card-header">

Filter

</div>

<div class="card-body">

<div class="mb-3">

<label for="userDropdown" class="form-label">Benutzer auswählen:</label>

<select class="form-select" id="userDropdown" onchange="filterOrders()">

<option value="All Users">Alle Benutzer</option>

@foreach($users as $user)

<option value="{{ $user }}">{{ $user }}</option>

@endforeach

</select>

</div>

<div class="form-check">

<input class="form-check-input" type="checkbox" value="" id="unpaidCheckbox" onchange="filterOrders()">

<label class="form-check-label" for="unpaidCheckbox">

Offene Zahlungen anzeigen

</label>

</div>

</div>

</div>

<!-- Total Owed and Pay Button Card -->

<div class="card mb-3">

<div class="card-header">

Offene Zahlungen

</div>

<div class="card-body text-center total-owed-box">

<h4>€<span id="totalOwed">0.00</span></h4>

<form method="POST" action="{{ route('admin.payOrders') }}" id="payForm" class="d-inline">

@csrf

<input type="hidden" name="user" id="hiddenUser">

<input type="hidden" name="unpaidOnly" id="hiddenUnpaidOnly">

<button type="button" class="btn btn-success" onclick="showPasswordModal('{{ route('admin.payOrders') }}')">Offene Zahlungen begleichen</button>

</form>

</div>

</div>

<div class="modal fade" id="passwordModal" tabindex="-1" aria-labelledby="passwordModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="passwordModalLabel">Passwort eingeben</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

</div>

<div class="modal-body">

<div class="mb-3">

<label for="passwordInput" class="form-label">Passwort</label>

<input type="password" class="form-control" id="passwordInput" required>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>

<button type="button" class="btn btn-primary" onclick="validatePassword()">Bestätigen</button>

</div>

</div>

</div>

</div>

</form>

function showPasswordModal(validateUrl, orderId, userName) {

const password = prompt('Please enter your password:');

if (password) {

validatePassword(validateUrl, orderId, password, userName);

}

}

function validatePassword(validateUrl, orderId, password, userName) {

const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

fetch(validateUrl, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'X-CSRF-TOKEN': token

},

body: JSON.stringify({

password: password,

orderId: orderId,

userName: userName

})

})

.then(response => response.json())

.then(data => {

if (data.valid) {

alert('Order marked as paid successfully.');

location.reload(); // Reload the page to update the order status

} else {

alert(data.message);

}

})

.catch(error => {

console.error('Error:', error);

alert('An error occurred. Please try again later.');

});

}

</script>

<!-- Bootstrap Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</body>

</html>

Könnt ihr mir vllt. helfen, DANKE!!!!

HTML, Webseite, JavaScript, Programmiersprache, Webentwicklung, Frontend

Meistgelesene Beiträge zum Thema Webseite