当我更改html中的值时如何更新数据？

Question

我想在数据更改后更新数据。例如数据为 5，在我将其更改为 3 并通过单击按钮将其发送后，它的库存将在数据库中为 2。我怎么能在那里做呢？

更新了添加值时可能出错的html

document.addEventListener("DOMContentLoaded", function() {

  document.getElementById('add').addEventListener('click', function() {
    document.getElementById('val').innerHTML++;
    check();
  });

  document.getElementById('less').addEventListener('click', function() {
    document.getElementById('val').innerHTML--;
    check();
  });

  function check() {
    if (document.getElementById('val').innerHTML == 1) {
      document.getElementById('less').disabled = true;
    }else if (document.getElementById('val').innerHTML == 5) {
      document.getElementById('add').disabled = true;
    } else {
      document.getElementById('less').disabled = false;
      document.getElementById('add').disabled = false;
    }
    document.getElementById('main_value').value = document.getElementById('val').innerHTML;
  }

  check();

});

<form action='/details'>
<div class="content">
<div class="card">
  <img src={{$data->gambar}} alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>{{$data->judul}}</b></h4>
    <p>{{$data->artis}}</p>
    <p>Stock = {{$data->stok}}</p>
  </div>
</div>
</div>
<div id="pencetan">
<ul>
<li><button id="less">-</button></li>
<li><div id="val">1</div></li>
<input type="hidden" name="val" id="main_value" />
<li><button id="add">+</button></li>
</ul>
<a class="button">Rental</a>
</div>
</form>

控制器

     public function details(Request $request, $id){
    $data=Dvd::find($id);
     return view('details', ['data' => $data]);
  }

Answer 1

您可以添加一个带有隐藏输入的表单，以将值发送到您的something 链接。然后在你的控制器中添加另一个动作something：

public function something(Request $request){
    //Here you get your value
    $new_stock = $request->get('main_value');

    //Here we get the id of specific Dvd
    $stock_id = $request->get('object_id');

    //Here we update the DB
    Dvd::find($stock_id)->update(['stock' => $new_stock]);
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('add').addEventListener('click', function() {
    document.getElementById('val').innerHTML++;
    check();
  });

  document.getElementById('less').addEventListener('click', function() {
    document.getElementById('val').innerHTML--;
    check();
  });

  function check() {
    if (document.getElementById('val').innerHTML == 1) {
      document.getElementById('less').disabled = true;
    } else if (document.getElementById('val').innerHTML == 5) {
      document.getElementById('add').disabled = true;
    } else {
      document.getElementById('less').disabled = false;
      document.getElementById('add').disabled = false;
    }

    document.getElementById('main_value').value = document.getElementById('val').innerHTML;

    console.log("The value that will be submited is " + document.getElementById('main_value').value);
  }

  check();

});

<form action='/something'>
  <p>Stock = 5</p>
  <ul>
    <li><button id="less" type="button">-</button></li>
    <li>
      <div id="val">1</div>
      <input type="hidden" name="val" id="main_value" />
      <input type="hidden" name="object_id" value="{{$data->id}}" />
    </li>
    <li><button id="add" type="button">+</button></li>
  </ul>
  <button class="button">Rental</button>
</form>