Using jQuery to Prefill and Disable Required Columns in a SharePoint Form
Here’s a question I got in the forums at the USPJ Academy today. It’s a nice simple question, but the answer points out a cool thing about SharePoint forms: the PreSaveAction.
I was watching the excellent video posted by Marc Anderson: Enhancing the User Experience with jQuery – Chaining from Selector.mp4. In this video Marc runs through some interesting scenarios, which I tried on my own. The following scenario gave me issues: Required field that has either a disabled or hidden control that is prefilled. The problem is that when I hit OK or Save, the form never sees the pre-filled value. e.g. Simple text field (Say the out-of-the-box Title field.) Let’s pre-fill with “Hello World” and disable the field. The words “Hello World” do show up, but I am not allowed to save the form by clicking on OK. Any thoughts?
If you want to watch that “excellent video”, you’ll have to become a student at the Academy! However, this is a really good question. When an element in a form is disabled, its value effectively won’t be submitted along with the form. If the column is required, like is the case with the Title column, then when you submit the form you’ll get the validation error:
You need to do a little sleight of hand to make this work. Here’s a little example:
<script language="javascript" type="text/javascript" src="../../jQuery%20Libraries/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("input[Title='Title']").val("Hello World");
$("input[Title='Title']").attr("disabled", "disabled");
});
function PreSaveAction() {
$("input[Title='Title']").attr("disabled", "");
return true;
}
</script>
So when the document is ready, you can set the Title column’s value to ‘Hello World’, and then disable the column as in the example above.
The trick is to re-enable it when the form is submitted using the PreSaveAction. You can read more about the PreSaveAction in my blog post Validation on SharePoint Forms – Part Four (and others), but the basic idea is that the PreSaveAction is a function stub that SharePoint always calls on a form submit. If you want to do some additional things, like your own validations, this is where you put them. By re-enabling the Title column, your form will submit just fine.
Note that if you want the form to submit, you return true from the PreSaveAction. If you don’t want the form to submit, then you’d return false. So, for instance, if you are checking to see if a Start Date is before the End Date for an Event and it isn’t, you’d probably put a validation error message into the DOM and return false. This keeps the form from submitting, forcing the user to fix the issue.
[important]
As noted in one of my replies to the comments below, this is an old post, and jQuery has moved forward a bit. Depending on what version you are using, the line:
$("input[Title='Title']").attr("disabled", "");
may not work. You may instead need to use:
$("input[Title='Title']").prop("disabled", false);
See the jQuery documentation for .prop().
[/important]
How to prefill the field and disable the field using Internal name?.
Thank you.
Dinesh:
It really depends on what type of field it is, as the markup varies by type. There are plenty of examples out there of finding the right table cell in your selector using the InternalName. Take a look at the private findFormField function in SPServices.
M.
Hallo Marc,
Thank you for your reply. The field type is Text field. Actually with the Field titel prefill and disable works perfectly but my site is multi-lingual thats why if the get the field Internal name and prefill it and disable it.
Thank you.
Shashank – http://sharepointworld.wordpress.com/2009/05/15/disabling-a-list-column-in-newform-aspx-based-on-user-role/
This saved my life !!!
Thank goodness, Cacus. You family must be relieved!
M.
Hi Marc,
I have a scenario where user need to make comments required only when user clicks on rejected button. How can I achieve this.
Thanks in advance
Rama:
You’ll need to roll your own code for this. Bind to the click even on the rejected button to set a Boolean like commentRequired. and then do a check in the PreSaveAction to see if the comments field is required. If it’s required and not filled in, then don’t submit the form (return false).
M.
its not working.wheni use multiple lines of text ..any idea?
pp:
What are you trying to do and how are you doing it? Are you trying to hide the field? Set it?
M.
$(document).ready(function() { $("input[Title='test']").val("Hello World"); });Note: Here “test” column is multiple lines of text……The Above code is working when i change the “test” column to single line of text
A multi-line text field isn’t an input element. It’s contained in a textarea instead. You should be able to inspect the elements in the page to determine the appropriate selector.
M.
I am setting the field
From where you bring such magics, pure genius thinking
This saved my time
Marc, thanks for all of the great posts. I know this one is old, but I have a related question. I have a custom sharepoint list with infopath web forms. I’ve added a web part that displays a map and allows the user to search for a point on the map. When the user clicks a button in the map point info window the lat and long are added to the edit form. When I try to save the data the data submits but then they fields are blank.
This seems like a similar issue. Have you ever encountered this?
Hi,
My email did not submit on the last form. Will this resolve the issue with a form that the data has been added with JavaScript? I have a sharepoint infopath form that the fields go blank (the ones edited by JavaScript) in the content editor loaded with the form (when I click the submit button).