Question 237733 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – i have a form with 2 buttons for submitting two different form action and form method

I have two buttons:

  • one submitting the form for changing the photo and
  • one deleting.

By deleting i want to send delete method to the route delete with sweet alert.

However this does not work.

How can i have one form and 2 input for submitting different form action

<tbody>
    <form  method="POST" enctype="multipart/form-data">
       @csrf
        <input type="hidden" name="old_image" value="{{$products->product_thumbnail}}">
     @foreach ($multiImages as $key => $item)
                        <tr>
                            <th scope="row">{{$key+1}}</th>
                            <td><img src="{{asset($item->photo_name)}}" alt="" style="width: 70px;height: 40px;"></td>
                            <td><input type="file" class="form-group" name="multi_img[{{$item->id}}]"></td>
                            <td>
                                <input type="submit" formaction="{{route('vendor.update.product.multiImage',$item->id)}}" class="btn btn-primary px-4"value="Save Product"  >
                            </td>
                            <td>
                                <input  id="delete" onclick="submitResult(event)" data-method="delete" data-action="{{route('vendor.delete.product.multiimage',$item->id)}}" value="Delete Product" class="form-group btn-danger" >    
                            </td>
                        </tr>
                        @endforeach
                        
    
                    </form>
                </tbody>

this is the route

Route::delete('vendor/delete/product/multiimage/{id}','vendorDeleteMultiImage')->name('vendor.delete.product.multiimage');

js code with sweetalert

function submitResult(e) {
    let btn = e;
    e.preventDefault();
    
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then((result,e) => {
        if (result.isConfirmed) {
            btn.target.form.action = btn.target.getAttribute('data-action');
            btn.target.form.method = btn.target.getAttribute('data-method');
            var input = document.createElement("input");

           
            input.setAttribute("type", "hidden");
            input.setAttribute("name", "_method");
            input.setAttribute("value", "DELETE");
            //append to form element that you want .
            btn.target.form.appendChild(input);
            btn.target.form.submit();
            Swal.fire(
                'Deleted!',
                'Your file has been deleted.',
                'success'
            )
        }
        
    })

}
Tags:

2

Answers


  1. 0

    you missing the type attribute in the last input. just add type='submit and it should work

    Login or Signup to reply.
  2. 0

    You Can do other way like Onchange function This is my Working Code

                    <form class="px-3 px-sm-5 priceform row"  method="POST" id="createjob"  action="{{ route('store.front.job') }}">

               @csrf


               //Other Input fields
                
                <div class="col-lg-12 mt-3 mb-5" >

                    <p class="sign_fontsize mb-2 pt-3">Logo</p> 
                  
                    <div class="avatar-upload mt-4 mb-5"> 
                        <div style="" class="avatar-edit">

                                <input type='file' id="imageUpload" name="logo" class="changeimage"
                                    accept=".png, .jpg, .jpeg" />

                                <label for="imageUpload"></label>
                        </div>
                    </div>


                <div class="col-12 py-4">
                    <button type="submit" class="w-100 py-2 signup_button rounded">Post Job</button>
                </div>
            </form>

    And The Javascript code look like this in success you can add whatever you want

     $(".changeimage").change(function() {

    var formData = new FormData();  // Create a new FormData object

    // Append the selected file to the FormData object
    formData.append('logo', $('#imageUpload')[0].files[0]);

    // Append the CSRF token to the FormData object
    formData.append('_token', '{{ csrf_token() }}');

        $.ajax({

            url: "{{url('employer-image-store')}}",

            type: "POST",

            data: formData, 

            processData: false,

            contentType: false,

            _token: '{{ csrf_token() }}',

            dataType: 'json',

            success: function(data) {

                console.log(data.url);

                $('.canddashboard-userpic').attr('src',data.url);


            },

            error: function(json) {

            }

        });

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search