Onchange function for dropdown in jquery ajax

Question

I have a script with two dropdowns that it is dependent on. The third dropdown is a price, readOnly, which is dependent on subcategory. I have given onChange but there are some problems. I could not render the price value. I am new to ajax and really need some help. I got this example and changed it to fit my needs. I need to just take price from the onClick of subcategory.

Here is my code:

<script>
    $(document).ready(function(){
      var count = 0;
      $(document).on('click', '.add', function(){
        count++;
        var html = '';        
        html += '<tr>';        
        html += '<td>&nbsp;</td>';
        html += '<input type="hidden" name="item_name[]" class="form-control item_name" />';     
        html += '<td><select name="item_category[]" class="form-control item_category" data-sub_category_id="'+count+'"><option value="">Select Service Type</option><?php echo fill_select_box($connect, "0"); ?></select></td>';

        html += '<td><select name="item_sub_category[]" class="form-control item_sub_category"  id="item_sub_category'+count+'"><option value="">Select Service Name</option></select></td>';
        html += '<td><input type="text" name="item_sub_category_price[]" class="form-control item_sub_category_price" /></td>';
        html +='<td><input type="text" name="nosessions[]" class="form-control nosessions" /></td>';       
        html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span>Remove Service</button></td>';
        $('tbody').append(html);
      });

      $(document).on('click', '.remove', function(){
        $(this).closest('tr').remove();
      });

      $(document).on('change', '.item_category', function(){
        var category_id = $(this).find(':selected').data('foo');
        var sub_category_id = $(this).data('sub_category_id');
        // var sub_category_price = $(this).data('sub_category_price');
        $.ajax({
          url:"fill_sub_category.php",
          method:"POST",
          data:{category_id:category_id},
          success:function(data){
            var html = '<option value="">Select Sub Category</option>';
            html += data;
            $('#item_sub_category'+sub_category_id).html(html);
          }
        })
      });

      $(document).on('change', '.sub_category_id', function(){
        alert( this.value );
      });

      $('#insert_form').on('submit', function(event){
        event.preventDefault();
        var error = '';
        $('.item_category').each(function(){
          var count = 1;
          if($(this).val() == ''){
            error += '<p>Select Item Category at '+count+' row</p>';
            return false;
          }
          count = count + 1;
        });

        $('.item_sub_category').each(function(){
          var count = 1;
          if($(this).val() == ''){
            error += '<p>Select Item Sub category '+count+' Row</p> ';
            return false;
          }
          count = count + 1;
        });

        $('.item_sub_category_price').each(function(){
          var count = 1;
          if($(this).val() == ''){
            error += '<p>Select Item price '+count+' Row</p> ';
            return false;
          }
          count = count + 1;
        });

        $('.nosessions').each(function(){
          var count = 1;
          if($(this).val() == ''){
            error += '<p>Select no of sessions '+count+' Row</p> ';
            return false;
          }
          count = count + 1;
        });

        $('.packname').each(function(){
          if($(this).val() == ''){
            error += '<p>Select no of packname '+count+' Row</p> ';
            return false;
          }
        });
        var form_data = $(this).serialize();
        if(error == ''){
          $.ajax({
            url:"insert.php",
            method:"POST",
            data:form_data,
            success:function(data){
              if(data == 'ok'){
                $('#item_table').find('tr:gt(0)').remove();
                $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
              }
            }
          });
        }; else{
          $('#error').html('<div class="alert alert-danger">'+error+'</div>');
        }
      });
    });
</script>

Answer 1

        <script>
$(document).ready(function(){
  var count = 0;
  $(document).on('click', '.add', function(){
    count++;
    var html = '';        
    html += '<tr>';        
    html += '<td>&nbsp;</td>';
    html += '<input type="hidden" name="item_name[]" id="item_name'+count+'"  class="form-control item_name" />';     
    html += '<td><select name="item_category[]" id="item_category'+count+'" onchange="getsubCategory('+count+')"  class="form-control item_category" data-sub_category_id="'+count+'"><option value="">Select Service Type</option><?php echo fill_select_box($connect, "0"); ?></select></td>';

    html += '<td><select name="item_sub_category[]" id="item_sub_category'+count+'"  class="form-control item_sub_category"  id="item_sub_category'+count+'"><option value="">Select Service Name</option></select></td>';
    html += '<td><input type="text" name="item_sub_category_price[]" id="item_sub_category_price'+count+'"  class="form-control item_sub_category_price" /></td>';
    html +='<td><input type="text" name="nosessions[]"  id="nosessions'+count+'"  class="form-control nosessions" /></td>';       
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span>Remove Service</button></td>';
    $('tbody').append(html);
  });

  $(document).on('click', '.remove', function(){
    $(this).closest('tr').remove();
  });
});

function getsubCategory(id){
  var itemCategory="item_category"+id;
  var subcategory_id = "item_sub_category"+id;
  var category_id= $("#"+itemCategory).val();

  $.ajax({
    url:"fill_sub_category.php",
    method:"POST",
    data:{category_id:category_id},
    success:function(data){
      var html = '<option value="">Select Sub Category</option>';
      html += data;
      $('#'+subcategory_id).html(html);
    }
  })
}
</script>

You can do the same for others

Answer 2

I assume that you need to get price of the sub-category using AJAX,

$(document).on('change', '.sub_category_id', function(){
var sub_category_id = $(this).val(); 
$.ajax({
      url:"get_sub_category_price.php",
      method:"POST",
      data:{sub_category_id : sub_category_id},
      success:function(data){

        $('#item_sub_category'+sub_category_id).parent().next().find('. item_sub_category_price').val(data);
      }
    });
});

get_sub_category_price.php file should get the subcategory id and echo the price.