How to get the text of selected option instead of value

Question

Here's the body of my html:

  <form class="p-3">
            <div class="form-group">
                <label>Full Name</label>
                <input id="inputName" type="text" oninput="Update(this.value, 'namec')" 
  class="form-control"
                    placeholder="Robert">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label>Contact Number</label>
                    <input id="inputNumber" type="text" oninput="Update(this.value, 
   'numberc')" class="form-control"
                        placeholder="09*********">
                </div>
                <div class="form-group col-md-6">
                    <label>Email Address</label>
                    <input id="inputEmail" type="email" oninput="Update(this.value, 'emailc')" 
    class="form-control"
                        placeholder="email@gmail.com">
                </div>
            </div>
            <div class="form-group">
                <label>Full Address</label>
                <input type="text" class="form-control" placeholder="1234 Main St"
                    oninput="Update(this.value, 'addressc')">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label>Mode of Payment</label>
                    <select id="inputMOP" class="form-control" oninput="Update(this.value, 'mopc')">
                        <option selected>Select Payment</option>
                        <option>GCash</option>
                        <option>Bank Payment</option>
                        <option>Cash On Delivery</option>
                    </select>
                </div>
                <div class="form-group col-md-6">
                    <label>Shipping Option</label>
                    <select id="inputMOD" class="form-control" oninput="Update(this.value, 
   'modc')">
                        <option selected>Select Delivery</option>
                        <option>Standard Delivery</option>
                        <option>J&T Express</option>
                        <option>Ninjavan Express</option>
                    </select>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-8">
                    <label>Item Name</label>
                    <select id="inputItem" class="itemInput form-control" 
     oninput="Update(this.value, 'itemc')">
                        <option selected>Select Item</option>
                        <option value="155.00">Hygienix Alcohol 1L</option>
                        <option value="180.00">Protect Plus Alcohol 1 Gal</option>
                        <option value="215.00">Guardian Alcohol 1 Gal</option>
                    </select>
                </div>
                <div class="form-group col-md-4">
                    <label>Quantity</label>
                    <input id="inputQuantity" type="text" oninput="Update(this.value, 
   'quantityc')"
                        class="itemQuantity form-control" placeholder="0"><br>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-3">
                    <h6 class="mt-2">Total Price: ₱ </h6>
                </div>
                <div class="form-group col-md-3">
                    <input id="itemPrice" type="text" oninput="Update(this.value, 'pricec')" 
    class="form-control" placeholder="0" readonly>
                    
                </div>
                <div class="form-group col-md-6">
                    <button id="placeOrder" class="btn btn-primary btn-block float- 
   right">Place Order</button>
                </div>
            </div>
        </form>

Jquery to calculate the total price:

     <script>
    $(document).ready(function () {
        $('select.itemInput').on('change', function () {
            $('.itemQuantity').text($('#inputQuantity').val(0));

            $('.itemQuantity').on('change', function () {
                $('#itemPrice').val(
                    $('#inputItem').val() * $('#inputQuantity').val() + ".00"
                );

            });
        });

    });
  </script>

Variable declaration to add to the database:

     var cName = $('#inputName').val();
    var cNumber = $('#inputNumber').val();
    var cEmail = $('#inputEmail').val();
    var cAddress = $('#inputAddress').val();
    var cMop = $('#inputMop').val();
    var cMod = $('#inputMod').val();
    var cItem = $('#inputItem').find(":selected").text();
    var cQuantity = $('#inputQuantity').val();
    var cPrice = $('#itemPrice').val();

The problem is that I cant get the text of the selected option from the #inputItem. It only gets the value from the option. Another thing, I can't also get the total price which is under the ID of #itemPrice.

How can I get the text instead of value of #inputItem? Also, the value of #itemPrice?

EDIT:

Finally solved it!! But I have a new problem, I cant add data with a "@gmail.com" but it works when it does not have it. How can I do add data with "@email.com"?

Answer 1

Use the following script for the desired results. Also if you don't have any function to call onChange, kindly remove those from your input fields, from html. They will keep on throwing errors in console.

$(document).ready(function () {
  $('.itemInput').on('change', function () {

    // tempItemName stores the selected item name
    var tempItemName = $('.itemInput option:selected').text();
    totalPriceCalc();

  });

  $('.itemQuantity').on('change', function(){
    totalPriceCalc();
  });

  function totalPriceCalc () {
    var tempInputQty = $('#inputQuantity').val();
    var tempItemPrice = $('#inputItem option:selected').val();
    var tempTotalCost = (tempInputQty * tempItemPrice) + '.00';
    $('#itemPrice').val(tempTotalCost);
  }

});