So I have a form input field like that:
<input list="materials" name="material_id" placeholder="Nazwa materiału" autocomplete="off">
<datalist id="materials">
@foreach($materials as $material)
<option value="{{$material->id}}">{{$material->name}}</option>
@endforeach
</datalist>
It shows a list of materials (names) but it coresponds to material_id (foreign key) so it has to send an id value but it can be quite confusing for user. How can I set it to send id value but leave "material name" in field? (I know it is probably something from jscript or jquery but I don't know anything about them)
you need to use onchange event like this
$('select').on('change', function() {
alert( this.value );
//Do something
})
your html should be like this
<select>
@foreach($materials as $material)
<option value="{{$material->id}}">{{$material->name}}</option>
@endforeach
</select>
example
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
$(document).ready(function() {
$('select').on('change', function() {
alert( this.value );
})
});
</script>
</head>
<body>
//other things
<select>
@foreach($materials as $material)
<option value="{{$material->id}}">{{$material->name}}</option>
@endforeach
</select>
</body>
</html>
store material id on data-value such like a
@foreach($materials as $material)
<option data-value="{{$material->id}}">{{$material->name}}</option>
@endforeach