Autofill column values of a list based on another list column value

Question

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

List B

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.

Answer 1

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