Question 69892 in Ajax Question posted in
You can find the official documentation here.

javascript / ajax with one click set multiple variables by ids as an array – Jquery ajax

This function was deprecated

Original quastion :

For all kinds of suggest and helps with much appreciated.

I was trying build a function let the selected product which in the Cart

move to another table so there I can reorder them each fitting to the customer demanded.

and my biggest problem is that I don’t have clue how to deal with this situation when I can’t trans them into array, omg

when the products put in Cart would be like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody class="table-border" id="My_OrderCart_tbody">
  <tr>
    <div class="row-fluid gx-2 px-2">
      <dl data-place_id="dl7557">
      <dd class="px-1">J. De Telmont Grand Reserve Brut NV Champagne (15Litre)</dd>
      </dl>
    </div>
    <div class="px-2"><input class="input form-control" type="number" id="Quan7557" value="1" data-id="7557">
    </div>
    <div class="mx-auto"><span>$</span>
      <input type="text" class="input form-control" id="Price7557" data-id="7557" value="10500">
    </div>
    <div class="row max-auto px-3">
    <input type="button" class="btn btn-sm Remove" id="7557" value="Remove"></div>
  </tr>
    
  <tr>
    <span>SubTotoal :</span><span>$</span>
    <input type="text" class="input form-control" id="Sub_7557" value="10500.00" disabled="">
  </tr>
    
  <tr>
    <div class="row-fluid gx-2 px-2">
      <dl data-place_id="dl7556">
      <dd class="px-1">Taittinger Reserve Vintage Brut Champagne</dd>
      </dl>
    </div>
    <div class="px-2"><input class="input form-control" type="number" id="new_Quan7556" value="1" data-id="7556">
    </div>
    <div class="mb-2 mx-auto">
    <span>$</span><input type="text" class="input form-control" id="Price7556" data-id="7556" value="486">
    </div>
    <div class="row"><input type="button" class="btn Remove" id="7556" value="Remove">
    </div>
  </tr>
    
  <tr>
    <span>SubTotoal :</span><span>$</span>
    <input type="text" class="input form-control fst-italic mbi-sub-text sub_total" id="new_Sub_a_7556" value="486.00" disabled="">
  </tr>
    
  <tr>
    <div class="align-center">
    <span class="text">Grand Total:</span>
    <input type="text" id="gTotal1" value="10986" hidden="">
    <span class="text" id="Grand_Total1" align="right">$ 10,986.00 </span>
    </div>
</tr>

as the code shows the product all got different data-ids like:

<dl class="list-group list-unstyled" data-place_id="dl7557">
<dl class="list-group list-unstyled" data-place_id="dl7556">

I was trying to get the data-Id since the rest of calculate such as Quantity, Price also control by same date-Id

<script>  
$(document).on('click', '#saveBtn, #view-table', function() {
  $('#My_OrderCart_tbody tbody tr').each(function() {
    var data_id = $(this).find("dl[id^=dl]").data("place_id");
  });
  console.log(data_id);
  });
</script>

but the script doesn’t work which says: Uncaught ReferenceError: data_id is not defined

I was thinking putting the values while users altered into other elements.

following function would be send altered values ajax post add to the Cart-table:

<script>
  $(document).ready(function(data){
    $('.add_to_cart').click(function(){
      var product_id = $(this).attr("id");
      var product_name = $('#name'+product_id).val();
      var product_price = $('#price'+product_id).val();
      var product_quantity = $('#quantity'+product_id).val();
      var action = "add";

      if (product_quantity > 0){  
        $.ajax({  
        url:"action.php",  
        method:"POST",  
        dataType:"json",  
        data:{  
          product_id:product_id,   
          product_name:product_name,   
          product_price:product_price,   
          product_quantity:product_quantity,   
          action:action
        },
        success:function(data){
          $('#order_table').html(data.order_table);
          $('.badge').text(data.cart_item);
          alert("Product has been Added into Cart");
          }
        });
      } else {
        alert("Please Enter Number of Quantity")
    }
  });  
</script>

For the PHP site using $_SESSION and $_POST to handle the values
such as
pass-javascript-variable-to-php-and-then-to-cart-and-order-line-items-in-woo-com

If it could possible getting the data-Id of each dl then IMPO it is very likely could’ve solve by origin code $('prefix' + ids).val(); or .text();

even thought I found some answers like change ids into class, but I still need ids to control the calculate part

get-multiple-elements-by-id

get-multiple-id-at-once-at-set-a-function

display-results-of-event-on-multiple-id

Thank you for reading here, LOL

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Newest function of multiple calculation with both Price & Quantity

    According of this answer: jQuery Shopping Cart summing Subtotal to calculate Total Price

    New structure and js style much easy readable and understand,

    Thanks of the above answer.

    // function need run each change
$('.qty').change(function() { // for quantity
  updateSubtotal(this);
});
$('.price').change(function(){ // for price
  updateSubtotal(this);
});



function updateSubtotal(change) {
  var cartRow = $(change).closest('.cartRow'); // get DOM obj
  var price = $('.price', cartRow).val(); // get price in obj
  var quantity = $('.qty', cartRow).val(); // get qty in obj
  var subtotal = $('.subtotal', cartRow); // get subttl in obj
  var linePrice = price * quantity;
  $(subtotal).val(linePrice.toFixed(2)); // put val to subttl
  total_calculate() // call
}

function total_calculate() {
  var total = 0; // according previus answer need to default 0
  //loop through subtotal
  $(".cartRow .subtotal").each(function() {
    //chck if not empty
    var value = $(this).val() != "" ? parseFloat($(this).val()) : 0;
    total += value; //add that value
  })
  //assign to total span
  $("#total").text(total.toFixed(2))
  // assign to hidden grand value for futher function
  $("#grand_val").val(total.toFixed(2))
  // assign to grand total display text
  $("#grand_ttl").text(total.toFixed(2))
}
total_calculate() // function again let grand_val correct
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="cartRow">
    <td>
    <dl data-id="7557">
      <dd>J. De Telmont Grand Reserve
        Brut NV Champagne (15Litre)</dd>
    </dl>
    <input class="qty" type="number" value="1" min="1">
    <span>$</span>
    <input class="price" value="10500">
    <input type="button" class="remove" value="Remove">
    <div>SubTotoal:$
    <input class="subtotal" value="10500.00" disabled>
    </div>
    </td>
  </tr>
  
  <tr class="cartRow">
    <td>
    <dl data-id="7556">
      <dd>Taittinger Reserve Vintage
        Brut Champagne</dd>
    </dl>
    <input class="qty" type="number" value="1" min="1">
    <span>$</span><input class="price" value="486">
    <input type="button" class="remove" value="Remove">
    <div>SubTotoal :$
    <input class="subtotal" value="486.00" disabled>
    </div>
    </td>
  </tr>
 
</table>

<div class="align-center">
  <span class="text">Grand Total:</span>
  <input id="grand_val" value="" hidden>
  <span id="grand_ttl" align="right"></span>
</div>

<span class="float-right" style="color:blue" id="total">0</span>


  2. 0 
    $(document).on('click', '#saveBtn, #view-table', function() {
    $('#My_OrderCart_tbody tbody tr').each(function() {
        var save_id = $(this).find("dl[id^=dl]").data("place_id");
    });
    console.log(save_id);
});

    "but my script doesn’t work which says: Uncaught ReferenceError: save_id is not defined"

    well… the error message tells you what is happening. You declare var in $.each. You console log save_id outside of $.each.
    Of course this won’t work (function scope.)

    This could work, depending on what you want to do with the array.

    $(document).on('click', '#saveBtn, #view-table', function() {
    let id_array = [];
    $('#My_OrderCart_tbody tbody tr').each(function() {
        // who uses var anymore ?
        let save_id = $(this).find("dl[id^=dl]").data("place_id");
        // push to previously defined array
        id_array.push(save_id);
    });
    console.log(id_array[0]); // console log first id in array
});

    If you need an index or element to the id, store the data in an object instead.

    let id_array = [];
$('#My_OrderCart_tbody tbody tr').each(function() {
    let obj = {
        save_id: $(this).find("dl[id^=dl]").data("place_id"),
        elem: $(this)
    }
    
    // push to previously defined object
    id_array.push(obj);
});
    console.log(id_array[0].save_id); // console log first id in array
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search