How can i clear the quantity and price field when i select no product in the drop down? : When i select product from the drop down price and quantity came out from the database and when i Select the option **SELECT MOTHERBOARD** that have no value so that quantity and price field should be empty but the quantity field show the value **1** and Total Price field show **0** instead of empty text field. How can i sort-out this issue.

> When i select product from drop-down.

[Image][1]

> When i click on  **Select Motherboard** option from drop-down

[Image][2]


  [1]: https://i.stack.imgur.com/XbW0f.png
  [2]: https://i.stack.imgur.com/E6y2I.png

   

     <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>