Skip to main content
Solved

How to make a field uneditable?


Forum|alt.badge.img

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

Best answer by Rob

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.

View original
Did this topic help you find an answer to your question?

6 replies

Rob
  • Former Unbouncer
  • 198 replies
  • Answer
  • January 22, 2017

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.


Forum|alt.badge.img
  • Author
  • 52 replies
  • January 22, 2017

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
  • Former Unbouncer
  • 198 replies
  • January 25, 2017

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
  • 3 replies
  • February 28, 2020

Hi Rob, this script doesn’t work now.


quike
  • 3 replies
  • February 28, 2020

Have you any way to do this ?


Vicky_W
  • Former Unbouncer
  • 5 replies
  • February 28, 2020

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!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings