mercredi 9 juin 2021

How to get the text of selected option instead of value

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?




Aucun commentaire:

Enregistrer un commentaire