Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

thepsion5's avatar

It's because your function called on your button's click doesn't have e.preventDefault(); set anywhere, and Jeff's does.

This is Jeff's code:

$('input[data-confirm], button[data-confirm]').on('click', function(e) {
    var input = $(this);

    input.prop('disabled', 'disabled');

    //javascript pauses while it waits for you to hit the "yes" or "no" button
    if( !confirm(input.data('confirm') ) {
        //keeps the click event from triggering the form's submit event
        e.preventDefault();
    }

    input.removeAttr('disabled');
});

What happens here is that the javascript waits for you to click "Yes" or "No" on the popup before it returns from the confirm() function. So if you click no, then e.preventDefault() runs. This keeps the button's click event from triggering the form's submit event.

Now, let's look at your javascript code:

$('input[data-confirm], button[data-confirm]').on('click', function(e) {
    var input = $(this);

    input.prop('disabled', 'disabled');

    //javascript DOES NOT pause while bootstrap displays the modal, because it's just some HTML being moved around on the screen
    $("#myModal").modal('show', function() {
        var title = form.data('remote-title');
        var message = form.data('remote-message');
        $('.model-header h1').html(title);
        $('.model-body p').html(message);
    });
    //e.preventDefault() is never called!
    //after this function returns, the click event triggers the form's submit event
});

There's an important but subtle difference here: javascript doesn't stop running just because the modal is fading in. It's goes right ahead and runs the rest of the function. Since there's no prevent default here, the click event trigger's the form's submit event, which sends off the AJAX request

1 like
nolros's avatar

Very late and so very rough, but here goes.

  1. POST vs DEL only matters if your are using RESTful resources. I'm assuming you are not so just POST the form data.
  2. You need to add CSRF Laravel token to your form content or Larave wont accept any POST. You can add into the object, array etc. as long at the format is "_token": value. Simple way to set on your form array would be
myFormArray['_token'] = $('#mme-token').prop('value'),
  1. Then submit the form data to your Laravel route, again dont know if this is POST or DEL
  2. Your Laravel will do a much more elegant way:
  3. You can work around it but I just remove the blade form and just use HTML form,

<

form>. To use blade and JS you need to capture the submit and / or form post and then

    e.preventDefault();
    e.stopPropagation();

preventDefault stops the action, but if you have other blade form logic and don't have JS namespace then use stopPropagation. Like I said I dont use blade if im using ajax. Btw, all this is my easier to manage in Angular fwiw.

public function getFormDelUser()
{
    // however you want to do this by key, auth check first etc
    $formData = Request::all();

    // find user
    $getUser = $this->GetUser($formdata);
    if($getUser)
    {
        // wherever you have this on in your controller
              // note in your helper method if your del is successful on the model it will return 200
        return $this->DeleteUser($formData );

               // you could also
               //  return response("Del user successful!", 200);

    }

        return response("Cannot find use, but connect to server", 201);

} 
  1. In you ajax response you need to add second status param to your .done and then evaluate the codes. Note in Angular I've run into some 200 response classification problems, but the same logic applies to its .success
success: function(data, textStatus, jqXHR)
    {
         if(textStatus == 200)
         {
             console.log('del success')
         }
           if(textStatus == 201)
         {
             console.log('del not successful because i cannot find user')
         }     
    },

the types of messages you will get on ajax .error are system errors, whereas 200 range are success

Previous

Please or to participate in this conversation.