Show Calculated fields on New and Edit Form of SharePoint 2013 List Form

Question

I have a SharePoint List with some columns. I have following scenario:

ColA: Test1, Test2, Test3
ColB: 0, 10, 55
ColC: $0, $12, $60

Col A is a dropdown. Col B and C are calculated fields. Based on the value selected in ColA, ColB and ColC values will be auto populate. Since ColB and C are calculate columns, they are displayed in the list as well as in SharePoint display form. I want to show ColB and C fields in read only mode on SharePoint new and Edit form for users. I am using SharePoint List form not Infopath form. Looking for suggestions to achieve this functionality.

Answer 1

You could use jquery to append readonly input to work as lookup column.

Here is simple demo script for your reference, you need update the update logic based on your logic.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var lookupValue = $('input[title="TxTField"]').val();            
            $('table.ms-formtable').append('<tr id="LookupColumnTR"><td class="ms-formlabel" nowrap="true" valign="top"><h3 class="ms-standardheader"><nobr>LookupColumn</nobr></h3></td><td><input disabled="disabled" type="value" value="' + lookupValue + '" class="text_box" /></td></tr>');

            $('input[title="TxTField"]').change(function () {
                var lookupValue = $(this).val();
                $('table.ms-formtable tr#LookupColumnTR').remove();
                $('table.ms-formtable').append('<tr id="LookupColumnTR"><td class="ms-formlabel" nowrap="true" valign="top"><h3 class="ms-standardheader"><nobr>LookupColumn</nobr></h3></td><td><input disabled="disabled" type="value" value="' + lookupValue + '" class="text_box" /></td></tr>');
            })

        })
    </script>