Need to hide or show field based on option select in UI Page

[Sarah Bouil]

Hi,

I have a UI Page as below. I have a requirement when I select  'incident' in Incident Template(reference to incident table) field, the Users field and Download data button should be visible and the Users field and Download data button should hide if there is no incident selected in Incident Template.  Kindly help me with code to achieve this.

[Sarah Bouil]

Hi Allen,

Thank you for your reply. Below is the HTML in UI Page.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div style="color:#333333;">
<div class="panel panel-default">

<div class="panel-heading">
<span class="heading">Export Incident</span>
</div>

<div class="panel-body">

<form class="form-horizontal">

<div class="row">
<div class="col-sm-8 form-group">

<label class="control-label col-sm-4" for="template">
Incident Template
</label>

<g:ui_reference label="Incident Template" name="incidenttemplate" table="incident" query="active=true" field="name" />
</div>
</div>

<div class="col-sm-8 form-group">
<div>
<label class="control-label col-sm-4" for="offering">
Users
</label>

<g:macro_invoke macro="lightweight_glide_list2" id="users" reference="sys_user" can_write="true" control_name="QUERY:active=true"/>
</div>
</div>


<div class="row" style="margin: 10px;margin-left: 25px;">
<div class="col-sm-8">
<button class="btn btn-primary" onclick="update_ticket()">Download data</button>
</div>
</div>
</form>
</div>
</div>
</div>
</j:jelly>

Could you please help me with how to associate onChange to the Incident Template field?

And Download data is a button, how to get the field name of button to update below.

gel('field_name').style.display = '';