Rewriting JavaScript to React doesn't accept jQuery

Question

I am trying to re-write my old JavaScript code and make it work for React.

The main idea behind this is just including some external data to my 3rd party form.

This is my old JS:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
        portalId: 'myID',
        formId: 'myID',
        onFormSubmit: function() {
        jQuery('input[name="TICKET.content"]').val(JSON.stringify(window.cart,undefined, 2)).change();  
    }
});
</script>

And trying to make it work in React:

React.useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://js.hsforms.net/forms/v2.js';
    document.body.appendChild(script);

script.addEventListener('load', () => {
    if (window.hbspt) {
        window.hbspt.forms.create({
            portalId: 'myID',
            formId: 'myID',
            onFormSubmit: function() {
                jQuery('input[name="TICKET.content"]').val(window.cart).change();
              },
            target: '#hubspotForm',
        });
    }
});
});

   <div id="hubspotForm"></div>

Trying with react-hubspot-form

    onSubmit={function (e) {
    e.preventDefault(); 
   const ticket = document.querySelector('input[name="TICKET.content"]');
   const nativeInputValueSetter = Object.getOwnPropertyDescriptor(                                         window.HTMLInputElement.prototype,'value').set;
     nativeInputValueSetter.call(ticket, cart);
      const evt = new Event('change', {bubbles: true,});
      ticket.dispatchEvent(evt);}}

But with code above I am getting error of jQuery is not being defined. Is there better way how to re-write or am I able to define jQuery somehow?

mplungjan · Answer 1 · 2021-07-12T11:39:52.680

0

Why use jQuery?

You can use react setters What is the best way to trigger onchange event in react js

Try

onFormSubmit: function(e) {
  e.preventDefault(); // I assume you do not want to submit
  const ticket = document.querySelector('input[name="TICKET.content"]');
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
  nativeInputValueSetter.call(ticket , window.cart);
  const evt = new Event('change', { bubbles: true});
  ticket.dispatchEvent(evt);
}

edited Jul 12 '21 at 11:39

answered Jul 12 '21 at 11:34

mplungjan

169,008
28
173
236

Thank you @mplungjan, how can I add this to onFormSubmit ? – Jul 12 '21 at 11:36
try replacing `jQuery('input[name="TICKET.content"]').val(window.cart).change();` you have now with my code – mplungjan Jul 12 '21 at 11:38
See update - I assume you need to not submit the form – mplungjan Jul 12 '21 at 11:40
Thank you! Unfortunately after submitting the form I am having error in my console `The onFormSubmit function in hbspt.forms.create requires jQuery. It was not run.`, so it won't work. – Jul 12 '21 at 11:43
Ah, then don't use hsforms – mplungjan Jul 12 '21 at 11:53
I unfortunately have to. I do not have any backend, so using 3rd parties. But thanks for try anyway!! – Jul 12 '21 at 11:54
Then use a React version: https://www.google.com/search?q=hubspot+form+react – mplungjan Jul 12 '21 at 11:54
I also tried that already, but it gives `TypeError: e.preventDefault is not a function`, so seems like the HubSpot form does not like me at all. – Jul 12 '21 at 12:01
I updated my post with react-hubspot-form attempt. – Jul 12 '21 at 12:04
I actually misread your comment - I do need to submit the form, perhaps that's the issue. – Jul 12 '21 at 16:00
So remove `e.preventDefault();` but since we do not know what the change event does, I cannot tell if that is enough – mplungjan Jul 12 '21 at 16:25

Rewriting JavaScript to React doesn't accept jQuery

1 Answers1