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]
Well, the question is, why would you disable the field in the first place if you want to save it with the form? Make it readonly instead.
Fari question, but the effect with readonly is different. You can still position your cursor in the field, but you can’t type anything. In fact, if you hit the backspace, the effect is the same as hitting the “Back” button, at least in IE. This will probably feel very weird to the user. Disabling the input element makes the “locked” stated much more obvious and the user can’t position their cursor in the field.
M.
Hi Marc,
I have a requirement that useer should enter required fields, but when word 2007 editor is used, it lets users to bypass the Required Columns, is there any way to control it?
Not using the same mechanisms. You’ll need to do something analogous in your Word document.
M.
I have a custom list in SP2010 that I have added two additional fields to besides the default Title field. So how would this work if I want to “disable’ the Title Field when users naviage to “New Form” so that the user can only enter data in the two custom fields. Since users are navigating to a list, I would have a page where I could add this jQuery to a hidden web part. I cannot access the mentioned video so I’m not sure if that’s the approach you’ve taken.
Beth:
The code I give in the post should be enough to go on; the video covered far more stuff.
The idea is to disable the column on page load and then re-enabled it upon submit by taking advantage of the PreSaveAction. Note that the Title column is required in most cases, so you will need to provide *some* value for it.
M.
I tried to the same thing and spend like 4 hours.
Then your solution works as a miracle to me …
Thanksssssssssssssssssssssssssssssssssssssssssssssss !!!!
Also, just curious if that is possible, Can I replace the sharepoint list text box with a label and then put a label to show a value as putting a textbox for a read only field does not makes much sense.
Salman
Salman:
You can change the way something is displayed with script or (preferably, IMO) using a DVWP so that it happens server side.
And you’re welcome!
M.
thanks alot i was facing the same issue the value was not saving presavefunction solved my issue thanks alot
Hi
I have a problem. please help me out.
I am using SharePoint 2010.
I have list A and list B in two webparts, I have connected both webparts using webpart connections.
So when I select the connection link in list A it filters the items in List B baesd on ID.
Now I want to customize list B to restrict end user to add only one item for one ID of list A.
i.e., List A – List B
AID001 – BID001
AID002 – BID002
At the moment I can add one or more items in List B for list A i.e.,
AID001 – BID001, BID002, BID003 …
So I should be restricted to add only 1 item in list B associated to list A item , once the user add one item in List B then the ” Add new item ” should disappear.
Thanks
Venkata:
There’s no quick answer to your question. If you want to go the script route, you’ll need to write something yourself.
M.
Hi Marc
Any ideas or suggestions to go through.
Hope to get something to get start.
Thanks
Venkat
Hi Marc, this works perfect, thanks for this and thanks to all your other posts. What great work!!!
Strangely, this doesn’t seem to apply to the ID in the form list if you likewise try:
var txtID = $(“input[Title = ‘ID’]”).val();
Why would it right?? I’ve been researching for 6 hours but natta.
Cheers
Carl:
That’s because the ID isn’t in the form in the same way. It’s available on the URL if you’re on an EditForm and nowhere if you’re on a NewForm because the ID hasn’t been assigned yet.
M.
Tx M, On retrospect that obviously does make sense. And here I thought I found a bug :) Asif.
Hi,
I have created custom list with 2 columns, Name and Title. Customized edit and new forms using InfoPath 2010. I want to add validation on save button click for InfoPath form. On list item edit or new item, added following Javascript code in CEW. However PreSaveAction is not firing. Am I missing something ?
Thanks in advance.
window.onload = function() {
window.setTimeout(ReadListItem, 1000);
}
function PreSaveAction() {
alert(‘In PreSave’);
return true;
}
Regards,
Omkar
Omkar:
These approaches aren’t meant for Infopath forms, though you can still use script with them if you choose. (It’s just a whole different experience.) With Infopath, you have more sophisticated built-in capabilities to do this stuff.
M.
Thank you Marc.
can u pls help m out to disable the field columns for a particular user group with jquery…
Shashank:
This won’t be secure, of course. Enforcing security with script is preventative at best.
Take a look at SPServices and the Users and Groups Web Service.
M.