时间戳

首页 > 解决方案 > 如何将选定的复选框值输入数据库？

javascript - 如何将选定的复选框值输入数据库？

问题描述

我有一个带有 foreach 数据的复选框，我想选择 1 行或最多 5 行，并取消选中其余复选框，并且无法将取消选中的复选框提交到数据库中

这是表格

<form action="/po_store" method="post">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        @csrf
        <div class="form-group">
          <label>Tanggal PO</label>
          <input class="form-control" type="text" name="tanggal_po" id="datepicker">
          {!! $errors->first('tanggal_po','<span class="text-danger">:message</span>') !!}                                                                                        
        </div>
        <div class="form-group">
          <label>No Po</label>
          <input class="form-control" type="text" name="no_po">
          {!! $errors->first('no_po','<span class="text-danger">:message</span>') !!}                                                            
        </div>
        <div class="form-group">
          <label>Supplier</label>
          <select name="supplier_nama" class="form-control">
            <option value=""hidden>Pilih Supplier</option>
            @foreach ($supplier as $s)
              <option value="{{ $s->nama_supplier }}">{{ $s->nama_supplier }}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label>Apoteker</label>
          <select name="apoteker_nama" class="form-control">
            <option value=""hidden>Pilih Apoteker</option>
            @foreach ($apoteker as $a)
              <option value="{{ $a->nama_apoteker }}">{{ $a->nama_apoteker }}</option>
            @endforeach
          </select>
        </div>
        <div class="form-group">
          <label>Keterangan</label>
          <input class="form-control" type="text" name="keterangan">
        </div>
      </div>
      <form action="{{ route('cari') }}" method="GET">
        <div class="container-fluid" style="padding-top:25px">
          <div class="row">
            <div class="col-md-11">
              <div class="form-group">
                <input type="text" name="cari" class="form-control" placeholder="Cari berdasarkan kode dan nama obat ...">
              </div>
            </div>
            <div class="form-group">
              <input type="submit" value="Cari" class="btn btn-primary">
            </div>
          </div>
        </form>
        <table class="table table-bordered">
          <tbody>
            <tr class="text-center">
              <th>Pilih</th>
              <td>Kode Obat</td>
              <td>Nama Obat</td>
              <td>Harga Obat</td>
              <td>Jumlah Obat PO</td>
              <td>Total bayar</td>
            </tr>
            @foreach ($obat as $o)
              <tr>
                <td>
                  <input type="checkbox" name="select" value="{{ $o->nama_obat }}">
                </td>
                <td>
                  <input type="text" class="form-control" name="kode_obat" value="{{ $o->kode_obat }}" readonly>
                </td>
                <td>
                  <input type="text" class="form-control" name="nama_obat" value="{{ $o->nama_obat }}" readonly>
                </td>
                <td>
                  <input id="harga" type="text" class="form-control" name="harga_obat"  value="{{ $o->harga_obat }}" onkeyup="sum()">
                </td>
                <td>
                  <input id="jumlah" type="text" class="form-control" name="jumlah" onkeyup="sum()">
                </td>
                <td>
                  <input id="total" type="text" class="form-control" name="total_harga" onkeyup="sum()" readonly>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
    <button type="submit" class="btn btn-success simpan simp-po"><i class="fas fa-check"> Simpan</i></button>                
  </form>

这是显示计算总字段的 javascript

function sum() {
  var harga = document.getElementById('harga').value;
  var jumlah = document.getElementById('jumlah').value;
  var hasil = parseInt(harga)*parseInt(jumlah);
  if(!isNaN(hasil)){
    document.getElementById('total').value = hasil;
  }
}

我无法提交表单，尤其是复选框，因为总字段不能为空。但我只希望选中的复选框获取 harga 字段并且可以提交

这是它的样子 表格的样子

这是我的商店控制器

 $message = [
            'required' => '*:attribute harus diisi',
            'numeric' =>'*:attribute harus angka' ,
            'digits_between' => '*:attribute harus berisi 9 atau 13 angka'       
        ];

        $data = $request->validate([
            'tanggal_po' => ['required'],
            'no_po' => ['required'],
            'supplier_nama' => ['required'],
            'apoteker_nama' => ['required'],
            'harga' =>['numeric'],
            'select'=>['required'],
            'jumlah'=>['required'],
            'harga_obat' =>['required'],
            'total_harga'=>['required']
        ],$message);


       $select = $request->select;
       foreach($select as $s){
           $s = $request->select;
       }

        $tanggal_po = $request->input('tanggal_po');
        $no_po = $request->input('no_po');
        $supplier_nama = $request->input('supplier_nama');
        $apoteker_nama = $request->input('apoteker_nama');
        $harga = $request->input('harga');
        $jumlah = $request->input('jumlah');
        $harga_obat = $request->input('harga_obat');
        $total_harga = $request->input('total_harga');

        if(PO::create($request->only($tanggal_po,$no_po,$supplier_nama,$apoteker_nama,$select,$harga,$jumlah,$harga_obat,$total_harga))){
            $request->session()->flash('success', 'Data Berhasil Di Tambahkan');
        }else{
            $request->session()->flash('danger', 'Data Tidak Berhasil Di Tambahkan');
        }

标签： javascriptlaravelcheckbox

解决方案

也许一个想法：您的行中的复选框和输入应该声明为一个数组，例如name[]：

@foreach ($obat as $o)
    <tr>
        <td>
            <input type="checkbox" name="select[]" value="{{ $o->nama_obat }}">
        </td>
        <td>
            <input type="text" class="form-control" name="kode_obat[]" value="{{ $o->kode_obat }}" readonly>
        </td>
        ...
    </tr>
@endforeach

您的验证规则应如下所示：

$data = $request->validate([
    'kode_obat.*' => 'required_with:select.*,on'
    ...
],$message);

在您的情况下，我会在您的表单页面上显示所有验证错误，以检查出了什么问题：

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

在您的控制器中处理复选框如下

$selects = $request->select;
foreach($selects as $select) {
    //do whatever you want
}

推荐阅读