0

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'
            )
        }
        
    })

}
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Persian
  • 45
  • 6
  • 1
    Please click [edit], then `[<>]` and create a [mcve] with RENDERED HTML - this is not a laravel issue as far as I can see – mplungjan Aug 25 '23 at 08:32
  • `btn.target.form.submit();` << the page is changed? If yes, then you will not see `Swal.fire` – mplungjan Aug 25 '23 at 08:33
  • ` – mplungjan Aug 25 '23 at 08:35
  • @mplungjan the problem is that i want to delete with delete route not get or post. when i put the type button or submit i get this error.The GET method is not supported for route delete/product/multiimage/72. Supported methods: DELETE. – Persian Aug 26 '23 at 10:13
  • @mplungjan if i change the route method to get this works correctly but i want to use delete method for the route.. the base is
    but i want to change it to method=delete when i click the delete button
     – Persian Aug 26 '23 at 10:31

3 Answers3

1

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) {

            }

        });

});
eagle sharp
  • 11
  • 3
0

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

guttume
  • 278
  • 1
  • 7
0

You can have more submit buttons in a form with their own form action. You can send the form to either a save or delete router. But in both cases the method used is a POST request. So, the router could be something like this:

Route::post('/delete', $callback);
Route::post('/save', $callback);

To distinguish between the save and the delete buttons, the submit event has a property called submitter -- this references the button used.

Be aware that you cannot really blend HTML form elements and HTML table elements. The <tbody> can only have <tr> as children according to the standard (The tbody element). I suggest that you use something like CSS Grid instead of tables.

document.body.addEventListener('submit', e => {
  let form = e.target;
  let submitter = e.submitter;
  if (submitter.name == 'delete') {
    if (!window.confirm('Are you sure?')) {
      // stop the form submitting
      e.preventDefault();
    }
  }
});
form {
  display: grid;
  grid-template-columns: min-content min-content auto min-content min-content;
  justify-items: start;
  align-items: start;
  gap: 0 .3em;
}

.col1 {
  grid-column: 1;
}

.col2 {
  grid-column: 2;
}

.col3 {
  grid-column: 3;
}

.col4 {
  grid-column: 4;
}

.col5 {
  grid-column: 5;
}
<form method="POST" name="imgform" enctype="multipart/form-data">
  <span class="col1">123</span>
  <input type="hidden" name="old_image" value="thumbnail">
  <input type="hidden" name="id" value="123">
  <img class="col2" src="photo_name" alt="123" style="width: 70px;height: 40px;">
  <input class="col3" type="file" class="form-group" name="file">
  <button class="col4" type="submit" name="save" formaction="/save">Save</button>
  <button class="col5" type="submit" name="delete" formaction="/delete">Delete</button>
</form>
<form method="POST" name="imgform" enctype="multipart/form-data">
  <span class="col1">124</span>
  <input type="hidden" name="old_image" value="thumbnail">
  <input type="hidden" name="id" value="124">
  <img class="col2" src="photo_name" alt="124" style="width: 70px;height: 40px;">
  <input class="col3" type="file" class="form-group" name="file">
  <button class="col4" type="submit" name="save" formaction="/save">Save</button>
  <button class="col5" type="submit" name="delete" formaction="/delete">Delete</button>
</form>
chrwahl
  • 8,675
  • 2
  • 20
  • 30