# Getting field value on form submit

**URL:** <https://community.hubspot.com/t/getting-field-value-on-form-submit/19512>\
**Category:** CMS Development\
**Tags:** javascript, forms\
**Created:** [March 18, 2020, 6:54pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512 "2020-03-18T18:54:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gabrielnoal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gabrielnoal/32/77060_2.png) [@gabrielnoal](https://community.hubspot.com/u/gabrielnoal)\
**Post date:** [March 18, 2020, 6:54pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/1 "2020-03-18T18:54:52Z")

</div>

Hi everyone,

I’m trying to do a dynamic redirect on base one of my form fields.  
I already look for a lot of ways of do that and I find out it would be posible if I add a event listener when form submit to get my field value and redirect my user to one page or another.

I find this link ([https://community.hubspot.com/t5/APIs-Integrations/Getting-form-field-on-form-submit/m-p/316974](https://community.hubspot.com/t5/APIs-Integrations/Getting-form-field-on-form-submit/m-p/316974) and many others that people sugest to use:

```auto
<script>
	hbspt.forms.create({
		portalId: "my_portal_id",
		formId: "my_form_id",
		onFormSubmit: function($form){
			if($('input[value="my_field_name"]').val() === 'No'){
				callStripe();
			}
		}
	});
</script>

```

But it look’s like this is for add embeded code to my web site and this is not what I want.

I already tried to code something like that in the form module.js and it doesn’t work.

```auto
const logSubmit = (event) => {
 console.log(event)
 event.preventDefault();
}

window.addEventListener('submit', logSubmit);

```

It look likes this runs before the form is rendered.

I need something that I can add at my module.html or module.js that get the form values and redirect the user to the correct page after submits.

---

<div class="post-metadata">

**Author:** ![sharonlicari](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sharonlicari/32/101479_2.png) [@sharonlicari](https://community.hubspot.com/u/sharonlicari)\
**Post date:** [March 23, 2020, 10:55am UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/2 "2020-03-23T10:55:27Z")

</div>

Hey @gabrielnoal

Thank you for sharing this information.

I’ll tag a few experts that could share their thoughts with you.

Hey @alyssamwilie@Kevin-C @prosa could you please share your expertise with @gabrielnoal ?

Thank you

Sharon

---

<div class="post-metadata">

**Author:** ![prosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/prosa/32/4387_2.png) [@prosa](https://community.hubspot.com/u/prosa)\
**Post date:** [March 23, 2020, 8:51pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/3 "2020-03-23T20:51:38Z")

</div>

hi there can you share the code you are trying to run? I’ve used the provided example and I was able to create a redirection after form submission. But make sure in your form configuration you have only a message and not a redirect. I would recommend showing a message and adding a spinner with a timeout to trigger the redirection.

---

<div class="post-metadata">

**Author:** ![gabrielnoal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gabrielnoal/32/77060_2.png) [@gabrielnoal](https://community.hubspot.com/u/gabrielnoal)\
**Post date:** [March 25, 2020, 3:55pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/4 "2020-03-25T15:55:20Z")

</div>

Hi @prosa ,  
I already tried a lot of ways and any of those worked for me.

I’m used to work with ReactJs and I tried to add a event listener on form submit and add a log to see if it works, but it never logs. Also I tried to get the element by name, id, tag but all of those returns a empty array. It looks like the code runs before the form is rendered.  
This is my last try.

My module.html

```auto
{% if module.title is truthy %}
	{% set no_title = False %}
{% else %} 
	{% set no_title = True %}
{% endif %}

{% if module.form.form_id %}
	{% form
 form_key='{{ name }}',
 form_to_use='{{ module.form.form_id }}',
 title='{{ module.title }}',
 no_title='{{ no_title }}',
 follow_up_type_simple='{{ module.follow_up_type_simple }}',
 simple_email_for_live_id='{{ module.simple_email_for_live_id }}',
 follow_up_type_automation='{{ module.follow_up_type_automation }}',
 form_follow_ups_workflow_id='{{ module.form_follow_ups_workflow_id }}',
 response_response_type='{{ module.form.response_type }}',
 response_redirect_id='{{ module.form.redirect_id }}',
 response_redirect_url='{{ module.form.redirect_url }}',
 response_message='{{ module.form.message }}',
 notifications_are_overridden='{{ module.notifications_are_overridden }}',
 notifications_override_email_addresses='{{ module.notifications_override_email_addresses }}'
 gotowebinar_webinar_key='{{ module.form.gotowebinar_webinar_key }}'
 sfdc_campaign='{{ module.sfdc_campaign }}'
	%}
{% else %}
	{% form
 title='{{ module.title }}',
 no_title='{{ no_title }}',
 %}
{% endif %}

```

My mudule.js

```auto
const logSubmit = (event) => {
 console.log(event)
 console.log("REDIRECT")
}

window.addEventListener('submit', logSubmit)

```

---

<div class="post-metadata">

**Author:** ![BenSBM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bensbm/32/75413_2.png) [@BenSBM](https://community.hubspot.com/u/BenSBM)\
**Post date:** [March 25, 2020, 7:40pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/5 "2020-03-25T19:40:04Z")

</div>

Try adding a listener for ‘message’ and check if it is the HubSpot onFormSubmit event:

```auto
window.addEventListener('message', function (event) {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
 console.log('onFormSubmit');
 }
});

```

---

<div class="post-metadata">

**Author:** ![gabrielnoal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gabrielnoal/32/77060_2.png) [@gabrielnoal](https://community.hubspot.com/u/gabrielnoal)\
**Post date:** [March 31, 2020, 9:15pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/6 "2020-03-31T21:15:56Z")

</div>

Hi @BenSBM ,  
Thank you for your answer and sorry for the delay to answer.  
But how can I check the event using Hubspot Landing Page?  
Because I could check the event of onFormSubmit if i took the embeded code and paste on my website but i’m using hubspot landing pages.

---

<div class="post-metadata">

**Author:** ![gabrielnoal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gabrielnoal/32/77060_2.png) [@gabrielnoal](https://community.hubspot.com/u/gabrielnoal)\
**Post date:** [April 22, 2020, 1:34pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/7 "2020-04-22T13:34:11Z")

</div>

I keep stucked at the same place, could someone help me, please?

---

<div class="post-metadata">

**Author:** ![BenSBM](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bensbm/32/75413_2.png) [@BenSBM](https://community.hubspot.com/u/BenSBM)\
**Post date:** [April 22, 2020, 2:23pm UTC](https://community.hubspot.com/t/getting-field-value-on-form-submit/19512/8 "2020-04-22T14:23:24Z")

</div>

Hi @gabrielnoal

That javascript snippet should work on any site, whether it is a HubSpot website or landing page, or on a third party service. It adds a listener for when a HubSpot form is submitted and is independent of being on a landing page.

I set up a quick test in my portal, and added a form module and made sure it was set to “Display an inline thank you message”. I then created a test page in HubSpot, and upon submit the eventListener previously posted printed a message to the console. The same worked in a custom module with a form field.

```auto
window.addEventListener('message', function (event) {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
 /* print to the console on submit, or add in custom redirect in here */
 console.log('onFormSubmit');
 }
});

```