# Form - Add "Total" which changes based on selected form options

**URL:** <https://community.hubspot.com/t/form-add-total-which-changes-based-on-selected-form-options/120894>\
**Category:** CMS Development\
**Tags:** javascript, forms\
**Created:** [November 19, 2024, 9:12pm UTC](https://community.hubspot.com/t/form-add-total-which-changes-based-on-selected-form-options/120894 "2024-11-19T21:12:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Senor](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@Senor](https://community.hubspot.com/u/Senor)\
**Post date:** [November 19, 2024, 9:12pm UTC](https://community.hubspot.com/t/form-add-total-which-changes-based-on-selected-form-options/120894/1 "2024-11-19T21:12:47Z")

</div>

Hi,

I’m a developer but new to using Hubspot.

I wanted to use JS to manipulate the HS embedded form after it loads, To add a data-attribute=“PRICE” to each option in a select dropdown on a form. When the option is selected then I update a #subtotal text value with an updated price.

Seems like my JS won’t affect the embedded HS form or even listen to the select dropdown change. I then tried putting my JS in the onFormReady callback and still not working.

Any feedback is appreciated,

thanks!

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [November 20, 2024, 12:57pm UTC](https://community.hubspot.com/t/form-add-total-which-changes-based-on-selected-form-options/120894/2 "2024-11-20T12:57:05Z")

</div>

Hi @Senor and welcome to the Community, we are delighted to have you here!  
Thanks for reaching out to us!  
Could you please share the code you are using and the URL of the webpage where the form is, please?  
The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.

I’d love to put you in touch with some of our Top Experts:  
Hi [@Syeda\_Fatima](https://community.hubspot.com/t5/user/viewprofilepage/user-id/114957), @alyssamwilie and @miljkovicmisa do you have tips to help @Senor, please?  
Thanks so much and have a nice day!  
Best,  
Bérangère

---

<div class="post-metadata">

**Author:** ![Senor](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@Senor](https://community.hubspot.com/u/Senor)\
**Post date:** [November 20, 2024, 7:29pm UTC](https://community.hubspot.com/t/form-add-total-which-changes-based-on-selected-form-options/120894/3 "2024-11-20T19:29:59Z")

</div>

Hi [@BérangèreL](https://community.hubspot.com/t5/user/viewprofilepage/user-id/230185) @GRajput !

Heres the URL: [https://tune-website.webflow.io/testing](https://tune-website.webflow.io/testing)

Heres the code I’m using:

\<script charset=“utf-8” type=“text/javascript” src=“[//js.hsforms.net/forms/embed/v2.js](https://js.hsforms.net/forms/embed/v2.js)”\>\</script\>

\<script\>

hbspt.forms.create({

region: “na1”,

portalId: “removed-id”,

formId: “removed-id”,

onFormReady: function($form) {

document.addEventListener(‘DOMContentLoaded’, function() {

const selectElement = document.getElementById(‘truck\_make\_\_test\_-e771fcd3-d729-4d6e-8047-84c6f5ed1d1e’);

selectElement.addEventListener(‘change’, function(event) {

console.log(event.target.value);

console.log(“hello world”);

});

});

}

});

\</script\>

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [January 21, 2025, 3:11pm UTC](https://community.hubspot.com/t/form-add-total-which-changes-based-on-selected-form-options/120894/4 "2025-01-21T15:11:44Z")

</div>

Hi @Senor, thank you for sharing the code with the Community!  
I’d like to share these threads that might point you in the right direction:  
- [How do add new data in option select property use to api?](https://community.hubspot.com/t5/APIs-Integrations/How-do-add-new-data-in-option-select-property-use-to-api/m-p/268597)  
- [Custom dropdown-element for forms prepopulated with data](https://community.hubspot.com/t5/APIs-Integrations/Custom-dropdown-element-for-forms-prepopulated-with-data/m-p/969140)  
Also, I’d like to invite our Top Experts and Community Members to join this conversation: Hi [@Mike\_Eastwood](https://community.hubspot.com/t5/user/viewprofilepage/user-id/9259), @GRajput, @byersoy, @Roja, @DiogoMC, @Falke, @Kevin-C, @louischausse and @jonchim do you have suggestions to help @Senor, please?  
Have a lovely day and thanks so much!  
Best,  
Bérangère

---

<div class="post-metadata">

**Author:** ![GRajput](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grajput/32/102020_2.png) [@GRajput](https://community.hubspot.com/u/GRajput)\
**Post date:** [November 20, 2024, 1:11pm UTC](https://community.hubspot.com/t/form-add-total-which-changes-based-on-selected-form-options/120894/5 "2024-11-20T13:11:25Z")

</div>

Hi @Senor

Can you please share your code snippet where you are using the call back and when you do please make sure to remove the values of portal ID and form ID.

Thanks!