0

I'm building some application which is retrieving data from MySql database into a dynamically inputs using PHP & Ajax when I'm retrieving data for this input it always shown in the next one but it suppose shown in the div that I mentioned in Ajax code.

This picture will explain my problem clearly sorry for my language English is not my first language.

The pricture

My html code:

                  <div class="form-group">
                    <label class="control-label col-lg-4"></label>
                      <div class="col-lg-4">
                        <div class="box">
                          <header>
                            <h5>تفاصيل الطلب</h5>
                            </header>
                            <div class="body">
                              <div class="form-group">
                              <label class="control-label col-lg-2">الصنف</label>
                                  <div class="col-lg-10">
                                      <select id="itemname" name="itemname[]" class="form-control">
                                        <option disabled selected>اختر الصنف</option>
                                        <?php echo getValues($pdo); ?>
                                      </select>
                                  </div>
                              </div>
                              <div class="form-group">
                                <label class="control-label col-lg-2">السعر</label>
                                <div class="col-lg-10">
                                  <input type="text" id="price" name="price[]" placeholder="-" readonly class="form-control">
                                </div>
                              </div>
                              <div class="form-group">
                                <label class="control-label col-lg-2">الكمية</label>
                                <div class="col-lg-10">
                                  <input class="form-control" type="text" name="quantity[]" id="quantity" value="0" min="1">
                                </div>
                              </div>
                            </div>
                            </div>
                      </div>
                    </div>

PHP file:

<?php    
    require 'DBConnection.php';
    $code='';
    if(isset($_POST["code"])){
        $id = $_POST["code"];
        $get_c = $pdo->prepare("SELECT * FROM all_menu WHERE `item_name` = '".$id."'");
        $get_c->execute(); 
        while ($row = $get_c->fetch()) {
            $code .= $row['price'];
        }
        echo $code;
    }
?>

JQuery code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#add').click(function(){
    $('#append').append('<div class="form-group"><label class="control-label col-lg-4"></label><div id ="diva" class="col-lg-4"><div class="box"><header><h5>تفاصيل الطلب</h5></header><div class="body getval"><div class="form-group"><label class="control-label col-lg-2">الصنف</label><div class="col-lg-10"><select name="itemname[]" class="form-control"><option disabled selected>اختر الصنف</option><?php echo getValues($pdo); ?></select></div></div><div class="form-group"><label class="control-label col-lg-2">السعر</label><div class="col-lg-10"><input type="text" name="price[]" placeholder="-" readonly class="form-control price"></div></div><div class="form-group"><label class="control-label col-lg-2">الكمية</label><div class="col-lg-10"><input class="form-control" type="text" name="quantity[]" value="0" min="1"></div></div></div></div></div></div>');
    });
  
  $(document).on('change', '[name^=itemname]', function() {
    var code = $(this).val();  
    $.ajax({
      type: 'POST',
      url: 'pages/GetPrice.php',
      data:{code:code},
      success: function(data){
        $(this).parents('.getval').find('[name^=price]').val(data);
      },
      error: function (jqXHR, textStatus, errorThrown){
        alert(errorThrown);
      }
    });
  });
});
</script>

0 Answers0