I have a form with input fields: name and description. The name field is a drop down. based on the name selected the description needs to change. I have made the drop down to populate the names already.
<form>
<select name="name" >
@foreach($books as $book)
<option value="{{$book->name}}">{{$book->name}}</option>
@endforeach
</select>
how do i change the description field based on the selected drop down?
<input type="text name="description" value="{{ $book->description }}>
Updated version:
You should store somewhere all $books as JavaScript variable. After that when you select name of the book, you can find book object (with description and other fields) and do whatever you want with them. You can achive by implementing these steps:
1) Make sure you have jQuery on your page
2) Add this JS code somewhere on the page (see comments)
<script type="text/javascript">
// 2.1 "Store" all books in some place on the page, for example, you can pass PHP variable into JS variable like this
var books = <?= json_encode($books); ?>;
/*
* 2.2 Create function for search book by its name
* (if each value of the field "name" in the $books is unique) or by some unique field, for example, "id"
*/
// get book by name
var getBookByName = function (bookName) {
if (typeof books === 'object') {
for (var key in books) {
if (typeof books[key].name !== 'undefined' && books[key].name === bookName) {
return books[key];
}
}
}
return false;
}
$(document).ready(function () {
// add event listener on the select with the attribute name="name"
$('select[name="name"]').on('change', function (e) {
// get book by selected name of the book
var selectedBook = getBookByname($(e.target).find('option:selected').text());
if (selectedBook) {
// set new value for the input with the attribute name="description"
$('input[name="description"]').val(selectedBook.description);
}
// we can't find book by it's name
else {
alert("Sorry, we can find description for this book");
}
});
});
</script>