none
how to Display additional lookup columns in NewForm.aspx after selected indexchanged RRS feed

  • Question

  • Hi,

    i have 2 lists , List A is having one lookupcolumn and it is populating data from List B and the column Name is ClientName

    but there are 2 more additional lookup columns which i want to just display it after the ClientName is selected from the dropdown.

    Saving the additional columns is not the issue but i want to display it on NewForm.aspx , how can i achieve this.

    Thanks


    sal

    Sunday, July 9, 2017 5:36 PM

Answers

  • Hi,

    I modify the code as below for your reference:

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var listName="ListB";
    	$("select[title='ClientName']").change(function(){
    		if($(this).val()!=0){
    			var requestUri = _spPageContextInfo.webAbsoluteUrl +
                          "/_api/Web/Lists/getByTitle('"+listName+"')/items?$filter=Title eq '"+$(this).find("option:selected").text()+"'";
    
    			// execute AJAX request
    			$.ajax({
    				url: requestUri,
    				type: "GET",
    				headers: { "ACCEPT": "application/json;odata=verbose" },
    				success: function (data) {
    					if(data.d.results.length>0){
    						var field=data.d.results[0];
    						var classField=field.Class;
    						var country=field.Country;
    						$(".ms-standardheader nobr:contains('ClientName:Class')").closest("tr").remove();
    						$(".ms-standardheader nobr:contains('ClientName:Country')").closest("tr").remove();
    						$("select[title='ClientName']").closest("tr").after("<tr><td width='113' class='ms-formlabel' nowrap='true' valign='top'><h3 class='ms-standardheader'><nobr>ClientName:Class</nobr></h3></td><td width='350' class='ms-formbody' valign='top'><span dir='none'>"+classField+"</span></td></tr>"+	
    						"<tr><td width='113' class='ms-formlabel' nowrap='true' valign='top'><h3 class='ms-standardheader'><nobr>ClientName:Country</nobr></h3></td><td width='350' class='ms-formbody' valign='top'><span dir='none'>"+country+"</span></td></tr>");
    					}
    				},
    				error: function () {
    					//alert("Failed to get details");
    				}
    			});
    		}else{
    			$(".ms-standardheader nobr:contains('ClientName:Class')").closest("tr").remove();
    			$(".ms-standardheader nobr:contains('ClientName:Country')").closest("tr").remove();
    		}
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Proposed as answer by Maruthachalam Wednesday, July 12, 2017 1:02 PM
    • Marked as answer by SB Ali Wednesday, July 12, 2017 5:00 PM
    Wednesday, July 12, 2017 9:57 AM
    Moderator

All replies

  • Hi,

    We can use jQuery to achieve it. Please check my steps below:

    1. Create two custom list (ListA and ListB).

    2. Add a lookup column(lookup list is ListB, and column name is "ClientName") in ListA, and add two others lookup columns("LookupA" and "LookupB").

    3. Add the following code into NewForm.aspx page in ListA.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {	
    	$(".ms-standardheader nobr:contains('LookupA')").closest("tr").hide();
    	$(".ms-standardheader nobr:contains('LookupB')").closest("tr").hide();
    	$("select[title='ClientName']").change(function(){
    		if($(this).val()!=0){
    			$(".ms-standardheader nobr:contains('LookupA')").closest("tr").show();
    			$(".ms-standardheader nobr:contains('LookupB')").closest("tr").show();
    		}else{
    			$(".ms-standardheader nobr:contains('LookupA')").closest("tr").hide();
    			$(".ms-standardheader nobr:contains('LookupB')").closest("tr").hide();
    		}
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, July 10, 2017 2:42 AM
    Moderator
  • HI,

    Thanks for your reply , but I want to just display the lookup data of additional fields as read only like label or text.

    Thanks


    sal

    Monday, July 10, 2017 10:43 AM
  • Hi sal,

    Which type of the additional fields?

    I suggest you provide some screenshots for further research.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, July 11, 2017 1:06 AM
    Moderator
  • Hi,

    below is the List A where i am using the lookup column and name of the column is ClientName . and the additional Lookup columns are ClientName:Class & ClientName:Country 

    Here below is the List B from where i am getting the Lookup column values 

    below is the NewForm for adding list item what i want is , when i select the Value from the ClientName dropdown i want to display Class & Country as a text or label

    for example if i select ADNOC from Client dropdown , it should display B and Emirates values below as label


    sal


    • Edited by SB Ali Tuesday, July 11, 2017 5:13 PM update
    Tuesday, July 11, 2017 5:11 PM
  • Hi,

    To add to what Dennis shared, here is an article which explains in detail to display the additional fields from lookup column list as a text field. I think it meets your requirement. 

    Cascading drop down in SharePoint using REST API

    Code for reference:

    function setDrinkPrice(drinks, drinkType) {
        var drinkTypeListName = "Drink Type";
        var drinkTypeListURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + drinkTypeListName + "')/items?$select=Price&$filter=(Drink/Title eq '" + drinks + "') and (Title eq '" + drinkType + "')";
        getReqData(drinkTypeListURL, function (data) {
            var items = data.d.results;
            if (items.length > 0) {
                var price = "";
                for (var i = 0; i < items.length; i++) {
                   $("input[title='Price']").val(items[i].Price);
                }
            }
        },
            function (data) {
                //alert("Some error occurred in getting price");
            });
    }
    Here "Price" is the text value which is pulled from lookup list and displayed in the final list where the lookup is implemented.

    I hope this helps you!


    Please click the "Mark as Answer" button if this post solves your problem or "Vote As helpful if it was helpful! :)
    Explore the SharePoint


    Tuesday, July 11, 2017 6:44 PM
  • Hi,

    I modify the code as below for your reference:

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	var listName="ListB";
    	$("select[title='ClientName']").change(function(){
    		if($(this).val()!=0){
    			var requestUri = _spPageContextInfo.webAbsoluteUrl +
                          "/_api/Web/Lists/getByTitle('"+listName+"')/items?$filter=Title eq '"+$(this).find("option:selected").text()+"'";
    
    			// execute AJAX request
    			$.ajax({
    				url: requestUri,
    				type: "GET",
    				headers: { "ACCEPT": "application/json;odata=verbose" },
    				success: function (data) {
    					if(data.d.results.length>0){
    						var field=data.d.results[0];
    						var classField=field.Class;
    						var country=field.Country;
    						$(".ms-standardheader nobr:contains('ClientName:Class')").closest("tr").remove();
    						$(".ms-standardheader nobr:contains('ClientName:Country')").closest("tr").remove();
    						$("select[title='ClientName']").closest("tr").after("<tr><td width='113' class='ms-formlabel' nowrap='true' valign='top'><h3 class='ms-standardheader'><nobr>ClientName:Class</nobr></h3></td><td width='350' class='ms-formbody' valign='top'><span dir='none'>"+classField+"</span></td></tr>"+	
    						"<tr><td width='113' class='ms-formlabel' nowrap='true' valign='top'><h3 class='ms-standardheader'><nobr>ClientName:Country</nobr></h3></td><td width='350' class='ms-formbody' valign='top'><span dir='none'>"+country+"</span></td></tr>");
    					}
    				},
    				error: function () {
    					//alert("Failed to get details");
    				}
    			});
    		}else{
    			$(".ms-standardheader nobr:contains('ClientName:Class')").closest("tr").remove();
    			$(".ms-standardheader nobr:contains('ClientName:Country')").closest("tr").remove();
    		}
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Proposed as answer by Maruthachalam Wednesday, July 12, 2017 1:02 PM
    • Marked as answer by SB Ali Wednesday, July 12, 2017 5:00 PM
    Wednesday, July 12, 2017 9:57 AM
    Moderator
  • hi,

    Thanks, this is what i was looking for.

     the above script  is working


    sal

    Wednesday, July 12, 2017 4:59 PM