Access to lisf of model object by EL in javascript

Question

In my application I want to obtain the data of the model object that was set in the session from controller by using select box in jsp.

below if the actual form that I'm using

I have set something like this in my controller

List<ContactPersonEntity> contactlist = service.getAllContactPerson(1);
session.setAttribute("contactlist", contactlist);

and here the model

    private Integer company_code;

    private Integer cp_code;

    @NotBlank
    @Size(min = 0, max = 50)
    private String cp_name;

    @NotBlank
    @Email
    @Size(min = 0, max = 50)
    private String email;

    private Integer verification_status;

    @NotBlank
    @Size(min = 0, max = 30)
    private String department;

    @NotBlank
    @Size(min = 0, max = 30)
    private String phone;    

and my JSP is like this

                <!--Contact Information-->
                <div class="row">
                    <div class="col-md-12">
                        <div class="box box-default">
                            <div class="box-header with-border">
                                <h3 class="box-title">Contact Information</h3>
                                <div class="box-tools pull-right">
                                    <button class="btn btn-box-tool" data-widget="collapse">
                                        <i class="fa fa-minus"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- /.box-header -->
                            <div class="box-body dt-space">

                                <c:set var="phone_num" value="${contactperson.phone}" />
                                <c:set var="mail" value="${contactperson.email}" />

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Contact Person:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <select class="form-control" name="jp_entity.cp_code"
                                                        id="contact_person" onchange="chkContactPerson()" onload="onStart()">
                                                        <c:forEach items="${contactlist}" var="contactperson">
                                                            <option value="${contactperson.cp_code}">${contactperson.cp_name}</option>
                                                        </c:forEach>

                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Phone:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" name="phone"
                                                        id="phone" placeholder="Phone" disabled>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>


                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Email:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <input type="text" class="form-control" id="email"
                                                        name="email" placeholder="Email" disabled>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Website:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <textarea class="form-control text_area"
                                                        style="resize: none" id="exampleInputUser"
                                                        placeholder="Your web address here"
                                                        name="jp_entity.website"></textarea>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                            <p class="help-block">
                                                <form:errors path="jp_entity.website" cssClass="error"></form:errors>
                                            </p>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="form-group">
                                    <dl class="dl-horizontal">
                                        <dt>
                                            <label>Address:</label>
                                        </dt>
                                        <dd>
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <textarea class="form-control text_area"
                                                        id="exampleInputUser" placeholder="Your address here"
                                                        name="jp_entity.address"></textarea>
                                                </div>
                                                <div class="col-md-4">
                                                    <p class="help-block">The option is required!</p>
                                                </div>
                                            </div>
                                            <p class="help-block">
                                                <form:errors path="jp_entity.address" cssClass="error"></form:errors>
                                            </p>
                                        </dd>
                                    </dl>
                                </div>

By select the Contact person the information in email and phone text box will be automatically filled with the matching information.

The question is how can I pass down the information of the object that being selected to javascript? I'm stuck here, I have no idea how to pass down the list of object to javascript via EL since it completely run on the 2 different environment. And if there are better approach, please kindly show me the way, I'm pretty new to this though. thanks.

Answer 1

Just let JSP print those values as data attributes of the <option> element.

Given a,

<select>
    <option disabled selected />
    <c:forEach items="${contacts}" var="contact">
        <option value="${contact.code}">${contact.name}</option>
    </c:forEach>
</select>

extend it as below:

<select>
    <option disabled selected />
    <c:forEach items="${contacts}" var="contact">
        <option value="${contact.code}"
                data-phone="${contact.phone}" 
                data-email="${contact.email}">${contact.name}</option>
    </c:forEach>
</select>

Now you have the desired information in the HTML DOM tree. You can use JS to grab that information from the selected option and set it as value of the disabled inputs, when the selection has changed.

Given a,

<select>
    ...
</select>
<input id="phone" disabled />
<input id="email" disabled />

extend it as below:

<select onchange="changeContactData(this)">
    ...
</select>
<input id="phone" disabled />
<input id="email" disabled />

function changeContactData(select) {
    var option = select.options[select.selectedIndex];
    var phone = option.getAttribute("data-phone");
    var email = option.getAttribute("data-email");

    document.getElementById("phone").value = phone;
    document.getElementById("email").value = email;
}

The this argument basically refers the HTML DOM object of the current element. In the onchange of <select> element we're thus passing the <select> element itself into the JS function. This will represent an instance of the HTMLSelectElement interface. This has among others an options and selectedIndex properties, giving you the opportunity to grab the currently selected <option>. The remainder should speak for itself: grab the attribute and set it as value of the desired input element.