I have created a form that has some pre-filled values: so a textbox for name has "Name" in it and also a tooltip "Please enter you name".
How can I clear this textbox automatically so that when the user clicks in it, the default value is cleared and the user is allowed to type in their real name?
So far what I've done is try to give the textbox an ID (I did this through the form's settings) and pick it up using JS (i.e., document.getElementById(id)). One of the reasons this does not work is that on render, Sf automatically generates a very long string that becomes the ID for the textbox control on the form.
Any help will be appreciated. Thanks in advance.
var myInput = document.querySelectorAll("input[value='Predefined Name']");
Then you can register something like an onFocus event which would remove the existing value (make sure you only remove the existing value if it matches your predefined value), you'd annoy users if you wiped the field every time they focused it.
That said, I highly recommend using the existing Placeholder option if you have it in the editor, otherwise you could also add your placeholder on pageload:
myInput.placeholder = "Your new placeholder";