Add or delete rows in table in Thymeleaf - spring

I wish to add row or rows into "bin type" in example below:
It depends on me how many rows it is going to be. If i will decide on three rows i wish to finalize on confirmation button and continue another table-row. I wish to do that in Thymeleaf because i don't know JavaScript. My whole project is in Spring/Hibernate/thymeleaf, contains about 40 bins in my sql DB.
Here is my html file:
<div class="form-row">
<div class="form-group col-md-8">
<select class="form-control" th:field="*{binsFeatures}">
<option value="0">Select BIN type</option>
<option th:each="binFeature : ${binsFeatures}" th:value="${binFeature.id}"
th:text="${binFeature.name}"></option>
</select>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-dumpster"></i></span>
</div>
</div>
<div class="form-group col-md-4">
<input type="text" th:field="*{quantity}"
class="form-control input-lg"
placeholder="amount"
required="true">
<span th:if="${#fields.hasErrors('quantity')}"
th:errors="*{quantity}"
class="text-danger">
Quantity Error
</span>
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<select class="form-control" th:field="*{type}">
<option value="0">Select Type of Inbound</option>
<option th:each="inbound : ${inbounds}" th:value="${inbound.id}"
th:text="${inbound.type}"></option>
</select>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-viruses"></i></span>
</div>

Related

Is there a way to add custom attributes to slimselect?

In Lighthouse report I have an error: "ARIA items do not have accessible names" and it looks like div.ss-list is the problem (because it has role="listbox" attribute which fails aria-input-field-name audit). Unfortunately my slimselect doesn't copy custom attributes from select when initialized, for example aria-label="category".
Is there a way to copy/add custom attributes to slimselect div.ss-list element when initializing (without injection html after initializing) or do you have any other good solutions to that issue?
Here is sample code from devtools with already created slimselect:
<select name="category" aria-label="Category" class="search__select" tabindex="-1" data-ssid="ss-59594" aria-hidden="true" style="display: none;">
<option value="">All</option>
<option value="5576">Category 1</option>
<option value="10">Category 2</option>
<option value="82">Category 3</option>
<option value="199">Category 4</option>
</select>
<div class="ss-59594 ss-main search__select" style="">
<div class="ss-single-selected ss-open-below">
<span class="placeholder">All</span>
<span class="ss-deselect ss-hide">x</span>
<span class="ss-arrow"><span class="arrow-up"></span></span>
</div>
<div class="ss-content ss-open">
<div class="ss-search">
<input type="search" placeholder="Search" tabindex="0" aria-label="Search" autocapitalize="off" autocomplete="off" autocorrect="off">
</div>
<div class="ss-list" role="listbox">
<div class="ss-option ss-disabled ss-option-selected" role="option" data-id="97962314">All</div>
<div class="ss-option" role="option" data-id="79478522">Category 1</div>
<div class="ss-option" role="option" data-id="32989768">Category 2</div>
<div class="ss-option" role="option" data-id="53607703">Category 3</div>
<div class="ss-option" role="option" data-id="31214879">Category 4</div>
</div>
</div>
</div>

how to make selected option using enum in laravel?

this is my code, how to make the selected option value in the edit form using enum data in the database? this is not working it just view the select option, not with id-data
this the code blade
<!-- Modal edit -->
#foreach($daftar_pelanggan as $pelanggan)
<div class="modal fade" id="editModal-{{ $pelanggan->id }}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mb-0" id="editModalLabel">Update Data Pelanggan</h5>
</div>
<div class="modal-body">
<!-- Card body -->
<form role="form" action="{{ route('daftar_pelanggan.update') }}" method="POST" id="editForm">
#csrf
#method('PUT')
<!-- Input groups with icon -->
<div class="form-group row">
<label for="updateNamaPelanggan" class="col-md-2 col-form-label form-control-label">Nama</label>
<div class="col-md-10">
<input type="hidden" name="id" value="{{ $pelanggan->id }}">
<input class="form-control" type="nama" value="{{ $pelanggan->nama_pelanggan }}" id="updateNamaPelanggan" name="updateNamaPelanggan" required >
</div>
</div>
<div class="form-group row">
<label for="updateAlamat" class="col-md-2 col-form-label form-control-label">Alamat</label>
<div class="col-md-10">
<input class="form-control" type="alamat" value="{{ $pelanggan->alamat }}" id="updateAlamat" name="updateAlamat" required>
</div>
</div>
<div class="form-group row">
<label for="updateNoTelp" class="col-md-2 col-form-label form-control-label">No.Telp</label>
<div class="col-md-10">
<input class="form-control" type="notelp" value="{{ $pelanggan->no_telp }}" id="updateNoTelp" name="updateNoTelp" required>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<div class="form-group">
<label class="form-control-label" for="updatePoin">POIN</label>
<input type="text" class="form-control" value="{{ $pelanggan->poin }}" id="updatePoin" name="updatePoin">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-control-label" for="status_member">Kategori</label>
<select class="form-control" id="status_member" name="status_member" required="required">
<option value="" disabled selected>- Pilih -</option <option value="silver"{{($pelanggan->status_member === 'silver') ? 'selected' : '' }} >Silver</option>
<option value="gold" {{ ($pelanggan->status_member === 'gold'? 'selected' : '')}}>Gold</option>
<option value="diamond" {{($pelanggan->status_member === 'diamond')? 'selected' : ''}}>Diamond</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-secondary" data-dismiss="modal">Reset</button>
<button type="submit" class="btn btn-primary">Update Data</button>
</div>
</form>
</div>
</div>
</div>
#endforeach
this is select code this is not working what's wrong with this code?
<option value="" disabled selected>- Pilih -</option <option value="silver"{{($pelanggan->status_member === 'silver') ? 'selected' : '' }} >Silver</option>
<option value="gold" {{ ($pelanggan->status_member === 'gold'? 'selected' : '')}}>Gold</option>
<option value="diamond" {{($pelanggan->status_member === 'diamond')? 'selected' : ''}}>Diamond</option>
</select>
and i edit with this still not working what's wrong with this code?
<select class="form-control" id="status_member-" name="status_member" required="required">
#if($pelanggan->status_member == "silver")
<option value="silver" selected="selected">Silver</option>
<option value="gold">Gold</option>
<option value="diamond">Diamond</option>
#elseif($pelanggan->status_member == "gold")
<option value="silver">Silver</option>
<option value="gold" selected="selected">Gold</option>
<option value="diamond">Diamond</option>
#else
<option value="silver">Silver</option>
<option value="gold" >Gold</option>
<option value="diamond" selected="selected">Diamond</option>
#endif
</select>

How to showing value on dropdown list form auto select value from database

i have a from to edit/ update data . on colomn input like name ,email ,date i dont have a problem because this value can e displayed at this colomn like this :
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="nama">NAMA <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input id="nama" type="text" class="form-control #error('nama') is-invalid #enderror" name="nama" value="{{$pns->users->nama}}" required autocomplete="nama">
#error('nama')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
this value on this input is value="{{$pns->users->nama}}" and its still working , but how i can do this on this input ? this input is select dropdown list like this :
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Agama <span class="required">*</span></label>
<div class="col-md-6 col-sm-9 col-xs-12">
<select name="agama_id" id="agama_id" class="form-control">
#foreach($agama as $masters => $agamas )
<option value="{{ $masters }}">{{ $agamas }}</option>
#endforeach
</select>
</div>
</div>
where i can user this value like {{$pns->users->nama}} ??? if i open this update form , its will choose automaticlly like this db ??
someone have solution ?
Try this.
<select name="agama_id" id="agama_id" class="form-control">
#foreach($agama as $masters => $agamas )
<option value="{{ $masters }}" #if ($pns->users->agama_id == $masters ) selected #endif>{{ $agamas }}</option>
#endforeach
</select>

Request values of contoller not getting value of select

This is a noob question, I send a post request to my controller and all it can get is the request of the input. What I want is I can also get the value of $cat array.
Here's my blade:
#if (!$categories->isEmpty())
<form action="{{route('subcategory.store')}}" method="POST">
#csrf
<div class="row">
<div class="input-group mb-3 col-md-4">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Choose Category:</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
#foreach ($categories as $cat)
<option value="{{$cat->id}}">{{$cat->name}}</option>
#endforeach
</select>
</div>
<input type="text" name="subcat" id="subcat" class="form-control col-md-3 ml-5">
<button type="submit" class="btn btn-success btn-lg ml-3">Save Sub Category</button>
</div>
</form>
#endif
And here's my returned value.
{"_token":"XlzwIt2jFqcybqqSjwLLJIAChG5tui7gvHzlaeAq","subcat":"xx"}
You forgot to add name="cat" in select i guess
<select class="custom-select" id="inputGroupSelect01">
simple add name="" attr
<select class="custom-select" id="inputGroupSelect01" name="cat">

button not responding laravel

i have this page where i have form where the action url are same. My second form work perfectly fine but mu first form doesn't responding when i hit the button or <a>. I've try to switch the <form action="{{url('purchase')}}" method="post") between form, i've try to cut the action on second form and move it to first form still no luck... any idea? here's sum of my code
<form class="px-2 py-2" action="{{ url('purchase') }}" method="post">
{{csrf_field()}}
<div id="items">
</div>
<div class="row mx-1 px-2">
Purchase
</div>
</form>
that's my first form, inside of id="items" purposely empty since i fill it up with javascript
<form id="newItemForm" style="display:none;">
<div class="form-group row" id="item">
<label for="invoice" class="col-sm-2 col-form-label">Supplier</label>
<div class="col-sm-2">
<select class="form-control" onchange="newExisting(this)">
<option value="#" selected>Choose Supplier</option>
<option value="existing">Existing Supplier</option>
<option value="new">New Supplier</option>
</select>
</div>
<div class="col-sm-8" id="existingCompany" style="display:none;">
<div class="row">
<div class="col-sm-4">
<select class="form-control" name="fromE" onchange="localImport(this)">
<option value="#" checked>From</option>
<option value="f" checked>Import</option>
<option value="l" checked>Local</option>
</select>
</div>
<div class="col-sm-8">
<select class="form-control" name="supplier" id="supplierID">
<option value="#">Choose Company</option>
</select>
</div>
</div>
</div>
<div class="col-sm-8" style="display:none;" id="newCompany">
<div class="row">
<div class="col-sm-4">
<select class="form-control" name="fromN">
<option value="#" checked>From</option>
<option value="f" checked>Import</option>
<option value="l" checked>Local</option>
</select>
</div>
<div class="col-sm-4">
<input type="text" name="kind" value="" placeholder="PT, CV, FIRMA" class="form-control">
</div>
<div class="col-sm-4">
<input type="text" name="supplierName" placeholder="Company Name" class="form-control">
</div>
</div>
</div>
</div>
<div id="newItems">
<div class="form-group row" id="item">
<label for="invoice" class="col-sm-2 col-form-label">Item Name</label>
<div class="col-sm-10">
<input type="text" name="item0" class="form-control" placeholder="Item Name" onkeyup="getCompanyGoods(this)">
<span class="text text-danger" style="display:none;" id="existsWarning0">*Item already exists</span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="taxInvoice">QTY<span class="text-danger">*</span></label>
<input type="number" name="qty0" class="form-control" id="qty0" required onkeyup="calculate(this)">
</div>
<div class="form-group col-md-3">
<label for="inputPassword4">Units<span class="text-danger">*</span></label>
<input type="number" name="units0" class="form-control" id="units0" required onkeyup="calculate(this)">
</div>
<div class="form-group col-md-3">
<label for="inputPassword4">Total</label>
<div class="form-controll font-weight-bold" style="font-size:x-large;" id="total0">IDR0.00</div>
</div>
</div>
</div>
<label class="btn btn-primary" id="newRow" onclick="addRow()">+ Item</label>
<input type="hidden" name="type" value="new">
<input type="hidden" name="nore" value="#" id="nore">
<input type="number" name="totalItem" value="0" id="totalItem">
<button name="button" class="btn btn-danger float-right" >Purchase</button>
</form>
this is my second form and it work perfectly....
Change
Purchase
to
<button type='submit'>Purchase</button>
Because you have used a tag instead of button type "submit"
Purchase
Change it to like this
<button class="btn btn-primary" type="submit"> Purchase </button>

Resources