更改按钮属性中的方法和操作

Question

I want to change form method with button.onclick function. My code is working right now but it looks dirty and if I have too many buttons they will turn unreadable code block. Do we have any option to set it via button.onclick? Something like that ((onclick="form.method='patch'"))

I found something about it but they didn't work. I need to change both method and route in <button ((this area))> SUBMIT </button> If there is any way to do it I'm waiting your answers.

index.blade.php

@if($backup->trashed())                                       
{{ Form::open(['route' => ['backup.patch', $backup->id], 'method'=>'patch', 'role'=>'form']) }}
@endif
@if(!$backup->trashed()) 
{{ Form::open(['route' => ['backup.delete', $backup->id], 'method'=>'delete', 'role'=>'form']) }}
@endif
    <div class="btn-group btn-group-xs" role="group" aria-label="Config Tools">
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Edit" onclick="window.location='{{ url("backup/{$backup->id}") }}'">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
        </button>
        @if($backup->trashed())                                       
        <button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Activate">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
        </button>
        @endif
        @if(!$backup->trashed())                                      
        <button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Delete">
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
        </button>
        @endif
    </div>
{{ Form::close() }}

web.php

Route::get('/backup/{id}', 'Admin\BackupController@show')->name("backup.show");
Route::post('/backup/{id}', 'Admin\BackupController@update')->name("backup.update");
Route::delete('/backup/{id}', 'Admin\BackupController@delete')->name("backup.delete");
Route::patch('/backup/{id}', 'Admin\BackupController@patch')->name("backup.patch");

My search results:

https://css-tricks.com/separate-form-submit-buttons-go-different-urls/ https://www.w3schools.com/tags/att_button_formmethod.asp

Thanks for your answers from now on!

Edit: You can ask "Why you didn't write form for each button?"

I'm answering, If I write form inside <div class="btn-group btn-group-xs" role="group"> buttons appearing separately.

Like this: http://jsfiddle.net/kmgd4z17/1/

But I want them as: http://jsfiddle.net/tg21j0f7/

Answer 1

index.blade.php

<div class="btn-group btn-group-xs" role="group" aria-label="Config Tools">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Edit" onclick="window.location='{{ url("backup/{$backup->id}") }}'">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
    </button>
    @if($backup->trashed())                                
    <button type="button" class="btn btn-default" onclick="javascript : submitForm('PATCH', {{$backup->id}})" data-toggle="tooltip" data-placement="bottom" title="Activate">
        <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
    </button>
    @endif
    @if(!$backup->trashed())                                         
    <button type="button" class="btn btn-default" onclick="javascript : submitForm('DELETE', {{$backup->id}})" data-toggle="tooltip" data-placement="bottom" title="De-Activate">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
    </button>
    @endif
</div> 

script

<script>
    function submitForm($method, $id){

        var form = document.createElement("form");
        form.setAttribute('method', "POST");
        form.setAttribute('action',"/backup/" + $id);

        var i = document.createElement("input");
        i.setAttribute('type',"hidden");
        i.setAttribute('name',"_method");
        i.setAttribute('value', $method);
        form.appendChild(i);

        var j = document.createElement("input");
        j.setAttribute('type',"hidden");
        j.setAttribute('name',"_token");
        j.setAttribute('value', "{{Session::token()}}" );
        j.setAttribute('id',"csrf-token");
        form.appendChild(j);

        document.body.appendChild(form);

        form.submit();

    }       
</script>

I solved that issue with this method. I'm creating a form when pressed to a button. Maybe someone can solve with more effective way but my solution is this. :)