How do I dynamically fill a field in my input when selecting something in another field?

Currently the plugin opens an input dialog. This dialog makes the user choose a project and some other values. The project input field is a dropdownlist and diplays all available projects.
I want the other values to depend on what is chosen in project.

For example:

Project dropdown list contains [TP1, TP2, TP3]

When the user selects one of the options I want another dropdown, let's assume it's called "Components", to contain possibilities depending on the "Project" field.

If the user chooses TP1 I want to fill the "Components" dropdown list with what is available for project TP1.

This is the current input.vm :

<h2 class="dialog-title">Create Action</h2>
<form class="aui" id="uniqueid1" action="${req.contextPath}/secure/CreateAction!AfterInput.jspa?id=${id}" method="post">
       <form>
       <div class="content-body">
              <div class="field-group">
              <label>Project: <span class="aui-icon icon-required"></span></label>
              <select data-container-class="project-ss" class="select project-field" id="param" name="project">
              #if (!$projects.empty)
              #foreach ($pr in $projects)
                     #set ($avatarUrl = "/secure/projectavatar?pid=$!{pr.id}&size=small" )
                     <option style="background-image:url(#getNormalizedUrl($avatarUrl))" #if ($project && $project == $pr.id) selected="selected"#end id="param" name="project" value="$!{pr.key}">
                    $textutils.htmlEncode($pr.name)
                     </option>
              #end
              #end
              </select>
              </br></br>
              <label>Summary: <span class="aui-icon icon-required"></span></label>
              <input type="text" id="param" name="summary" value="" size="60"/>
              </br></br>
              <label>Components: <span class="aui-icon icon-required"></span></label>
              <select data-container-class="project-ss" class="select project-field" id="param" name="project">
              #if (!$components.empty)
              <option #if ($component && $component == $co.id) selected="selected"#end id="param" name="project" value="$!{co.id}"></option>
              #foreach ($co in $components)
                     <option #if ($component && $component == $co.id) selected="selected"#end id="param" name="project" value="$!{co.id}">
                    $textutils.htmlEncode($co.name)
                     </option>
              #end
              #end
              </select>
              </br></br>
              </div>
       </div>
       <div class="buttons-container content-footer">
              <div class="buttons">
                     <input class="button" type="submit" value="Create" />
                     <a href="${req.contextPath}/browse/${id}" class="cancel">Cancel</a>        
              </div>
       </div>
</form>

Thanks in advance

1 answer

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted 4 hours ago in Canada

Happy New Year - First AUG of the year - great success

Hi Everyone, Hope everyone had a great holiday season and is ready for an exciting 2019.  We had our first AUG last night featuring Tempo Timesheets.  A great presentation and lots of int...

9 views 0 0
View post

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you