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 6 hours ago in United States

Atlassian acquires AgileCraft

         Good Day, Bad bad traffic, not sure why!!!! 1/2 hour commute took me 2 hours today 🤯 What helped me is that I kept browsing LinkedIn until...

29 views 1 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