Search code examples
javascriptdomglobal-variablesvar

How to access the input tag value


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>

Solution

  • 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); 
    } );
    }