Display column from one list on NewForm of other list

Question

In ListA there are two columns, Title and Due Date, while in the other ListB there are several columns, one of those named Milestone is a lookup on Title column of ListA.
In NewForm of ListB I have dropdown/choice field Milestone and based on what user chooses I want to display Due date (just readable).

Any suggestion how is this achievable? Maybe I can do this using javascript or SPServices?

Answer 1

You could go CSR, but there is an oldskool 2007 way that is still valid

Add a hidden ListView of List A on your New Form, that is the easiest way to read ListA data without using JSOM or REST

Then below your Form add a CEWP with Javascript code:

• attach an eventListner on the dropdown
• on triggered, get the data from List A
  in ctx.ListData.Row, no need to leech the DOM as in old 2007 days

This code should get you started.. no jQuery, no SPServices, no SPUtility required

In a CEWP below the New Form, and that ListView at the top (hide it after your code works)

I did it with a standard Status dropdown...

//id contains Status , ends with DropDowChoice
var dropdown=document.querySelector("[id*='Status'][id$='DropDownChoice']");
dropdown.addEventListener('change',function(){
    var matcheditem=ctx.ListData.Row.find(function(item){
        console.log('checking Item',dropdown.value,item);
        return item.Status === dropdown.value;   //replace with item.Title
    });
    if(matcheditem.length){
        console.log('matched Item',matcheditem);
        var oneMatchid='matchedStatus';// unique ID for bookkeeping
        var matchedSPAN=document.querySelector("#"+oneMatchid); //find if SPAN exists
        var matchedHTML=matchedSPAN ? matchedSPAN : document.createElement('SPAN');
        matchedHTML.id=oneMatchid;
        matchedHTML.innerHTML=matcheditem.Title;//add matched value below dropdown
        var TD=dropdown.parentNode.parentNode;
        if(!matchedSPAN) TD.appendChild(matchedHTML);    //only add once
    }
})

Answer 2

Beside great post by Danny I found another solution with help of jquery.
Firstly I created cascading drop downs in ListB.

I made two lookup columns in ListB, Milestone and DueDate from ListB. So, both columns are visible on custom NewForm.

After this I created cascade drop downs so when user chooses Mileston, DueDate column is filtered.

Than I came across on new challenge. Default value for DueDate was None, but first/only option when clicked on drop down was DueDate of that Milestone.
So it meant I have to display a value of DueDate not None word.

I wrote a function to get first child of drop down and to display that value in additional td I created in NewForm next to td where drop down is. I hid drop down and was left with the label, as I wanted.

After this I came up a new problem, as value of DueDate that was displayed on label was in ISO format, not in format I wanted DD.MM.YYYY, that meant I have to write a new function for Date and Time convert.

After that, I got readable Date value as I needed.