0

I need to add the word "Jersey" in red/bold to the top of the Display Form page on a SharePoint online list when 'Jersey' is selected from the 'Location' dropdown field.

Please could you let me know if this is possible? And how I would achieve this? I understand that this could be possible with Javascript however I have limited knowledge of this.

2
  • you can use powerapps – FredericDietrich Dec 12 '19 at 15:35
  • we would prefer to us javascript if possible as the list is current set to classic experience as we have quite a lot of other javascript embedded on to the page. – SamB Dec 12 '19 at 15:57
2

Sample test demo for your reference(insert script editor webpart into your list display form and insert the script into it).

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var location = $("span:contains('Location')").closest('tr').find('#SPFieldChoice')[1].innerText;
            if ($('#customTip').length < 1) {
                var customTip = $('<div id="customTip" style="min-width:300px;color:red;font-weight: bold;text-align:center">' + location + '</div>');
                if (location == "Jersey") {
                    $('table.ms-formtable').parent().prepend(customTip);
                }
            }
        })
    </script>

enter image description here

Update:

Edit form.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var location = $('select[id^="Location"] :selected').text();;
            if ($('#customTip').length < 1) {
                var customTip = $('<div id="customTip" style="min-width:300px;color:red;font-weight: bold;text-align:center">' + location + '</div>');
                if (location == "Jersey") {
                    $('table.ms-formtable').parent().prepend(customTip);
                }
            }
        })
    </script>
3
  • That's great thanks Lee. Is it possible to add this to the 'EditForm.aspx' page too? I have tried using the same script, however it doesn't appear to work on the Edit Form. – SamB Dec 16 '19 at 11:21
  • 1
    Check my update. – Lee_MSFT Dec 18 '19 at 8:48
  • That is perfect, thanks very much Lee! – SamB Dec 18 '19 at 11:10
2

Add a content editor webpart in your page and add the below code, we are creating an empty div - lblLocation and on value change in "Location" drop-down, we get the selected value from the drop-down and setting it to the div - lblLocation.

<div id="lblLocation" style="font-weight: bold; color: red;"></div>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("select[title*='Location']").change(function() {
        $('#lblLocation').append($('option:selected', this).text());        
    }
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.