0

I am an newbie to JS, SP Services and JQuery.

I am on SharePoint Online environment. I have a List A with columns Title (Text Field), Location (Choice field) and Event Date (Date field). I have a List B with 3 columns (Training, Location and Event Date). Training column of List B is a look up column for Title column of List A (This makes the Training column of List B, a choice field).

When a user selects a specific choice in Training column of List B, I want to auto populate corresponding Location and Event Date values from List A associated to that particular item.

For example List A

enter image description here

List B

enter image description here

So in List B if i select Jira Training from the dropdown, I want to auto populate "Remote" in Location column and "2/7/2018" in Event Date column.

Note : Also please suggest what field type should Location and Event Date of List B should be? As these columns are auto filled.

Any suggestions are appreciated.

2

You can use Single of Line column type for Location and Event Date.

A demo for your reference:

<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">

$(document).ready(function () {
// the lookup field in the new form
var IssueIDField= $("select[title='Training']");
IssueIDField.change(function () { Populate(); });
}); 

var ListItem;
function Populate() {
var IssID = $("select[title='Training']").val();
var clientContext = new SP.ClientContext.get_current();
var IssueList = clientContext.get_web().get_lists().getByTitle('ListA0223');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query><Where><Eq> <FieldRef Name=\'ID\' /> <Value Type=\'Text\'>' + IssID + '</Value></Eq></Where></Query><RowLimit>20</RowLimit></View>');
ListItem = IssueList.getItems(camlQuery);
clientContext.load(ListItem);
clientContext.executeQueryAsync(Function.createDelegate(this,this.Succed),Function.createDelegate(this,this.Failed));
} 

function Succed(sender, args) {
var listItemEnumerator = ListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var LItem = listItemEnumerator.get_current();
$("input[title='Location']").val(LItem.get_item("Location"));

var myDate = new Date(LItem.get_item("Event_x0020_Date"));
alert(myDate);
var myFormattedDate = myDate.format("MM/dd/yyyy");

$("input[title='Event Date']").val(myFormattedDate);

}
} 

function Failed(sender, args) {
alert('Error. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Note: change ListA0223 to your ListA.

More information, you can refer to:
AUTO-POPULATE LIST FORM FIELDS BASED ON LOOKUP SELECTION IN SHAREPOINT

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.