更改按钮属性内的方法和动作

时间:2019-01-28 09:08:01

标签: javascript php html laravel-5.7

我想使用button.onclick函数更改表单方法。我的代码现在可以正常工作,但是看起来很脏,如果我有太多的按钮,它们将变成无法读取的代码块。我们是否可以通过button.onclick进行设置?那样的东西(({onclick="form.method='patch'"))

我发现了一些有关它们的信息,但是它们没有起作用。 我需要更改<button ((this area))> SUBMIT </button>中的方法和路线。如果有任何方法可以解决,我正在等待您的回答。

  

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");

我的搜索结果:

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

谢谢您的答复!

编辑:您可以问“为什么不为每个按钮编写表单?”

我在回答,如果我在分别出现的<div class="btn-group btn-group-xs" role="group">按钮内写 form

像这样:http://jsfiddle.net/kmgd4z17/1/

但是我希望它们为:http://jsfiddle.net/tg21j0f7/

1 个答案:

答案 0 :(得分:0)

  

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

我用这种方法解决了这个问题。按下按钮时,我正在创建一个表单。也许有人可以用更有效的方法解决问题,但是我的解决方案是这样。 :)