Getting form field on form submit

[solsen]

Hi all,

I'm new to Javascript but want to do the following: on form submit, if a certain field in my form is "No", redirect them to a Stripe checkout page. I have it working with onFormSubmit, but I don't know how to get the field so that I can show the checkout page conditionally based on the value of the form field. Here is what I have so far:

<script>
	window.addEventListener('message', event => {
	   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
	       callStripe('my_sku');
	   }
	});
</script>

From here I would just want to add an if statement along the lines of "if(formFieldValue === 'No') { callStripe(); }. How can I grab the value of a form field for the form that has just been submitted?

Thanks!

[WendyGoh]

Hey @solsen,

When looking to grab the value of a form field from the form, you can use the following code:

$('input[value="{{formFieldValue}}"]')

You can learn more about this on our documentation - Manipulating forms with jQuery. 

[solsen]

Hi @WendyGoh - thanks for the quick response. I think I am close, but could you let me know what I'm doing wrong when testing for the field's value here?

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

[WendyGoh · Accepted solution]

Hey @solsen,

Ahh, I believe we would need to include .val()

<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>

I have tested this out on my end using the following code:

 <script>
   hbspt.forms.create({
     css: '',
     portalId: '{{myPortalId}}',
     formId: '{{myFormId}}',
     onFormSubmit: function($form) {
         if(   $('input[name="stringtest"]').val() === 'test' ) {
           alert('hello');
            $('input[name="stringtest"]').val("kitkat2").change();
         }
     }
   });
 </script>

This works just fine. Could you try and see if this works for you?

[solsen]

Hi @WendyGoh - thanks for the follow-up! Strangely enough, I was not able to get the values for any of my form fields that way - they all simply returned "undefined". I found a workaround using the .serialize() function:

hbspt.forms.create({
	portalId: "my_portal_id",
	formId: "my_form_id",
	onFormSubmit: function($form){
		var formData = $form.serialize();
		var fieldName = "my_field_name";
		var fieldPosition = formData.search(fieldName);

		if(formData[fieldPosition + fieldName.length+1] === 'N'){ //for "No"
			callStripe();
		}
		else{
			window.open("other_page");
		}
	}
});

Thanks for your help!