0

i'm using Laravel 9 and i have some buttons that need the user confirm. For example the user clicks on 'confirm order' a modal appears with message and two more buttons - cancel, confirm. If the user clicks on 'confirm' the form will be submitted and another modal message will pop out : 'Order confirmed' with button 'ok'. The 'Ok' button for closing the widnow of second modal is not working. I don't use often JS, can somebody tell me what's wrong in the code?

view confirm form and modal:

@if ($grid_data->first()->stato_ordine == 0) 
    <div>
        <button id="confirmBtn" class="btn btn-success me-3"><i class="fa-regular fa-circle-check me-2"></i>Conferma Ordine</button>
    </div>
    <!-- The Modal -->
    <div id="myConfirm" class="custom-confirm">
        <!-- Modal content -->
        <div class="modal-content text-center">
            <p>Sei sicuro di voler confermare l'ordine?</p>                            
            <form class="confirm-form" action="{{route('ordini.update', $grid_data->first()->id)}}" method="POST">
                @csrf
                @method('PATCH')
                <input type="number" value="1" name="conferma_ordine" hidden>
                <button type="submit" class="btn btn-success me-3">Conferma</button>
                <span class="cancel btn btn-warning">Annulla</span>
            </form>
        </div>
    </div>
@endif

User clicks confirm and this pops out:

@if(session()->has('status'))
    <!-- The Modal -->
    <div id="myModal" class="custom-modal">
        <!-- Modal content -->
        <div class="modal-content shadow-success">
        <div class="text-center">
            <p class="text-success fs-5">{{ session()->get('status') }}</p>
            <i class="fa-regular fa-circle-check text-success fs-1 d-block"></i>
            <button class="modal-btn btn btn-success mt-4">Ok</button>
        </div>
        </div>
    </div>
@endif

JS:

var myConfirm = document.getElementById("myConfirm");

var confirmBtn = document.getElementById("confirmBtn");


var cancel = document.getElementsByClassName("cancel")[0];

// When the user clicks on the button, open the modal
confirmBtn.onclick = function() {
  myConfirm.style.display = "block";
}


cancel.onclick = function() {
  myConfirm.style.display = "none";
}


window.onclick = function(event) {
  if (event.target == myConfirm) {
    myConfirm.style.display = "none";
  }
}

var modal = document.getElementById("myModal");

var closeBtn = document.getElementsByClassName("modal-btn")[0];

closeBtn.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
Mustafa Poya
  • 2,615
  • 5
  • 22
  • 36
userpc1000
  • 5
  • 3

1 Answers1

0

Your first window.onclick gets overwritten by the second one. Can you try to change your 2 occurrences of window.onclick in

window.addEventListener("click", function(event){/* your function here*/}

or if you really want to use onclick, try putting the entire logic inside one onclick event like so:

window.onclick = function(event) {
  if (event.target == myConfirm) {
    myConfirm.style.display = "none";
  }
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Also, you might wanna check this similar question

BigOoga
  • 1
  • 3