- Skill level:
- Moderately Easy
Other People Are Reading
Open your HTML page. If you do not already have jQuery referenced within your page, do so now. You can link to the script directly in the HTML head section as follows: <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
If you prefer to use a jQuery installation on your own server, download and copy it there, updating the script link markup element to reflect the location you have it stored at.
Create user input elements. If you already have a form and text input element you can use those. If not create them now. In the body section of your page, add a form element as follows: <form> <!--input elements--> </form>
You can alter the opening form tag to reflect any action you want performed when the form is submitted by the user. Inside the form, between its opening and closing tags, add a text input element as follows: <input type="text" name="user_text" id="text_in" value="some text"/>
Alter the code if necessary to use the name, ID and value of your choice. If you prefer to use a class attribute rather than an ID attribute, use the following syntax guide: <input type="text" name="user_text" class="text_in"/>
If you want to create the text input element in jQuery rather than coding it in HTML, you can do so as follows in the document ready function: $("<form>").append("<input type='text' name='user_text' id='text_in' value='some text'/>");
Set the text-box to be readonly. Add the following code to the function in which your jQuery processing takes place: $('#text_in').attr('readonly', true);
This works for the specified ID attribute. If you included a class attribute use the following code: $('.text_in').attr('readonly', true);
The code first selects the element within the page, then sets the readonly attribute on it. The text input element should now function on a readonly basis.
Tips and warnings
- The jQuery "attr" function can set other HTML attributes on selected elements.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for