SharePoint and jQuery–Getting & Setting SharePoint Form Fields

In this post, we will see how can customize SharePoint OOTB input form using jquery, Ideally we can edit form from ribbon and add content editor webpart to do our customization.

Note – Credit belongs to original post, not sure from where I have used but found this in my quick reference document and thought to include here for other’s benefits also.

Question 1: From where to download JQuery Base Library?
Answer 1: http://code.jquery.com/jquery-1.7.2.min.js

Question 2: How to include JQuery Script?
Answer 2: Upload the JQuery base library to the Assets list and include the library using the below syntax

<script type=”text/javascript” src=”../../Assets/jquery-1.7.2.min.js”></script>

Question 3: What attribute to use for getting the INPUT object?
Answer 3: We need to use the title attribute of the INPUT control

<input name=”ctl00$m$g_e2bcfa9c_6e16_4b44_9833_22e44201a72b$ctl00$ctl04$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$TextField” type=”text” maxlength=”255″ id=”ctl00_m_g_e2bcfa9c_6e16_4b44_9833_22e44201a72b_ctl00_ctl04_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField” title=”Email” class=”ms-long” />

Question 4: How to write JQuery function?
Answer 4:

<script type=”text/javascript” src=”../../Assets/jquery-1.7.2.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

});

}
</script>

Note: $(document).ready(function ()… is referred as the MAIN() function

Question 5: How to get the value of the INPUT field?
Answer 5:

var variablename = $(“input[title=’title of the input control’]”).val();

Question 6: How to make the field readonly?
Answer 6:

$(“input[title=’title of the input control’]”).attr(“readonly”,”true”);

Question 7: How to get the value of the Dropdown?
Answer 7:

var variablename = $(“select[title=’title of the dropdown control’]”).val();

Question 8: How to set the value to the text field?
Answer 8:

$(“input[title=’title of the input control’]”).val(“enter value here”);

Question 9: How to remove the readonly of the text field?
Answer 9:

$(“input[title=’title of the input control’]”).removeAttr(“readonly”);

Question 10: How to set focus to the text field?
Answer 10:

$(“input[title=’title of the input control’]”).focus();

Question 11: How to use JQuery in PreSaveAction?
Answer 11:

<script type=”text/javascript” src=”../../Assets/jquery-1.7.2.min.js”></script>
<script language = “Javascript”>
function PreSaveAction()
{

var variablename = $(“input[title=’title of the input control’]”).val();

}

</script>

Note: do not include $(document).ready(function ()…

Question 12: How to call JQuery function in Dropdown value change?
Answer 12:

<script type=”text/javascript” src=”../../Assets/jquery-1.7.2.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {

$(“select[title=’title of the control’]”).change(function () {
//write logic here
});
});
</script>

Question 13: How to set the width of the Text field?
Answer 13:

$(“input[title=’title of the control’]”).width(100);

Question 14: How to disable Textfield?
Answer 14:

$(“input[title=’title of the control’]”).attr(‘disabled’,’disabled’);

Question 15: How to Remove disable attribute on Textfield?
Answer 15:

$(“input[title=’title of the control’]”).removeAttr(‘disabled’);

Question 16: How to check numeric value in Text field?
Answer 16:

var numbervaluefield = $(“input[title=’title of the control’]”).val();
var numericheckvaariable = $.isNumeric(numbervaluefield);

Note: The function will return boolean value

Question 17: How to compare date in Jquery?
Answer 17:

var startdate = new Date($(“input[title=’Start Date’]”).val());
var enddate = new Date($(“input[title=’End Date’]”).val());

if(enddate < startdate)
{
alert(“End Date cannot be lesser than Start date.”);
$(“input[title=’End Date’]”).focus();
return false;
}
else
{

 return true;
}

Question 18: How to set default value in Rich Text field?
Answer 18:

<script type=”text/javascript” src=”../../Assets/jquery-1.7.2.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {var htmlcontentval = “<table border=’1′ cellpadding=’0′ cellspacing=’0′><tr><td colspan=’3′>Month-Year</td></tr><tr><td>Milestone</td>       <td>Onsite Effort</td><td>Offshore Effort</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table>”;

$(“textarea[title=’Milestone Information’]”).val(htmlcontentval);
});
</script>

Note: Milestone information is the title of the textarea used in the Rich text field

Question 19: How to hide the Sharepoint Enhanced Richtext field?
Answer 19:

$(“textarea[title=’richtexttitle’]”).closest(“tr”).hide();

Question 20: How to unhide the Sharepoint Enhanced Richtext field?
Answer 20:

 $(“textarea[title=’richtexttitle’]”).closest(“tr”).show();

Question 21: How to convert string to uppercase?
Answer 21

$(“input[title=’titlename’]”).val().toUpperCase();

Question 22: How to check length of the string?
Answer 22

$(“input[title=’titlename’]”).val().val().length;

Question 23: How to validate Email address?
Answer 23:

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $(“input[title=’titlename’]”).val();
if(!emailReg.test(emailaddressVal))
{
alert(“Please enter valid email address”);
}

Question 24: How to get the lookup text value (Dropdown text value)?

Answer 24:

$(“option:selected”, $(“select[title=’titlename’]”)).text();

Hope this helps…Happy Coding!!!