changing the value of a hs form without jquery

[SMetcalf]

I'm been trying to figure this out for hours and I've completely run out of ideas. 

I need to change the value of a form with javascript. I'm not using jquery anywhere on the site. When I set the value with javascript, it is visible until I click any other field in the form. The official documentation says to change the value like this:

$('input[name="firstname"]').val('Brian').change(); 

and makes clear that you have to call the .change(). Since I'm not using jquery, I immediately did a google search to see what jquery is doing and just mimic that with vanilla javascript. 

I have a variable 'formFieldEl' which is the input element
I have a variable 'value' which represents the value
my code:

formFieldEl.value = value
formFieldEl.onchange = ()=> formFieldEl.value = value

This does not solve the problem. When I click on any other field, the input value still clears. I know the onchange function is running because if I go back to the input I'm trying to change with javascript and type a new value, when it loses focus the function is called (I tested with a console log).

I get that the form is using react, and react is not recognizing the field value changing with js. I feel like I'm going to need to engineer some way to get to the react component and update it there, but that seems like huge overkill / not sure if even possible. 

I can't be the first one to run into this problem. 

[sharonlicari]

Thank you for sharing @SMetcalf 

[SMetcalf · Accepted solution]

Upon posting this, I ran into another question posted on here and the very last response provided the following solution which works: 

input.value = value;

input.dispatchEvent(new Event('input', { bubbles: true }));

god bless this forum. 

[Teun]

This solved a very big issue for me! Thank you for sharing! I had to include jQuery to manipulate forms, but this solves the issue! 

@dennisedson is this something that could be added to the docs?

[dtavenues]

Hi @Teun Thanks so much for this and excuse the Noob question since I'm not super familiar with syntehtic events. In this example:

input.value = value;
input.dispatchEvent(new Event('input', { bubbles: true }));

Is "input" the selected DOM element of the form field and value is the value you would like to set it to?

So if I wanted to set the first name property the full example would look something like:

input = document.querySelectorAll('[name="firstname"]');

input.value = "Max";

e = new Event('input',{bubbles:true});

input.dispatchEvent(e);

Also for my own education why do we need to set the event to bubble up? Thanks again!

@sharonlicari This should definitely be added to the Docs if fully supprted. Jquery is not really a given in most modern web projects.

[Teun]

Hi @dtavenues ,

Yes, this is how it works, just use document.querySelector instead of document.querySelectorAll to get your input.

Here is how it works for each input type:

const input = document.querySelector('input[name="example"]')
if (!input) return;

if (input.type === 'checkbox' || input.type === 'radio') {
  input.click();
} else {
  input.value = 'some value';
  input.dispatchEvent(new Event('input', { bubbles: true }));
}

Friendly reminder, if you set any input as hidden in your form editor, it will get the 'hidden' type.  So if you have hidden 'multiple checkboxes', you need to do something like this:

const input = document.querySelector('[name="checkboxes"]');

if (!input) return;

if (input.type === 'hidden') {
  // Use an if statement to see if you need to check or uncheck the checkbox
  if (checked) {
    if (input.value != '') {
      input.value = input.value + ';value-for-second-checkbox';
    } else {
      input.value = 'value-for-first-checkbox';
    }
  } else {
    // Remove the value if the user unchecked the checkbox
    input.value = input.value.replace(`;value-for-second-checkbox`, '');
  }
  input.dispatchEvent(new Event('input', { bubbles: true }));
}

[dtavenues]

@Teun Amazing. thanks again

[Teun]

For anyone having issues with doing this for checkboxes using jQuery, use input.click() instead of input.checked = true;