PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Lock Field from Editing

  1. Hello,

    I have a field that gets populated dynamically (single text box) and I would like to lock this field so that users can't edit it but still being able to see it.

    Also it would be best to make the field look like a label but i think i can achieve this using a custom css class.

    any help?

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  2. You should be able to use a bit of jQuery here, such as:

    jQuery(document).ready(function() {
    	jQuery("#input_59_6_3").prop('readonly', true);
      });

    You would just need to inspect the input and get the ID appropriately to replace the above ID. You probably could style it up too - do you have a link to your form?

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  3. I am using a plain page template and put the above code just above the </body> tag like this...

    <script type="text/javascript">
      jQuery(document).ready(function() {
    	jQuery("#input_10_11").prop('readonly', true);
      });
     </script>

    This doesn't seem to work... Do i need to make any specific references to the jquery library other than:

    <script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/includes/js/jquery-142.js?ver=1.4.1'></script>
    
     <script type='text/javascript' src='<?php bloginfo('url'); ?>/wp-content/plugins/gravityforms/js/conditional_logic.js?ver=1.3.13.1'></script>
    Posted 7 years ago on Monday October 15, 2012 | Permalink
  4. That's a really old version of jQuery - you'll want to make sure you are using the latest release that ships with WP - 1.7.2

    Also - do you have a link to your form? It'd be easier to see what's going on.

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  5. I got that version from your plain page template!.. plainpage.php

    what should I change it too? i am not experienced at all when it comes to javascript :)

    Here is the link to my site:

    http://bit.ly/QJ6w8u

    click on "request tickets"

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  6. Try replacing that line with a google hosted version of jQuery. Right now you're getting a 404 (screenshot) on that link you are using (because it doesn't exist in the theme folder you are specifying). So you can either drop the version into that theme folder you are referencing that's currently throwing a 404 or you could path to a hosted version, like so:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  7. ok i fixed that but i can still edit the field.. :(

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  8. When I view the source of your iframed page, I don't see any changes - looks the same as before. Are you making these changes to this page template? Screenshot

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  9. ok it works now. had uploaded the file to the wrong location... as far as editing the css of the box using jquery could you please recommend the starting syntax and i will figure it out then

    thanks a lot for the help..

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  10. No problem, glad to help out. This should do the trick for you:

    [css]
    #input_10_11 {
    background: none;
    border: 0;
    color: #ccc;
    }

    Result

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  11. awesome, all fine :)

    Posted 7 years ago on Monday October 15, 2012 | Permalink
  12. Awesome! Looks good.

    Posted 7 years ago on Monday October 15, 2012 | Permalink

This topic has been resolved and has been closed to new replies.