Hidden input requires text

Question

I had someone help me out and get this code.

<input type="hidden" id="charge_total" value="charge_total">

And this JavaScript

<script>
document.getElementById("charge_total").value = document.getElementById("system_cost").innerHTML;

My problem is that it the host payment system I am using requires the hidden input to have a name.

So the hidden input must be like this.

<input type="hidden" id="charge_total" name="charge_total" value="charge_total">

My problem is using the code is it doesn't input any text into the field and I am left with a blank total in the check out page. I need this span ID to output whatever number it has into the hidden value input in this line of code.

<p>Total: <span id="system_cost">&nbsp;</span></p>

<input type="hidden" id="charge_total" name="charge_total" value="charge_total">

Anyone know what I did wrong?

---

Here is how I put it in the header.

<script>
$(function(){ //on document ready attach handlers
$('form').on('submit', function(e){
    e.preventDefault(); // stop the form submitting and do work
    $('#charge_total').val(parseFloat($('#system_cost').text()));
    $(this).submit(); //now submit the form, calculations are done
});
});
</script>

And these are the other two lines.

<input type="hidden" name="charge_total" value="charge_total">

<p>Total: <span id="system_cost">&nbsp;</span></p>

The span shows on the page like it is suppose to and populates correctly. It's only the hidden value that just shows charge_total.

Answer 1

$(function(){ //on document ready attach handlers
    $('form').on('submit', function(e){
        e.preventDefault(); // stop the form submitting and do work
        $('#charge_total').val(parseFloat($('#system_cost').text()));
        this.submit; //now submit the form, calculations are done
    });
});