Retrieve and store all CSS classes within an array before performing a calculation

Question

Retrieve and store all CSS classes within an array before performing a calculation

I am trying to input an exchange rate into a text field and update multiple text areas with new rates.

Exchange Rate <input type="text" value="" id="exchange_rate">
<input type="button" value="Update Price" id="update_price">

The number of text areas may vary, here are some samples:

<input class="price" name="pro_name[88197][1]" rel="4450000" value=""  type="text">
<input class="price" name="pro_name[12316][2]"  rel="4451000" value=""  type="text">
<input class="price" name="pro_name[46511][3]" rel="4575120" value=""  type="text">
<input class="price" name="pro_name[45151][4]" rel="2343400" value=""  type="text">
<input class="price" name="pro_name[165652][5]" rel="4534500" value=""  type="text">
<input class="price" name="pro_name[85559][6]" rel="4450000" value=""  type="text">

Now I want to calculate the value for each text area by multiplying the 'rel' (Japan YEN amount) with the exchange rate (USD).

I have started my jQuery code as shown below but I am facing some issues. Can someone please help me solve this problem?

$("#update_price").click(function () {
   var all_price_element = [];
   price_class = $( ".price" ).toArray();

   for (var i = 0; i < price_class.length; i++) {
     all_price_element.push(price_class[i].innerHTML);
   }
});

jquery html css

Answer 1

Answer №1

If you want to iterate through each element, you can use the .each() function:

Here is an example of how to do it:

$("#update_price").click(function (e) {
  //
  // get the current exchange_rate and convert it to a number
  //
  var er = +document.getElementById('exchange_rate').value;

  
  //
  // for each price element, perform the calculation:
  //
  // get the current rel value, convert it to a number and
  // multiply by rel
  //
  $( ".price").each(function(index, element) {
    element.value = er * +element.getAttribute('rel');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  Exchange Rate <input type="text" value="" id="exchange_rate">
<input type="button" value="Update Price" id="update_price">

<input class="price" name="pro_name[88197][1]" rel="4450000" value=""  type="text">
<input class="price" name="pro_name[12316][2]"  rel="4451000" value=""  type="text">
<input class="price" name="pro_name[46511][3]" rel="4575120" value=""  type="text">
<input class="price" name="pro_name[45151][4]" rel="2343400" value=""  type="text">
<input class="price" name="pro_name[165652][5]" rel="4534500" value=""  type="text">
<input class="price" name="pro_name[85559][6]" rel="4450000" value=""  type="text">
</form>

Answer 2

If you want to iterate through each element, you can use the .each() function:

Here is an example of how to do it:

$("#update_price").click(function (e) {
  //
  // get the current exchange_rate and convert it to a number
  //
  var er = +document.getElementById('exchange_rate').value;

  
  //
  // for each price element, perform the calculation:
  //
  // get the current rel value, convert it to a number and
  // multiply by rel
  //
  $( ".price").each(function(index, element) {
    element.value = er * +element.getAttribute('rel');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  Exchange Rate <input type="text" value="" id="exchange_rate">
<input type="button" value="Update Price" id="update_price">

<input class="price" name="pro_name[88197][1]" rel="4450000" value=""  type="text">
<input class="price" name="pro_name[12316][2]"  rel="4451000" value=""  type="text">
<input class="price" name="pro_name[46511][3]" rel="4575120" value=""  type="text">
<input class="price" name="pro_name[45151][4]" rel="2343400" value=""  type="text">
<input class="price" name="pro_name[165652][5]" rel="4534500" value=""  type="text">
<input class="price" name="pro_name[85559][6]" rel="4450000" value=""  type="text">
</form>

Answer 3

Answer №2

To update all prices, you can use the following method.

$("#update_price").click(function () {  
    var ex_rate = $('#exchange_rate').val();   
  
    $(".price").each(function() {
        var rel = $(this).attr('rel')
        $(this).val(ex_rate * rel);
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="price" name="pro_name[88197][1]" rel="4450000" value=""  type="text">
<input class="price" name="pro_name[12316][2]"  rel="4451000" value=""  type="text">
<input class="price" name="pro_name[46511][3]" rel="4575120" value=""  type="text">
<input class="price" name="pro_name[45151][4]" rel="2343400" value=""  type="text">
<input class="price" name="pro_name[165652][5]" rel="4534500" value=""  type="text">
<input class="price" name="pro_name[85559][6]" rel="4450000" value=""  type="text">

Exchange Rate
<input type="text" value="" id="exchange_rate">
<input type="button" value="Update Price" id="update_price">

Answer 4

To update all prices, you can use the following method.

$("#update_price").click(function () {  
    var ex_rate = $('#exchange_rate').val();   
  
    $(".price").each(function() {
        var rel = $(this).attr('rel')
        $(this).val(ex_rate * rel);
    });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="price" name="pro_name[88197][1]" rel="4450000" value=""  type="text">
<input class="price" name="pro_name[12316][2]"  rel="4451000" value=""  type="text">
<input class="price" name="pro_name[46511][3]" rel="4575120" value=""  type="text">
<input class="price" name="pro_name[45151][4]" rel="2343400" value=""  type="text">
<input class="price" name="pro_name[165652][5]" rel="4534500" value=""  type="text">
<input class="price" name="pro_name[85559][6]" rel="4450000" value=""  type="text">

Exchange Rate
<input type="text" value="" id="exchange_rate">
<input type="button" value="Update Price" id="update_price">

Retrieve and store all CSS classes within an array before performing a calculation

Answer №1

Answer №2

Similar questions

evaluating differences in strings using internet explorer

Are you prepared for changing DropDowns?

How come I am unable to scroll beyond my parallax section unless I move the mouse first?

Stop Bootstrap Modal from Showing on Mobile Devices

A guide to adjusting the size of a mat-button using an svg mat-icon

The issue arises when RadioBoxes do not submit properly after their `check` status is altered using JQuery

How can jQuery iterate through each element's href attribute?

Transforming numerical figures into written form within a specified range: A step-by-step guide

The functionality of .attachClickHandler() is not maintained when the page is refreshed or redirected

Save essential data in local/session storage to have access to it even after the page is reloaded

Stylish Material Design Icons

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

retrieve all elements within a drag selection made by a mouse

What is the best way to position the hamburger menu icon on the right side of the header?

Tips for ensuring that hover:after contents do not impact the positioning of the next element

Tips for accessing values from an array in JavaScript

Bootstrap 5's Vertical Ruler

The back div is not retained on the second animation when flipping the card

"Unlocking the power of Bootstrap modals in Django

Unable to assign an ID to an element in JavaScript, as it will constantly be undefined