How to add a JS variable into a hidden form value

since you are using JQuery why not try like this

var xyz = $('.total-box > span').text();
console.log('xyz', xyz);
$('#xyz').val(xyz);

@VAJID - I tried doing as you said, but it's still not adding the value to the field. You can test this in the codepen. https://codepen.io/daugaard47/pen/maxrBo?editors=1011

@daugaard47 as you have multiple class with name total-box you have to specify jquery which index to look at for price or it will check for last occurence

$('.total-box > span').eq(0).text();

@VAJID - Man, I'm not understanding what I'm doing wrong. This is what I'm using now.

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

Then..
var xyz = $('.total-box > span').eq(0).text();
console.log(xyz);
$('#xyz').val(xyz);

Still not getting anything in the hidden field value.?.?

One thing that trips people up is the difference between using classnames to target something vs an id.

ID's have to be unique per page, so using $('#id') will return a single item.

That's why there is no getElementsById() javascript command (plural). It's implied you will only receive one element. Contrast that with getElementsByClassname(), where it's plural and implies you will receive an array or some sort of collection instead of a single element.

Classnames are can be reused as many times on a page as needed, however, targeting a classname will return an array instead of a single item. That means you need to iterate the array, even if there's just a single item returned.

If you only have one of something on a page, give it an id and target by id instead of classname.

An example:

<h3 class="total-box" style="display: block;">
  Your total cost is $<span></span>
</h3>

Why not just give that span an id? Then you can target it specifically by id ($('#id')) instead of accessing the 0 index of an array, like you are with$('.total-box > span').eq(0).text();;. You're making things a lot more complicated than they need to be here.

@daugaard47 @cronix totally agreed

//totalDonation.text((checkbox.checked ? f(goal) + f(charge) : f(goal)).toFixed(2));
$('#xyz').val((checkbox.checked ? f(goal) + f(charge) : f(goal)).toFixed(2));

@cronix Since I need to use the value of the total amount multiple places wouldn't I use a class then? This should stay a class correct?

<h3 class="total-box" style="display: block;">
  Your total cost is $<span></span>
</h3>

    var totalBox = document.querySelector('.total-box');
    var totalDonation = $('.total-box > span');

@vajid why was this changed. Doing so breaks the rest of the code.

$('#xyz').val((checkbox.checked ? f(goal) + f(charge) : f(goal)).toFixed(2));

I understand I'm making this extremely more difficult than it needs to be, but I have fought my way up until this point, just need a little help so I can move on. In my codepen where I have START listed, should I move that down the page or leave it as is?

@daugaard47 with ID you can use it number of times too, it just makes element selection more readable and easy to figure whats happening.

Have tested it on your codepen it was working E.g 120 without gift and with gift checkbox checked 123.89

Can I see.. HAHA Okay let me try and fumble around with this and try and get it working.

So if I change to this on the lower half of the code...

$('#xyz').val((checkbox.checked ? f(goal) + f(charge) : f(goal)).toFixed(2));

I then need to change this on the top half...

var totalDonation = $('.total-box > span');
to
var $xyz = $(#xyz');

Does that sound correct?

@vajid I'm at a lost here. If you could share anymore help I would greatly appreciate it.

@daugaard47

place this code inside update function

//inside update at the end
totalDonation.text((checkbox.checked ? f(goal) + f(charge) : f(goal)).toFixed(2));
var xyz = $('#total-box').text();
$("#xyz").val(xyz);
var hiddeninput = $("#xyz").val();

Ah... I was adding it at the top of my script. Guess it totally makes sense to use it in my update function. Thanks so much. All is working now, and I have a better understanding on how this works. Appreciate your time! -Chris