Question

我正在尝试防止多次单击按钮，以避免重新发送请求。禁用功能有效，但我要发送或更新的数据未执行。


<script>
let productBox = document.querySelectorAll('.product');
let selectCategory = document.querySelector('#select-category');
let categoryVal = document.querySelectorAll('#select-category option');

selectCategory.addEventListener('change', (evt) => {
    var selectedValue = evt.currentTarget.value.toLowerCase();
    Array.prototype.forEach.call(productBox, prodItem => {
        if(selectedValue !== 'all' && (prodItem.getAttributeNode('category').value !== 
        selectedValue)) {
            prodItem.style.display = 'none'
        } else {
            prodItem.style.display = 'block'
        }           
    });
});
</script>

如何执行更新并禁止同时单击多次？

Answer 1

像这样在Form的action属性中使用

{{ route('update', ['id'=>$id]) }}

我想这是你的路线，

Route::post('/update/{id}','YourController@your_function')->name('update');

并在您的控制器中，

   public function your_function(Request $request, $id){ // your code }

如果您想纯种幼虫，

使用Form类

    {!! Form::open(['route' => ['update', 'id'=>$id], 'files' => true, 'class' => 'detail_form']) !!}

Answer 2

event.preventDefault();

防止表单的默认操作，这意味着您的表单不会提交到服务器。您可以使用ajax或axios（如果已安装）将信息发送到服务器。由于您显然拥有jquery，因此可以向服务器发出ajax请求，以像这样更新您的信息

`const route = "{{ route('update', $id)}}";`

或 const route = "/route/to/your/server";

`$.post(route, 
        {//add a body if you need to send some information to the server
          //it is optional}, 
        function(data, status){// in this callback you can create a feedback 
                               //from a successful trip to and from the server 
                               //for your users

                })`

.fail(function(error){ //in this callback you can handle errors from a failed trip //to and from the server });

禁用多个按钮单击是可行的，但不会更新我的数据

2 个答案: