John Davidson

Message:

I have question on Laravel with jQuery.

Right now, I have form with three (3) different buttons (update,delete,email). Each button have different task in controller.

Normally I use button type="submit" to submit data from blade into controller.

Blade

<form id='form-info' class="form-info" action="{{url('/form/sendData')}}" method="post">

@csrf  



    <input type="text" id="info" class="info" name="name" value="test"/>



    <button type="submit" class="btn btn-xs btn-warning" name="update" id="update">Update</button>  

    <button type="submit" class="btn btn-xs btn-danger" name="delete" id="delete">Delete</button>  

    <button type="submit" class="btn btn-xs btn-info" name="email" id="email">Email</button>   

</form> 

And in controller, I just use '$request->has()' to differentiate three request.

if ($request->has('update')) 

{

    echo 'update';

} 

else if($request->has('delete'))

{

    echo 'delete';

} 

else if($request->has('email'))

{

    echo 'email';

}

But my current goal is to show loading icon before data successfully submitted.

The reason why I want to show loading page is because system need to send an email to multiple user and it might take some time to load before it finished the task. To prevent user to click the same button multiple times.

I use jQuery click function and I change button type from 'submit' to 'button'.

But the problem is when the form submitted to controller. It doesn't recognize '$request->has()' in my controller.

Here's my html form and jQuery and my controller

blade.php

<form id='form-info' class="form-info" action="{{url('/form/sendData')}}" method="post">

@csrf  



    <input type="text" id="info" class="info" name="name" value="test"/>



    <button type="button" class="btn btn-xs btn-warning" name="update" id="update">Update</button>  

    <button type="button" class="btn btn-xs btn-danger" name="delete" id="delete">Delete</button>  

    <button type="button" class="btn btn-xs btn-info" name="email" id="email">Email</button>   

</form>

jQuery

$(document).ready(function(){



    $('#update').click(function(){ 



        $(".loader").show(); 

        $("#form-info").submit();

        $(".loader").hide();



    });



    $('#delete').click(function(){ 



        $(".loader").show(); 

        $("#form-info").submit();

        $(".loader").hide();



    });



    $('#email').click(function(){ 



        $(".loader").show(); 

        $("#form-info").submit();

        $(".loader").hide();



    });



});

Controller.php

if ($request->has('update')) 

{

    echo 'update';

} 

else if($request->has('delete'))

{

    echo 'delete';

} 

else if($request->has('email'))

{

    echo 'email';

}

How to solve this problem ? Thanks in advance.

---

My Answer:
The issue you are facing is because when you submit the form using jQuery, it does not send the button name along with the request. To solve this problem, you can add a hidden input field in your form to store the button name that was clicked and then retrieve it in your controller.

Here's how you can modify your code:

Blade.php
html

@csrf




Update
Delete
Email

jQuery
javascript
$(document).ready(function(){

$('#update').click(function(){
$("#buttonClicked").val("update");
$(".loader").show();
$("#form-info").submit();
});

$('#delete').click(function(){
$("#buttonClicked").val("delete");
$(".loader").show();
$("#form-info").submit();
});

$('#email').click(function(){
$("#buttonClicked").val("email");
$(".loader").show();
$("#form-info").submit();
});

});


Controller.php
php
if ($request->has('buttonClicked'))
{
$buttonClicked = $request->input('buttonClicked');
if ($buttonClicked == 'update') {
echo 'update';
} else if ($buttonClicked == 'delete') {
echo 'delete';
} else if ($buttonClicked == 'email') {
echo 'email';
}
}


By adding a hidden input field in your form and setting its value to the button name that was clicked using jQuery, you can retrieve this value in your controller and differentiate between the different button actions.