JavaScript change value and data from value in a span

Question

I need help with this. I need to make the value in the other place change all the time while user session is active. How can I get the value from a span and make other value in a data change?

Look at there!

 1 <div class="pt-uea-container">
 2  <span class="pt-uea-currency pt-uea-currency-before"> € </span>
 3  <input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1">
 4  <input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199">
 5  <input type="hidden" name="pt_items[1][label]" value="Amount:">
 6  <input type="hidden" name="pt_items[1][tax_percentage]" value="0">
 7  <input type="hidden" name="pt_items[1][type]" value="open">
 8  <div id="pt_uea_custom_amount_errors_1"></div>
 9  <span class="form-price-value">85</span>
10 </div>

The value in row 9 needs to constantly change values in row 3 and 4 on the same session. Don't mind the value in row 6.

Let me know how I can get this done. Or maybe a different approach?

Greetings!

========

So this is what I got for now from you guys:

jQuery(document).ready(function($) {
var checkViewport = setInterval(function() {
var spanVal = $('.form-price-value').text();
$('#pt_uea_custom_amount_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').val(spanVal);
$('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', spanVal);
}, 1000);

});

This code works, but it only affects my needs when I put my mouse in pt-field pt-uea-custom-amount and add a space in it. Then it does apply to the page source. But this is not correct. The source needs to get changed too without touching that class or a space or something!

Answer 1

This is not an ideal solution. I'm not sure there is a verified way of listening for when the innerHTML of a span element changes. This sort of stuff is usually based on user interaction, and the value of the span will be modified by your page. The best solution would be to use the same method that updates the span element to update the values of you hidden input fields. However, I've placed an interval that will run every second, that takes the text value of the span element and gives it to the values of the 2 input fields:

 function start() { setInterval(function() { document.getElementById("pt_uea_custom_amount_1").value = document.getElementById("price_value").innerHTML; document.getElementById("pt_uea_custom_amount_2").value = document.getElementById("price_value").innerHTML; }, 1000); } window.onload = start(); 

 <div class="pt-uea-container"> <span class="pt-uea-currency pt-uea-currency-before"> € </span> <input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1"> <input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199" id="pt_uea_custom_amount_2"> <input type="hidden" name="pt_items[1][label]" value="Amount:"> <input type="hidden" name="pt_items[1][tax_percentage]" value="0"> <input type="hidden" name="pt_items[1][type]" value="open"> <div id="pt_uea_custom_amount_errors_1"></div> <span id="price_value" class="form-price-value">85</span> </div> 

Answer 2

try this, simple using jquery, you can check in inspect element for value attribute data-pt-price

Update: you can using jquery event .on() like change, click, keyup or else to Attach an event handler function for one or more events to the selected elements, you can read the doc here .

here the updated code

 $(function() { var spanVal = $('#price_value').text(); $('#pt_uea_custom_amount_1').val(spanVal); $('#pt_uea_custom_amount_formatted_1').val(spanVal); $('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', spanVal); $('#pt_uea_custom_amount_1').on('change click keyup', function() { $('#pt_uea_custom_amount_formatted_1').val($(this).val()); $('#price_value').text($(this).val()); $('#pt_uea_custom_amount_formatted_1').attr('data-pt-price', $(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pt-uea-container"> <span class="pt-uea-currency pt-uea-currency-before"> € </span> <input type="text" class="pt-field pt-uea-custom-amount" autocomplete="off" name="pt_items[1][amount]" id="pt_uea_custom_amount_1" value="199" placeholder="" data-parsley-errors-container="#pt_uea_custom_amount_errors_1"> <input type="hidden" class="pt-field pt-uea-custom-amount-formatted" name="pt_items[1][amount]" value="199" data-pt-price="199" id="pt_uea_custom_amount_2"> <input type="hidden" name="pt_items[1][label]" value="Amount:"> <input type="hidden" name="pt_items[1][tax_percentage]" value="0"> <input type="hidden" name="pt_items[1][type]" value="open"> <div id="pt_uea_custom_amount_errors_1"></div> <span id="price_value" class="form-price-value">85</span> </div> 

Answer 3

You can easily do this with the help of jQuery .

With the help of jQuery I would do like this.

1. Understanding what input field needs to be tracked for changes. I will give all this field a class ( track-me ).
2. In the document ready, I will look for changes for that tracked field.
3. On change of that field I will get the value and put in other input fields (class copy-to - or you can do whatever you like).

See an example below,

HTML

<form>
    <div class="">
      <input type="text" class="track-me" value=""/>
    </div>
    <div class="">
      <input type="text" class="copy-to" value=""/>
    </div>
    <div class="">
       <input type="text" class="copy-to" value=""/>
    </div>
    <div class="">
      <input type="text" class="copy-to" value=""/>
    </div> 
    <div class="">
      <div class="">Please type anything in the first input box</div>
    </div>
  </form>

jQuery

$(document).ready(function(){
    $('.track-me').change(function (){
        $('.copy-to').val($(this).val())
    });
});

I made comments in the above jQuery code so you can understand. Also, I have made a fiddle so you can play and have a look. In this fiddle, I am using Bootstrap4 just for the purpose of styling, you don't have to worry about that.

Link to fiddle

https://jsfiddle.net/anjanasilva/r21u4fmh/21/

I hope this helps. Feel free to ask me any questions if you have. Cheers.

Answer 4

MutationObserver should work here..

const formValuePrice = document.querySelector( '.form-price-value' );
const inputText = document.querySelector( 'input[type="text"]' );

// timer to change values
window.setInterval( () => {
    formValuePrice.textContent = Math.round( Math.random() * 100 );
}, 1000 );

// mutation observer
const observer = new MutationObserver( ( mutationsList ) => {
    inputText.value = formValuePrice.textContent;
} );

observer.observe( formValuePrice, { childList: true } );

https://codepen.io/anon/pen/LgWXrz?editors=1111