Solved

How to make a field uneditable?

  • 3 January 2017
  • 6 replies
  • 4 views
A
Badge

Is there a way to make a field impossible to edit? Possible with the addition of some javascript?

icon

Best answer by Rob 22 January 2017, 04:04

View original

6 replies

Rob
Userlevel 6

Hi @Andy2 you can disable a field using the following javascript (remember to wrap the code in script tags):

document.getElementById('FIELD ID HERE').disabled = true;

Could you let me know a bit more about your use-case for disabling a field? The above code will make it impossible to type in or change a field. If you’re looking to make sure a certain value in a form field stays intact a hidden field might be a more suitable option for you.

A
Badge

Hi Rob, thanks for the reply but I found a very simple workaround solution, which was just to place a see-through box over the field that I didn’t want to be editable. But thanks for this, this type of code is what I had in mind when I first posted here!

Rob
Userlevel 6

My pleasure @Andy2 happy to help! I like your solution a lot actually. Really simple and easy to implement, especially if you’re working with others on the page and don’t want to mess with code 🙂

quike

Hi Rob, this script doesn’t work now.

quike

Have you any way to do this ?

Vicky_W

Hey @quike,

This is Vicky from the Unbounce Technical Team 😀

The code might be running before the DOM is ready so adding the event listener “DOMCotentLoaded” should solve the issue.

Here’s the code I come up with:

 <script>
     document.addEventListener("DOMContentLoaded", function(event) {
     document.getElementById("YOUR_FORM_FIELD_ID").disabled = true;
    });
 </script>

You can take a look at my test page to see the effect as well:
https://testing.vickyunbounce.ga/disable-field/ 😉.
Hope this helps!

Reply


Terms & ConditionsCookie settings