CODEWITHSUNDEEP
javascriptphplaravel
Claire
Claire

Reputation: 123

Make a text box automatically fill depending on drop-down selection (Laravel and Javascript help!)

I am looking to automatically fill some text boxes in a page depending on what the user selects from the dropdown on the same page.

So like, if a user makes a selection then auto fill related information from the database. And then if a user changes the selection, dynamically update and change the information in the text boxes to match the selection.

So far all I can do is display some database text if I hard code the selection (which of course just displays the same thing no mater what the users does).

Say I am pulling some information from a specific field called info_description in my database:

$fill = \DB::table('tbl_information')->where('id', 1)->pluck('info_description');

which is passed to the blade.php file like this:

return view('pages.information')
        ->with('fill', $fill);

and I have the following in my blade.php file

<div class="form-group">
    <label class="col-md-4 control-label">app method</label>
    <div class="col-md-6 input-group-sm">
        {!! Form::text('text', $fill) !!}
    </div>
</div>

I figure I need some JavaScript to help me with this but I am completely lost as to how to go about it. I could really use some help and direction if anyone can guide me on this.

How can I make this work?

Upvotes: 3

Views: 6587

Answers (1)

Jilson Thomas
Jilson Thomas

Reputation: 7303

This should give you a head start.

route.php 

Route::get('/infos/{id}', 'InfoController@getInfo');

InfoController.php

public function getInfo($id)
{
  $fill = \DB::table('tbl_information')->where('id', $id)->pluck('info_description');

  return Response::json(['success'=>true, 'info'=>$fill]);
}

app.js

$("#info_id").change(function() {
  $.ajax({
    url: '/info/' + $(this).val(),
    type: 'get',
    data: {},
    success: function(data) {
      if (data.success == true) {
        $("#info_id").value = data.info;
      } else {
        alert('Cannot find info');
      }

    },
    error: function(jqXHR, textStatus, errorThrown) {}
  });
});

HTML

<select name="info_id" id="info_id">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<textarea name="info_area" id="info_area" cols="30" rows="10"></textarea>

Upvotes: 2

Related Questions