CODEWITHSUNDEEP
javascriptphplaravellaravel-5
Atlas
Atlas

Reputation: 185

Dynamic Select Field that Repopulates after Changes in Another Select Field - Laravel 5.2 and JS

I am developing a web app using Laravel 5 and trying to integrate some JS to help out a form. I want users to be able to select a category in one select field, at which point a second select field should populate with options within that category. (E.g., Select a profession: programmer, artist. If 'programmer' is selected, second select field populates with: C++, Java, Python. If 'artist' is selected, second select populates with: Photoshop, Illustrator, MS Paint.)

Note that I need to populate these fields from my database. I've found examples of what I am trying to do on the web that I have tried to adapt to my case. The one I'm using is here: http://www.9lessons.info/2010/08/dynamic-dependent-select-box-using.html but I can't get it to work (it's fairly old--from 2010).

Here's my HTML and JS:

<!-- JS -->
<script type="text/javascript">
$(document).ready(function()
{
$("#field_main").change(function()
{
  var id = $(this).val();
  var fields="";
  $.ajax
  ({
    type: "POST",
    url: "ajax_field.php",
    data: {id: id},
    cache: false,
    success: function(data)
        {
           $.each(data,function(index,field) 
           {
             fields+="<option value='"+field.id+"'>"+field.field+"</option>";
           });
           $("#field").html(fields);
       }
   });
 });
});
</script>

<!-- Create the first select field, this part of the code works fine -->
<label>Area :</label>
<select name="field_main" id="field_main">
   <option selected="selected">--Select Area--</option>
   <?php
   $areas = App\Area::all();
   foreach($areas as $area){
      echo "<option value=\"" . $area->id . "\">" . $area->area . "</option>";
    }
   ?>
</select>

<!-- Create the second select field; this part is not working -->
<label>Field :</label>
<select name="field" id="field">
<!--<option selected="selected">--Select Field--</option>-->

</select>

Here's what ajax_field.php looks like:

<?php
namespace App\Http\Controllers;
use DB;

if($_POST['id'])
{
    $id = $_POST['id'];
    $fields = DB::table('fields')->where('area_ref', $id)->get();
    return response()->json(['data' => ['fields' => $fields]]);
}
?>

As far as I can tell, nothing runs from ajax_skill.php. I tried echoing something out in that function, it didn't appear on my page, and the skills field never populates. The profession select field, however, populates fine.

Any thoughts on where this code is going wrong?

Upvotes: 0

Views: 801

Answers (1)

Davor Minchorov
Davor Minchorov

Reputation: 2076

You need to return JSON when hitting that URL with AJAX. You don't need the HTML. Return only the skills data with return response()->json(['data' => ['skills' => $skills]]); and add the select element on the page populated with all of the skills.

Oh and, the ajax data property takes an object so it should be: data: {id: id}

Since you are using Laravel, half of your code looks like old school PHP which is useless when Laravel has a cleaner way for these things.

If you are new to PHP and Object Oriented Programming, I'd advice you to learn that before using Laravel. It will help you in the future.

Also, I'd advice you to read up the Laravel documentation, follow the tutorials there and even go to Laracasts and watch the Laravel 5 Fundamentals and Laravel From Scratch series to get up to speed with Laravel.

Upvotes: 1

Related Questions