-1

I have a donation form and I've have created an editable donation total on my site. I need to copy the value from this box to the plugin donation total so when the form is submitted the plugin's value is used. I've used javascript to copy over the value and it is working: 

var p = '£' + price;
$('#ffm-total').val(p);
var hiddenTotal = document.getElementById("give-final-total-wrap").getElementsByClassName("give-final-total-amount")[0];
hiddenTotal.innerHTML = p;

However, I also need the price to be editable. I've got the field: 

<label class="give-label give-fl-label" for="ffm-total">Total</label>
<input class="textfield give-fl-input fill_inited filled" id="ffm-total" type="text" data-required="no" data-type="text" name="total" placeholder="Total" value="" data-value="£5199">
<p id="give-final-total-wrap" class="form-wrap ">
            <span class="give-donation-total-label">
        Donation Total:     </span>
    <span class="give-final-total-amount" data-total="18">
        £18     </span>
        </p>

and I tried to use: 

var finalTotal = document.getElementById("#ffm-total");  
var hiddenTotal = document.getElementById("give-final-total-wrap").getElementsByClassName("give-final-total-amount")[0];
hiddenTotal.innerHTML = finalTotal;

But it does not work. Although the value is editable it does not save the value in the rather in the 'data-value' so finalTotal.value does give any value. How do I get the value and use it to populate the hiddenTotal? You can see the issue here: site with issue

LTech
  • 1,677
  • 5
  • 29
  • 48
  • 2
    try this `var finalTotal = document.getElementById("ffm-total"); ` – Naveed Ramzan Feb 18 '19 at 11:40
  • This may not be the issue, but as Naveed Ramzan noted you should not include # when using `getElementById()`, so, rather than `document.getElementById("#ffm-total");`, it should be `document.getElementById("ffm-total");`. – Newbyte Feb 18 '19 at 11:42
  • right, sorry, it was a typo. It isn't working like that either – LTech Feb 18 '19 at 11:43

1 Answers1

1

Inside getElementById you don't need to use # with the id and the value is set using .value not .innerHTML

var finalTotal = document.getElementById("ffm-total");  
var hiddenTotal = document.getElementById("give-final-total-wrap");
finalTotal.onkeyup=function(){
hiddenTotal.value = finalTotal.value;
}
<label class="give-label give-fl-label" for="ffm-total">Total</label>
<input class="textfield give-fl-input fill_inited filled" id="ffm-total" type="text" data-required="no" data-type="text" name="total" placeholder="Total" value="" data-value="£5199">
<input id='give-final-total-wrap'>
ellipsis
  • 12,049
  • 2
  • 17
  • 33