Как очистить поле количества и цены, если в раскрывающемся списке я не выбрал ни одного товара?

Question

Когда я выбираю продукт из выпадающего списка, цена и количество выводятся из базы данных, и когда я выбираю опцию ВЫБРАТЬ МАТЕРИНСКУЮ ПЛАТУ , которая не имеет значения, поэтому поле количества и цены должно быть пустым, но поле количествапокажите значение 1 и поле Total Price покажите 0 вместо пустого текстового поля. Как я могу решить эту проблему.

Когда я выбираю продукт из выпадающего списка:

Когда я нажимаю ВыбратьМатеринская плата опция из выпадающего:

 <tr class="category motherboard" data-value="motherboard">
                                    <td>
                                        <span>Motherboard</span>
                                    </td> 
                                    <td>
                                      <select name="motherboard" id="motherboard" style="min-width: 100%;" class="select" onchange="getPrice(event)">
                                        <option>Select Motherboard</option>
                                        <?php echo motherboard_brand($connect); ?>
                                      </select>
                                    </td>
                                    <!-- QUANTITY -->
                                    <td>
                                        <input type="number" min="0" name="email" class="quantity" oninput="setTotalPrice(event)"/>
                                    </td>
                                    <!-- per item price -->
                                    <td>
                                        <input type="text"  readonly class="unit-price" >
                                    </td>
                                    <!-- Total Price -->
                                    <td>
                                        <input type="text" readonly  class="total-price">
                                    </td>
                                </tr>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function getPrice(e){
e.preventDefault();
grandtotal();
var id = $(e.target).val();
// console.log(id);
let parent = e.target.parentNode.parentNode;
// console.log(parent);
let category = parent.getAttribute("data-value");
// console.log(category);
$.ajax({
     url:"load_data.php",
     method:"POST",
     data:{id:id},
     success:function(data){
          // console.log(id);
          let unitPrice = parent.querySelector("input.unit-price");
          // console.log(unitPrice);
          unitPrice.value = data;
          $(parent).attr("data-id", id);
          $(parent).attr("data-quantity", 1);
          parent.querySelector("input.quantity").value = 1;
          parent.querySelector("input.total-price").value = +data * 1;
          grandtotal();
     }
   });
}

function setTotalPrice(e){
e.preventDefault();
// console.log(event.target);
let parent = e.target.parentNode.parentNode;
// console.log(parent);
let unitPrice = parent.querySelector("input.unit-price").value;
let quantity =   parent.querySelector("input.quantity").value;
$(parent).attr("data-quantity", quantity);
parent.querySelector("input.total-price").value = (+unitPrice) * (+quantity);
grandtotal();
}
// Grand Total
function grandtotal() {

var sum=0;
$('.total-price').each(function(){
var item_val=parseFloat($(this).val());
if(isNaN(item_val)){
  item_val=0;
}
sum+=item_val;
$('#TotalPrice').html(sum.toFixed(2));
});

}   
</script>

Answer 1

Вы можете изменить функцию getPrice ():

function getPrice(e) {
  e.preventDefault();
  //grandtotal();
  var id = $(e.target).val();
  // console.log(id);
  let parent = e.target.parentNode.parentNode;
  // console.log(parent);
  let category = parent.getAttribute("data-value");
  // console.log(category);
  //CHECK IF THE SELECTED OPTION IS EMPTY
  if ($("#motherboard option:selected").val() == '') {
    parent.querySelector("input.quantity").value = "";
    parent.querySelector("input.total-price").value = "";
  } else {
    $.ajax({
      url: "load_data.php",
      method: "POST",
      data: {
        id: id
      },
      success: function(data) {
        // console.log(id);
        let unitPrice = parent.querySelector("input.unit-price");
        // console.log(unitPrice);
        unitPrice.value = data;
        $(parent).attr("data-id", id);
        $(parent).attr("data-quantity", 1);
        parent.querySelector("input.quantity").value = 1;
        parent.querySelector("input.total-price").value = +data * 1;
        grandtotal();
      }
    });
  }

}