I am writing inventory management system where I what the user to select product and I use axios to get the corresponding price of the product

It is a multiple rows where the user click on add product to select the product and the corresponding price displays

The jquery creates a new row of product and also which allows the user to select a product and it uses axios to request for the price from the server.

When the request returns the price from the server it update the price input field.

But it updates the price with 0 instead of the response from axios

$("#add-product").click(function(e) {
  e.preventDefault();
  $("#new-field").clone().appendTo("#wrapper");
});
$("#payment-method").change(function() {
  $(".full-payment").css({
    "display": "block"
  });
})

$("#wrapper").on('change', '.product', function(e) {
  e.preventDefault();
  $(this).closest('.row-field').find('.price').html("loading...")

  let price = 0;
  axios.get("/api/get-price/"   $(this).val())
    .then(function(response) {
      console.log(response.data.price)
      $(this).closest('.row-field').find('.price').html(price);
      $(this).closest('.row-field').find('.price').val(price);

    });

})

$("#wrapper").on('keyup', '.quantity', function() {
  var total = 0;
  let price = $(this).closest(".row-field").find(".price").val();
  console.log("price", price)
  if (isNaN(price)) {
    alert("Allow the rpice to load")
  } else {

    total = parseInt($(this).closest(".row-field").find(".price").val()) * parseInt($(this).val());
    if (isNaN(total)) {
      $(this).closest(".row-field").find(".sub-total").html(0.00);
      return;
    }
    $(this).closest(".row-field").find(".sub-total").html(total);
    console.log("total", total);

    var total = 0,
      val;
    $(".sub-total").each(function() {
      vals = parseInt($(this).text());
      console.log("value ", vals)
      val = isNaN(vals) || $.trim(vals) === "" ? 0 : parseFloat(vals);
      total  = val;
    })
    $(".total").html(total);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <!-- Content Header (Page header) -->
  <section >
    <div >
      <div >
        <div >
          <ol >
            <li ><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li >Add New Sales</li>
          </ol>
        </div>
      </div>
    </div>
    <!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section >
    <div >
      <div >
        <!-- left column -->
        <div >
          <!-- general form elements -->
          <div >
            <div >
              <h3 >Add New Sales</h3>
            </div>
            <!-- /.card-header -->

            <!-- form start -->
            <form role="form" action="{{ url('admin/sales/store-sales') }}" method="post">
              @csrf
              <div >
                <div >

                  <div >
                    <div >
                      <label>Payment Method</label>
                      <select name="payment_method" id="payment-method" >
                        <option value="">Select Payment Method</option>
                        <option value="cash">Cash</option>
                        <option value="bank_transfer">Bank Transfer</option>
                      </select>
                      <!-- @if ($errors->first())
    <span style="font-size: 12px; color: red">{{ $errors->first('payment_method') }}</span>
    @endif -->
                    </div>
                  </div>
                  <div >
                    <a href="#"  id="add-product">Add New Product</a>
                  </div>
                  <div id="wrapper" >
                    <div id="new-field" >
                      <div >

                        <div >
                          <div >
                            <label>Product Name</label>
                            <select name="product[]" >
                              <option value="">Select Product Name</option>
                              @foreach ($products as $product)
                              <option value="{{ $product->id }}" name="product[]">
                                {{ $product->name }}</option>
                              @endforeach
                            </select>
                          </div>
                        </div>
                        <div >
                          <div >
                            <label>Quantity</label>
                            <input type="text" name="quantity[]"  value="{{ old('quantity') }}" placeholder="Enter Quantity">
                          </div>
                        </div>
                        <div >
                          <div >
                            <label>Unit Price</label>
                            <div >Price</div>
                            <input type="hidden" name="price[]"  />
                          </div>
                        </div>
                        <div >
                          <div >
                            <label>Sub Total</label>
                            <div >0.00</div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

                <!-- /.card-body -->
                <div id="new-field" >
                  <div >
                    Total
                  </div>
                  <div >
                    N
                    <span>0.00</span>

                  </div>
                </div>
              </div>

              <div >
                <button type="submit" >Add Sales</button>
              </div>
            </form>
          </div>
          <!-- /.card -->
        </div>
        <!--/.col (left) -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
</div>

CodePudding user response：

You have a field and a div with the same class. I would save

const $priceDiv = $(this).closest('.row-field').find('div.price'); 
$priceDiv.html("loading")
const $priceInp = $(this).closest('.row-field').find('input.price'); 


.then(function(response) {
  console.log(response.data.price);
  $priceDiv.html(response.data.price);
  $priceInp.val(response.data.price);

Also remember to change more places:

$(this).closest(".row-field").find(".price").val();