Level 122
you have not said how you decide which value to put in the input box?
Feb 4, 2017
6
Level 4
FIll textfield based on select option
I'm building a form that has a select field with option values that come from the services table.
And I have a text field that I want to to pre-fill it with an value of base_cost that come from the same table.
I'm passing all data to the view (maybe I could pluck only the name and id that I need to build the select box, but for now it works for me).
public function create()
{
$clients = Client::all();
$services = Service::all();
return view('dashboard.jobs.new', compact('clients', 'services'));
}
The view has a select field (works as intended)
<div class="control">
<span class="select is-fullwidth">
<select>
@foreach ($services as $service)
<option value="{{ $service->id }}">{{ $service->name }}</option>
@endforeach
</select>
</span>
</div>
And I have the text field that I wan't a value from the services table, witch one I have no idea how to pass the data to it.
<div class="control">
<input class="input"
name="base_cost" id="base_cost" type="text" value="">
</div>
In short, I've a form that has a select field where the options come from a services table, in the same table there is a base_cost field that I wan't to the value of it to fill a input text in the same form, but the value is based on the selected item from the select box.
What are my options to dynamic fill the base_cost field with the data from services table?
I was thinking that It could be done with ajax, but I never used it before, there is any other way, I don't think vue is an option to me since I know very little of javascript, so if it could be done with ajax, could any one give some directions? Or if I could achieve this without any js would be greate too.
Any help would be welcome!
Level 4
@Snapey
My bad. In the service table I have a base_cost column that I want to use to fill the base_cost textfield in the form based on the item selected by the selected field.
I've included it on my original question.
Level 122
so this is a javascript issue in my book.
if your services are 1000's then maybe an ajax call would be the way to go, otherwise using blade or one of the many helpers around, dump the services id and base_cost as a json array in your view
then javascript to create an onChange handler for the select element, grab the new value and look up the corresponding record in the json array. Finally set the text box input to the base_cost
not too tricky with jQuery or you could 'cool-kid' with Vue
Level 122
example of a package to pass collection to the javascript
Level 4
@Snapey Thanks for the link for the package, I tried it, but I could't find a way to look for the value I wanted inside the object that was passed to the view (like I said I don't know much js right now). But thanks for the answer, I'll study more js and give it another try.
I actually find a simple way, since I only need one value from the table I've added a data value to the select and I used it to fill the input I want.
my select field
<select id="service_id" name="service_id">
<option disabled selected>Select a service...</option>
@foreach ($services as $service)
<option value="{{ $service->id }}" data-price="{{ $service->base_cost }}">{{ $service->name }}</option>
@endforeach
</select>
my script
$('#service_id').on('change',function(){
var price = $(this).children('option:selected').data('price');
$('#price').val(price);
});
1 like
Level 122
seems like a good option ( no pun intended!)
1 like
Please or to participate in this conversation.