If you have a form that has multiple tabs, or other display sections, you might have a need to display data that is entered on one part of the form on other parts. For example the first tab could allow the user to enter a name, this name may then be displayed as read only on other tabs.

There are various methods to do this, but if the read only display is positioned in different parts of the form and in more than one place, you might want to have separate elements for each display.

This little bit of jQuery will allow any changes to the data to be automatically copied to all of the relevant read only display elements.

There are three steps to implement this functionality:

1. Include the following jQuery in your form (e.g. via a js file)

$(document).ready(function () {
  // On change event for any element with the hasDisplayElement 
  // class
  $(".hasDisplayElement").change(function () {
    updateElementDisplay($(this));
  });

  // Initialise the display element values
  $(".hasDisplayElement").each(function () {
    updateElementDisplay($(this));
  });
});

// Any element with a hasDisplayElement class will check on change
// for other elements with the classes isElementDisplay id, where 
// id is the id of the triggering element (the one with the 
// hasDisplayElement class) if using @HtmlTextFor, etc. the id will 
// be the same as the model property name e.g.
//  @Html.TextAreaFor(model => model.Description, 
//    new { rows = "8", @class = "form-control asDisplayElement"})
//
// changes will update value in any element like this:
// <textarea class="form-control isDisplayElement Description" 
//    rows="8" disabled="true">@Model.Description</textarea>

function updateElementDisplay(element) {
  var id = element.attr("id");
  var displayElements = $(".isDisplayElement." + id)

  if (element.is("select")) {
    var value = element.children("option:selected").text();
    displayElements.val(value);
  }
  else
    displayElements.val(element.val());
}

1. Add the “hasDisplayElement” class to all editors that will need to update corresponding display elements elsewhere on the form. Also make sure that all the editor elements have an id.
2. Add the class “isDisplayElement” followed by the id of the relevant editor element to all of the display elements. By including the id of the editor as a class on the display element, the jQuery script will be able to find the correct display elements whenever a edited value is changed.

Example:

In a MVC project, I needed to displayed the selected Start Date on other parts of the form. The editor for the start date was defined as:

@Html.TextBoxFor(model => model.StartDate, new { @class = "hasDisplayElement" })

MVC will automatically give the text box element an Id of “StartDate”

Elsewhere on the form, where I needed to display the specified start date, I used:

<input type="text" class="isDisplayElement BenefitStartDate" disabled="disabled" />

N.B. The updateElementDisplay method uses the jQuery val() method to update the display elements. Therefore, you need to ensure that any elements that have the “isDisplayElement” class support val() (such as Input elements). If you want to use other elements, such as div, you will need to modify the updateElementDisplay method to detect these and use text() instead.