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]
Thanks, but when I use it in SP 2010, it doesn’t quite work the same. I used it in SP 2007 and it worked exactly as advertised. I want to make a field read-only in the EditForm of a library. I used the trick where you append the URL with “&TollPaneView=2” to get into edit mode for the EditForm page. This all worked great in SP 2007. When we went to SP 2010 I added the CEWP to my Edit form, added the javascript again and saved. What I see happening is that my value in that field is deleted. In SP 2007 the value is only grayed out and the field can’t receive the focus (YES!). But in SP 2010, after I add the javascript (editing the CEWP), the field is grayed out, value is still there. But when I click ‘Apply’ and ‘Ok’ to exit the edit mode of the CEWP, the value is deleted from the field. It is gone, even if I View Properties it is gone, if I remove the javascript, the value doesn’t return. It’s actually deleted.
Any thoughts?
KevinHou
Kevin:
The forms didn’t change at all from SharePoint 2007 to 2010, so things should have worked fine for you. I think you may need to do some debugging.
In 2010, script you put into the CEWP is often stripped out or altered when you save it. It’s much better to store your script in a file and reference it in the Content Link of the CEWP.
M.
Thanks Marc, the explanation was very useful.
However, enabling again with $(“input[Title=’myTitle’]”).attr(“disabled”, “”) did not work in my case (using jQuery 1.7.1).
This worked: $(“input[Title=’myTitle’]”).removeAttr(“disabled”)
It’s explained in the FAQ (http://docs.jquery.com/Frequently_Asked_Questions)
Hans
Hans:
The changes they have made to jQuery over time mean that some of my older posts become incorrect. So much for backward compatibility!
M.
Hi Marc,
I used this and it is working perfectly. But I am facing one major issue.
Brief: I have an applicationName column in my list. I have disabled that. Now what is happening once I edit the form and goes back to list the application Name column goes blank. Which is causing issues.. I am disabling 2 columns as per need one is date column and other is application name column but issue is only with application name column. I have made it plain multiline text since for rich multiline text this code was not working.
This is the code which I am using:
$(document).ready(function() {
$(“:input[title=’Day’]”).attr(“disabled”, “disabled”);
$(“:input[title=’ApplicationName’]”).attr(“disabled”, “disabled”);
});
function PreSaveAction() {
$(“input[Title=’Day’]”).attr(“disabled”, “”);
$(“input[Title=’ApplicationName’]”).attr(“disabled”, “”);
return true;
}
Please help me if you could as this is very urgent. Thank you very much.
Ankit
Ankit:
With more recent versions of jQuery, the $(“input[Title=’Day’]”).attr(“disabled”, “”); syntax won’t work. Instead, you need to do $(“input[Title=’Day’]”).removeAttr(“disabled”).
M.
Hi Marc,
I have a field on a new form titled Approval Received it is a choice, radio buttonwith options Yes and No. When the value is no, I want to diable the rest of the fields on the form. How would I do this?
Wendi:
You can do this with script (JavaScript or jQuery) by binding to the change event for the Approval Received radio buttons. What you would need to do for each of the other columns to disable them will vary based on type of column. You might consider simply hiding all of the rows in the form table when the user selects No. You’ll also need to handle the instance where the user may change other values before they select No.
M.
Hey Marc, I’m trying to set this up using a CEWP. It doesn’t seem to work. Do I need to specify the list or the form? Also, is there a way to make this work for all lists that are on the same page as the CEWP.
Thanks,
Bob:
It’s hard to say without seeing your form or code. The example here works with the title column. If your column is called something else or if it is a different type of column, you’ll need to adjust accordingly.
M.
I use the code for dropdown box, the below line works fine for me and make the control disable.
$(document).ready(function() { $(“select[title$=’Status’]”).attr(‘disabled’, ‘disabled’); });
but the below line under PresaveAction() doesn’t make the control enable as it is stil not posting the value of dropdown while submittig.
$(“select[title$=’Status’]”).attr(‘disabled’, ”);
can you help me to understand this
yogendra:
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 do:
$("input[Title='Title']").prop("disabled", false);See: http://api.jquery.com/prop/
In any case, you should learn to debug your script using the IE Developer Tools or Firebug. Just copying and pasting won’t usually get you there.
M.
Hi Marc
Thanks for your quick reply. Yes indeed this works for me now. Your response is really helpful.
Thanks you so much !!
Regards,
Yogendra
Amazed to see the jQuery model you explained . How can i use the jquery concept to enable and disable few text boxes for specifc users in Sharepoint 2010 ..Please help ..”
Joshy:
You’ll have to be a bit more specific.
M.
Hi Marc – I had developed aSharepoint list with 5 test box and 2 drop down (combo box) . My requirement is that out of those , 1 text box and 1 combox should be editable only for users from a specifc user group (for example users having full control access) for all other users this text box and combo box should be readonly or should appear disabled . I know to use Sharepoint designer . Request for your inputs and advice . Sorry for the unclear note posted earlier.
Joshy:
There are a number of ways to do this:
* Convert the form to a DVWP and customize the XSL using a Sharepoint:SPSecurityTrimmedControl
* Lookup the current user’s group membership with script and hide/disable the elements based on the results
* Use InfoPath
It really depends on a number of things, including how you are most comfortable doing it and the level of security your requirements dictate.
M.
Thanks a lot Marc. The option “Lookup the current user’s group membership with script and hide/disable the elements based on the results” means using Javascript or Jquery ? Can you please help with some sample code snippet to refer.
Also I am not familer with Data View Web part , I will explore this option also
Take a look at the SPServices documentation and the Users and Groups Web Service.
M.
Thanks Marc .. Will try :-)
Thank you very much.
I got 8 columns in my List(calendar reservation).
I want to have one column(Approval: YES/NO) only visible to a user(“testuser”).
How can we use column validation *expressions* to archive this.
Ravi:
I’m not sure you can.
M.
Is there any jquery that can help
Ravi:
Yes, you can check the values with jQuery/JavaScript and act accordingly in your PreSaveAction.
M.