How to access the input tag value

Question

Update: I solved it by creating a new variable and used it and assigned that variable to finalPrice Improving the question as I think it can be done different way I wanna access the value finalPrice defined here just above the add_to_download_entries function :

 var counts = 1;
 var checkboxes;
 var finalPrice;

The above finalPrice I want to access and assign that value to inside payModal function in the place of finalPrice = 44 44 should be the value coming from finalPrice from the one above finalPrice variable defined above the add_to_download_entries function. so when I do finalPrice = "Pay Now $" + Number(counts) * Number(22); in the document.ready function I want this finalPrice value to be assigned to finalPrice = 44; in here in the PayModal() function in place of 44 how can I do that?

<script>   
 // Pay Modal 
    async function payModal() {
      
      await fetch("{{ route('paymentModal') }}")
      .then(response => response.json())
        .then(response => {
          const form = document.getElementById('payment-form');
          _key_for_ss = response.paymentIntent.client_secret;
          paymentIntentID = response.paymentIntent.id;
          finalPrice = 44; 
          async function openModal() {
            await createCard();
            $('#pay-modal').modal('show');
          }
          openModal();
        })
    }
    
    var selected_lostwill_array = [];
    
     var counts = 1;
     var checkboxes;
     var finalPrice;
    function add_to_download_entries(data) {
       checkboxes = document.querySelectorAll('input[name="checkWills"]:checked');
        counts = checkboxes.length;
      if($.inArray(data, selected_lostwill_array) >= 0){
        selected_lostwill_array = $.grep(selected_lostwill_array, function(value){
             return value != data;
           });
         }else{
          selected_lostwill_array.push(data);
         }
         // DataTables Functions 
    $(document).ready( function () {
        $('#org_lost_table').DataTable();
        $('#all_lost_table').DataTable();
        if(counts>0){
             finalPrice = "Pay Now $" + Number(counts) * Number(22);
            
            $( "#payment-sub-btn" ).text(finalPrice);
           }else $( "#payment-sub-btn" ).text(0); 
    } );
    }
</script>

FYI: `for="feCoupon"` doesn't related to any elements in the HTML document because there are no elements with that `id`. — mickmackusa, Apr 24 '23 at 01:36
@RinsadAhmed inner text gets the whole pay now $ text as well but I only want the value which is 22 or 44 etc after "pay now $44" — user022yufjb, Apr 26 '23 at 00:38

score 1 · Accepted Answer · answered Apr 26 '23 at 02:40

I resolved it by creating a new variable called finalPrices and assigned the value of finalPrices to finalPrices = Number(counts) * Number(22); so now it does not get the text and just a integer value

   var finalPrices;
    async function payModal() {
      
      await fetch("{{ route('paymentModal') }}")
      .then(response => response.json())
        .then(response => {
          const form = document.getElementById('payment-form');
          _key_for_ss = response.paymentIntent.client_secret;
          paymentIntentID = response.paymentIntent.id;
          finalPrice = finalPrices; 
          async function openModal() {
            await createCard();
            $('#pay-modal').modal('show');
          }
          openModal();
        })
    }

function add_to_download_entries(data) {
   checkboxes = document.querySelectorAll('input[name="checkWills"]:checked');
    counts = checkboxes.length;
  if($.inArray(data, selected_lostwill_array) >= 0){
    selected_lostwill_array = $.grep(selected_lostwill_array, function(value){
         return value != data;
       });
     }else{
      selected_lostwill_array.push(data);
     }
     // DataTables Functions 
$(document).ready( function () {
    $('#org_lost_table').DataTable();
    $('#all_lost_table').DataTable();
    if(counts>0){
       finalPrices = Number(counts) * Number(22);
         finalPrice = "Pay Now $" + Number(counts) * Number(22);
        
        $( "#payment-sub-btn" ).text(finalPrice);
       }else $( "#payment-sub-btn" ).text(0); 
} );
}

score 1 · Answer 2 · answered May 01 '23 at 13:27

While your own solution is correct, is not the best.

You don't need to wrap a number inside a Number(). You should also store the computed value in a variable (like you are doing) and then reference that value.

As a plus, you can use newer JavaScript language features to forego the confusing usage + in string concatenation. You can instead use template literals:

`${finalPrices}`

So the resulting code with these modifications would look like this:

let finalPriceValue;
let finalPriceText;

function add_to_download_entries(data) {
  // ...
  // ...
  if(counts>0){
    finalPriceValue = Number(counts) * 22;
    finalPriceText = `Pay Now $${finalPriceValue}`;
    $( "#payment-sub-btn" ).text(finalPrice);
  }
}

How to access the input tag value

2 Answers2