transport project

by Rey Den Nalasa

HTML

<div id="wpc_total"></div>

<select name="service_type" id="service_type" required="">
  <option value="">-- Select One --</option>
  <option value="Express Delivery">Express Delivery</option>
  <option value="Economy Delivery">Economy Delivery</option>
</select>

<table>
  <tbody data-repeater-list="pq_package_items">
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <span name="wpc_subtotal">Subtotal </span>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option>
          <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option>
        </select>
      </td>
      <td>
        <span name="wpc_subtotal">Subtotal </span>
        <input data-repeater-delete type="button" value="Delete" />
      </td>
    </tr>
    <tr data-repeater-item>
      <td>
        <input class="number" type='text' name="qty" required="required" />
      </td>
      <td>
        <select name="piece_type" required="required">
          <option value="">Select Type</option>
          <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option>
          <option value="Small (1-5kg...

JavaScript

jQuery(document).ready(function($) {

      var price = 0;
      var documents = "Documents (Up to 1kg)";
      var small = "Small (1-5kg 85cm)";
      var medium = "Medium (5-10kg 110cm)";

      function checkTotal() {
        var qty = $("input[name*='qty']");
        var piece_type = $("select[name*='piece_type']");
        var total = 0;
        var row = $(this).closest('tr');

        qty.each(function(index) {

          var spanID = $(this).closest('tr').find('span[name="wpc_subtotal"]');
          var sum = 0;
          var quantity = $(this).val() ? $(this).val() : 0;
          var selected = piece_type.eq(index).find(":selected").text();

          if (selected == documents) {
            price = 10;
            sum = parseFloat(quantity) * parseFloat(price);
          }

          if (selected == small) {
            price = 20;
            sum = parseFloat(quantity) * parseFloat(price);
          }

          if (selected == medium) {
            price = 30;
            sum = parseFloat(quantity) * parseFloat(price);
          }
          total += sum;
          spanID.text("Subtotal : " + sum);
        });

        $("#wpc_total").text("Total : $" + total);


        //$("[name*='wpc_subtotal']").text("Total : $" + total);
      }

      function delete_row() {
        //gets current dropdown value
        //alert(service_type);
        var service_type = $("#service_type option:selected").text();
        //Use the current element to context to target parent <TR>
        var tr = $(this).closest('tr');
        //Use DOM traversal method to target element
        var elemns = tr.find("select[name*='piece_type'],.number");
        //Reset value and trigger change event
        elemns.val('').trigger('change');
      }

      //Reset table here.
      function reset_table() {
        $('table').find('input[type="text"], select').val('');

      }
      $("#service_type").change(reset_table);


      $(document).on("click", "input[value='Delete']",...