Writing to form field on submit using jquery

[rsthrive]

Hi All,

I've been trying to write to a field on a form on submit using jquery but I must be doing something wrong as it does not appear to be working.

I've read this: https://developers.hubspot.com/manipulating-forms-with-jquery

and the code I have is below. Please note that I've targetted the field using the name attribute and removed the id and portal id:

<div class="module-quote-contact-details-wrapper">
  <div class="module-quote-contact-details-inner-wrapper">
    <!--[if lte IE 8]>
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
    <![endif]-->
    <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
    <script>
      hbspt.forms.create({
      portalId: "xxx",
      formId: "xxx",
      onFormSubmitted: function($form) {
        /* Needed to show custom message */
        $('.next-button').click()
        //console.log($form)
        /* hs-quote_details */
        $('input[name="quote_details"]').val("test123").change();        
        $('textarea[name="quote_details"]').val("test").change();        
      },
      onFormReady: function($form, ctx) {
        $('input[name="quote_details"]').val("test123").change();        
        $('textarea[name="quote_details"]').val("test").change();        
      }
    });
    </script>
  </div>
</div>  

Any help would be really appreciated.

Many thanks

[Kevin-C]

Hey @rsthrive 

Correct me if I'm wrong but I interpret this as:

Given the form is rendered in the DOM,

When the user submits the form,

Then update the field's value and store the value in the DB

What is the expected functionality? Updated properties in the DB, UI updated, etc.

How are you test this?

[rsthrive]

Hi Kevin,

Many thanks for your reply - yes that's right. So what I'm looking for is a confirmation email that says "test123" in the hidden field with the name "quote_details" but at the moment it's not being written. I'm testing it by filling out the form, submitting it and then checking the email to see if the field has "test123" in it.

Thanks again

[Kevin-C]

Awesome!

My first steps would be to ensure that your custom fields are created, named, and referenced/targeted correctly. This seems obvious but its a small thing that can be over looked if you've got a tight deadline. If the field is referenced/targeted incorrectly it will not be added to the DB on submission.

I've got little experience working with forms in this way, but it looks like your onFormSubmitted and the onFormReady are doing the same thing in terms of updating the data value. I don't think this is an issue, but rather a redundancy that we probaly don't need muddying the waters. Especially if this is a hidden field that the user cannot change.

[rsthrive]

Hi Kevin,

Many thanks for your reply. Definitely - fair point, I've checked it and it's using the right name. I was trying a few different options to see what stuck which is why they are both 'onFormSubmitted' and 'onFormReady'. 

Do you have an example of a form that you've made in the past? I could use that as a basis. It's really strange, seems such a simple thing but it's just not writing the value to the field - bizarre.