Registration form/Auto fill list - Sharepoint 2013

Question

I'm working with SharePoint 2013 and SharePoint designer 2013. I DON'T HAVE INFOPATH.

I have 2 lists, one is a training calendar and the other one is for registration to these training. Here's the picture.

As you can see on the first picture there's a link call "Register" on the calendar list. (I have a link that explain how to do so, but I need 10 reputation to put more than 2 links so too bad!) This link open a new form of the list "Mes cours" (it's the same list as "Inscription" in the second picture).

The first thing I want is that when I click on the "Register" link, the information of the row appear automatically. If someone click on the link towards Formation SharePoint, all the information about this class is on the form.

This way, when the employee click to register to a class, all the information about this class appear on the form. In the second picture I linked, I'd like that the "Title" (or meeting), "Start time", "End time", "Éligibilité", "Lieu", "Salle/Code connexion", "Nom du formateur" and "Langue" field appear on the form.

One important thing is that theses need to be read only, so employees can't change the information.

Here is the picture of what I want at the end if I click on the link Register towards "Formation SharePoint"

Answer 1

Not so trivial after all. I played around a bit and here is what I came up with:

Notes first:

1. You will need jQuery (at least on the DispForm.aspx of the Training Calendar list and on the NewForm.aspx of the Registration list)
2. You Registration list needs a lookup column to the Training Calendar list
3. You will have to deactivate Minimal Download Stratgy on the site, otherwise the scripts might not run

Steps

1. Your column Register will be empty by default. Add the following CSR to the view:

Type.registerNamespace('SPOODOO')
SPOODOO.Demos = SPOODOO.Demos || {};
SPOODOO.Demos.Templates = SPOODOO.Demos.Templates || {}
SPOODOO.Demos.Functions = SPOODOO.Demos.Functions || {}

SPOODOO.Demos.Functions.DisplayRegisterLink = function (ctx) {
    return "<a href='/Lists/Registration/NewForm.aspx?event=" + ctx.CurrentItem["ID"] + "'>Register</a>"
}

SPOODOO.Demos.Templates.Fields = {
    'Register': {
        'View': SPOODOO.Demos.Functions.DisplayRegisterLink
    }
}

SPOODOO.Demos.Functions.RegisterField = function () {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(SPOODOO.Demos)
}

SPOODOO.Demos.Functions.MdsRegisterField = function () {
    var thisUrl = _spPageContextInfo.siteServerRelativeUrl + "Style Library/register.js";
    SPOODOO.Demos.Functions.RegisterField();
    RegisterModuleInit(thisUrl, SPOODOO.Demos.Functions.RegisterField)
}

if (typeof _spPageContextInfo != "undefined" && _spPageContextInfo != null) {
    SPOODOO.Demos.Functions.MdsRegisterField()
} else {
    SPOODOO.Demos.Functions.RegisterField()
}

Sorry about all the SPOODOOs, you can change them to whatever Namespace you prefer. In order to add the CSR, put all that code in a *.js-file. Upload it to somewhere (Style Library for example). Then change the JSLINK-property of the view to something like:

~SiteCollection/Style Library/CSR.js

In the code you will find two URLs. You will have to change them to the proper paths. The upper one is the relative path to the registration list (change /Lists/Registration/NewForm.aspx to the proper URL), the lower one to the relative path to the CSR file without the leading '/'.

Here you can find more CSR related information:

http://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

2. Modify the DispForm.aspx of your Training Calendar list

Open any existing item and then Edit the Page. Add a Script Editor Webpart and add the following code:

<script>
    JSRequest.EnsureSetup(); 
    var custom = JSRequest.QueryString["custom"];
    if(typeof custom != "undefined"){
        jQuery("#s4-ribbonrow").hide()
        jQuery("#part1 > *:last-child()").hide()
        jQuery("#pageTitle").hide()
    }
</script>

This should be the result:

Save the page and continue with step 3

3. Modify the NewForm.aspx of your Registration list

Click New Item on the Registration list, then edit the page. Add a Page Viewer Webpart and define the URL as the URL of the DispForm.aspx of your Training Calendar list. Add ?ID=0 to it. It should look like that:

/Lists/TrainingCalendar/DispForm.aspx?ID=0

Now add another Script Editor Webpart and add the following code:

<script>
    jQuery(document).ready(function(){
        JSRequest.EnsureSetup(); 
        var eventId = JSRequest.QueryString["event"];
        var eventLookUpField = jQuery("[id^=Event_][id$='_$LookupField']")
        var eventIFrame = jQuery("#MSOPageViewerWebPart_WebPartWPQ3")
        if(typeof eventId != "undefined"){
            eventLookUpField.val(eventId)
            eventLookUpField.closest("tr").hide()
            eventIFrame.attr("src","/Lists/Events/DispForm.aspx?isDlg=1&custom=1&ID=" + eventId)
        } else {
            eventLookUpField.on("change", function(e){
                eventId = eventLookUpField.val()
                eventIFrame.attr("src","/Lists/Events/DispForm.aspx?isDlg=1&custom=1&ID=" + eventId)
            })
        }
    })
</script>

Here ,again, you might have to change the URLs so that point to your Training Calendar list. You will also have to replace Event in this line to whatever the name of your lookup column is:

var eventLookUpField = jQuery("[id^=Event_][id$='_$LookupField']")

And this line might need a change as well:

jQuery("#MSOPageViewerWebPart_WebPartWPQ3")

Depending on the order you choose to add the webparts, the number at the end could be different (2, 3, 4). You can figure that out with your browsers Dev-tools.

And that's the result:

Save the page and you should have your expected result.

Few example shots

The Training Calendar list (called Events in my case):

The Registration-list NewForm.aspx when the normal New Item button was used and an event has been selected from the drop down (in that case the Event-selection drop down menu is visible):

The Registration-list NewForm.aspx when the Register button was used (in that case the Event-selection drop down is invisible):