Progressive form: How to handle input value change by external JS ?

[bmabille]

Hi !

I made a JS script in order to replace a city input by a select, with an autocomplete with zip input value. It's working well on simple form. 

But in progressive form i have some issues.

The value is correctly set in the input, but, some how, the value is reset when i submit the form (or, if i display the original city input, when i click on the input). I think Hubspot store the value in JS var, and didn't get notice of the input value change.

See below the render :

And then the script in the select change :

           select.on("change",
                function() {
                    cityInput.attr('value', this.value);
                    cityInput.val(this.value);
                    cityInput.trigger('change');
                    cityInput[0].defaultValue = this.value;
                    cityInput[0].dispatchEvent(event);
                }
            );

Did you have an idea of how to get it work ?

[bmabille]

Hi @MrJustinGivens , yes, it in this specific form that my JS code didn't work.

[MrJustinGivens]

Yeah, I've also heard others say the same things. I think the forms team is currently working on making the new form js extendable. 

[MrJustinGivens]

@bmabille is this form using the New Form Editor with Steps?