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

时间:2018-07-23 15:23:54

标签: javascript php html database laravel

更改后,我想更新数据。例如,数据为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]);
  }

1 个答案:

答案 0 :(得分:0)

您可以添加带有隐藏输入的表单,以将值发送到您的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>