provide a default value for a input/textarea in the Form block

I have a standard Form block, with a textarea whose value I would like to prefill with some text. This way, the user can override the text, or can simply go with my suggested default.

The Form does not provide such functionality. So I tried to use javascript to set the textarea value. But this is not working. once hte page loads, the textarea value is filled-in as expected. But then after a moment, something overrides the value and empties it.

So, my javascript seems to be working in some way,

Is there some additional logic in a Form that actively ensures I cannot run javascript to customize? 

Can you share link to page where you use form + which code did you use?

Hi @tuanphan

Unfortunately, my site is still under development and not yet public. So, I'm not able to share a link.

But here's the very simple javascript I dumbed it down to. I place this code under the page's Settings > Advanced > Page Header Code Injection.

As mentioned before, the text does appear for small bit of time, only to disappear again.

<script>
  document.addEventListener("DOMContentLoaded", function() {
      // Select all input and textarea elements
      var elements = document.querySelectorAll('input', 'textarea');

      elements.forEach(function(element) {
          // Set the value of the element to the placeholder text
        element.value = "ADDING SOME TEXT TO PROVE THAT IT IS VISIBLE FOR A BRIEF MOMENT";
      });
  });
</script>

Hi again

I have now published my site temporarily. A demo page that illustrate the problem can be found here https://www.lynxwork.se/book-demo-1

Thanks again

Try this

<script>
window.addEventListener("load", (event) => {
      // Select all input and textarea elements
      var elements = document.querySelectorAll('input', 'textarea');

      elements.forEach(function(element) {
          // Set the value of the element to the placeholder text
        element.value = "ADDING SOME TEXT TO PROVE THAT IT IS VISIBLE FOR A BRIEF MOMENT";
      });
  });
</script>

Thanks @tuanphan!

https://lynxwork.com/book-demo-1 has exactly your code now.

It looks as expected when the page load, but as soon as one enters text in any of the fields, all other fields are simply emptied again.

On 9/10/2024 at 3:26 AM, Jadelk said:

Thanks @tuanphan!

https://lynxwork.com/book-demo-1 has exactly your code now.

It looks as expected when the page load, but as soon as one enters text in any of the fields, all other fields are simply emptied again.

 

You try this new code

<script>
  window.addEventListener("load", (event) => {
    const formBlocks = document.querySelectorAll('.sqs-block-form');
    
    const triggerInputChange = (inputElement, value) => {
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        "value"
      ).set;
      nativeInputValueSetter.call(inputElement, value);
      const inputEvent = new Event("input", { bubbles: true });
      inputElement.dispatchEvent(inputEvent);
    };
    
    formBlocks.forEach((block) => {
      const fieldListInput = document.querySelector('.field-list input');
    if (fieldListInput) {
      fieldListInput.setAttribute('placeholder', 'ADDING SOME TEXT TO PROVE THAT IT IS VISIBLE FOR A BRIEF MOMENT');
    }
    });

    
  });
</script>