I have a Form setup, where I have custom javascript in place to hide required form elements, and populate them with jquery. This used to work, but now when the form is submitted, its reporting back as "Field is required" since the user themselves didn't type in the form field. 

This had worked previously, but it seems like possibly Squarespace is using ReactJS that is preventing the value override from being recognized by the validating backend? Any help would be greatly appreciated.

Only thought currently is to do the required field validation in custom js as well and mark the fields in the form as not required, thus bypassing whatever check is happening

I'm also facing the same issue and have spent two days trying to find a solution to trigger the inputs after populating them with jQuery. I attempted to update the fields from url using the window.history method, but it didn't work, as the page needs to be loaded directly with the values in the URL. The challenge lies in the fact that the form state only seems to register the value when it is typed manually. All values updated via jQuery are not registred.

This si a big Issue. 

P.S: My client made an update recently, and I'm not entirely sure what changed, but before that, I had no issues with the forms. They were functioning correctly.

After further triaging, I concur with "form state only seems to register the value when it is typed manually". Even if I remove the required validation, the fields I want to populate with jQuery are being ignored in the POST submission request. 

I also tried to trigger change, focus, keydown events but nothing seemed to pickup the fact that the value had changed. Just local changes to the DOM it appears.

I contacted customer support, but they basically said that platform updates are not guaranteed to continue working with custom code and recommended continuing the discussion here.

Awesome, thank you so much for the reply. Very interesting article, and yes that did seem to work for me! Obviously needed to adjust the type of the HTML element (depending on what form item you want to populated) but that worked for me. Thank you again!

Another thing to note in case others run into the same issue. It didn't seem to work with "Hidden" form block items (the input value was changing, but not being sent in the submission POST request payload), but I worked around that by using a text block item and then just manually hide it with jquery on page load.

14 hours ago, creedon said:

SS has indeed updated the form block and so custom code has broken.

SS is using React for their forms now.

I'm am not familiar with React but I found this possible rough gem.

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

Source

Basically React is swallowing up programmatic changes to inputs and this code may help with that.

I did a quick test and it seems to work but I make no promises if it will work for you or continue to work.

Let us know how it goes.

@sorca_marian

Thank you so much! It works!

I also found a little simpler way

 

var input = document.querySelector("form input");
Object.defineProperty(input, "value", {
  value: "programmatically added value",
  writable: true
});

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

Squarespace seems to be using new form functionality now, and any form values that are set with Javascript e.g. 

document.querySelector('.text:first-child input').value = myvalue

are now being reset on submit.

Is there any way to set the form values with javascript now? 

Please see the following.

Let us know how it goes.

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

^ this one worked for me, thanks!

For textarea, use

 window.HTMLTextAreaElement.prototype, 

This may work now (thank you for pointing it out!), but cries to break anytime something changes in React or the form again. I’d rather have Squarespace to provide a way of submitting custom form data.

On 5/16/2023 at 4:37 PM, silllli said:

This may work now (thank you for pointing it out!), but cries to break anytime something changes in React or the form again. I’d rather have Squarespace to provide a way of submitting custom form data.

I agree.

I am waiting for a response from Squarespace technical team about this and if I get a official way of doing this I will post it here.

When it comes to using the following code, would anyone be kind enough to share a link to a website where this is actually working? I'm not an advanced coder and I'm just struggling to see where I specify the unique identity of the text box I am trying to change. Many thanks

On 5/9/2023 at 4:07 AM, creedon said:

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

@howharvey I tried it through the Developer Console in Chrome and it worked

On 6/22/2023 at 8:56 PM, howharvey said:

When it comes to using the following code, would anyone be kind enough to share a link to a website where this is actually working? I'm not an advanced coder and I'm just struggling to see where I specify the unique identity of the text box I am trying to change. Many thanks

var input = document.querySelector("form input");

you need to select the input first, you can also select by name e.g. input[name="YOURNAME"]

Then pass in the function like so 

changeValue(input, "Set value here");

Full code (add to footer or wrap in domcontentloaded):

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

var input = document.querySelector("form input");
changeValue(input, "Set value here");

@nick_sh Thank you so much, that was so helpful, defining the variable after the function threw me off but you've cleared it up and I've got it working now. Thanks.

@sorca_marian I had no idea you could use a console like that, thank you for sharing.

Has anyone had any luck hiding and/or making read-only specific text fields/areas of the form block? It used to work with

document.getElementById('textarea').readOnly = "true" 

or 

document.getElementById('textarea').style.display = "none";

But now it's not working. I'm able to hide the entire Form Block using the style.display but it doesn't seem to be working on specific elements of the form. Any help would be much appreciated.

Thanks

For anyone else struggling with this, I found I could hide using CSS instead. An example is below

#textarea-XXXXXXXX-field
{display: none;
  pointer-events: none;
  }

This could hide the text area and ensure that no one could enter text in it.

None of the both changeValue() versions described above seem to work anymore.
We tried both. Setting one field programmatically only keeps the changed value until the next field value is set. Setting multiple fields programmatically does not works. So the result remains unpredictable.

So - are there any other ways to transform or calculate field input and send these values?

So the Squarespace Formblock is useless in many cases or requires 3rd Party tools. 
 

On 5/9/2023 at 5:07 AM, creedon said:

SS has indeed updated the form block and so custom code has broken.

SS is using React for their forms now.

I'm am not familiar with React but I found this possible rough gem.

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

Source

Basically React is swallowing up programmatic changes to inputs and this code may help with that.

I did a quick test and it seems to work but I make no promises if it will work for you or continue to work.

Let us know how it goes.

@sorca_marian

As soon as you change any other field in a form, the value is lost again. So this method is not working, if you have multiple calculated fields.

On 8/9/2023 at 11:49 PM, soft-works said:

None of the both changeValue() versions described above seem to work anymore.
We tried both. Setting one field programmatically only keeps the changed value until the next field value is set. Setting multiple fields programmatically does not works. So the result remains unpredictable.

I am unable to confirm your report.

I just set up a test form with two text fields.

I defined the original changeValue function on the DevTools console.

In elements I selected each input element and ran changeValue ( $0, 'text'  ); both fields filled in and I Submitted the form.

I received an email with the values of both fields.

I repeated the test with one field filled programmatically and one manually with the same end results.

This is not my code and so I can't vouch for it as I originally stated.

Without repeatable steps there is no way we can help.

Some things to be aware of. This code is intended to work with the new international version of forms. If you have them turned off via Circle setting then you may have issues. If international is turned on be aware that a form is loaded twice. First the old form, then the new form. The only reliable way to detect that the new form is on the DOM is to use MutationObserver. If you are not up on MO's then the following may be of use.

I tried inputting the  code; however, the resetting of the one field continues. Is that code supposed to be part of the script section or its own section entirely?

On 6/23/2023 at 12:56 AM, howharvey said:

When it comes to using the following code, would anyone be kind enough to share a link to a website where this is actually working? I'm not an advanced coder and I'm just struggling to see where I specify the unique identity of the text box I am trying to change. Many thanks

It would be helpful if you can share your site URL so we can test directly

4 hours ago, Damon777 said:

I tried inputting the  code; however, the resetting of the one field continues. Is that code supposed to be part of the script section or its own section entirely?

What is your site URL