How to populate text field based on selection from a selector dynamically

[Sachin Manohar]

Hi, 

I have a selector in one of the application forms that I am working on. We intend to give a list of available projects in that selector. Once the user selects the project from the drop down selector, two text boxes need to get populated automatically. 

1. Based on the project selected, its corresponding groups should be displayed to the user and this selection should allow multiple values to be selected. 

2. Based on the project selected, its corresponding owner name to get auto populated in another text box (BI owner).

Could somebody help me with the source code for the above please? I will paste the current source code below. 

<script>
AJS.toInit(function(){
	/* check browser
	*/
	if(window.RJS) { RJS.CONFLUENCE.isSupportBrowser(["chrome","firefox","safari"]); };
	/* aui Init 
	*/
	if(window.RJS) { RJS.CONFLUENCE.auiInit(); };
});
</script>

<!-- Generated by R-Atlassian Team (request form creation tool 0.9.14) -->


<input type="hidden" name="project" value="SUPERDB" />

<div>
	<div class="form_title" >Application Form</div>
<div>


</div>
</div>
<div class="field-group" data-jira="description:text">
	<label data-jira="title">Applicant Name<span class="aui-icon icon-required"></span></label>
	<input type="text" class="autocomplete-user text medium-long-field" name="textfield-1306" data-aui-validation-field="" data-aui-validation-required="required" data-aui-validation-when="keyup"  placeholder="long-account" multiple />
	<span class="aui-icon aui-icon-small aui-iconfont-user"></span>
	<span class="textfield-1306-spinner" style=""></span>
	<div class="description">	
	</div>
</div>
<div class="field-group" data-jira="description:text">
	<label data-jira="title">L4 Manager Name<span class="aui-icon icon-required"></span></label>
	<input type="text" class="autocomplete-user text medium-long-field" name="textfield-1307" data-aui-validation-field="" data-aui-validation-required="required" data-aui-validation-when="keyup"  placeholder="long-account"  />
	<span class="aui-icon aui-icon-small aui-iconfont-user"></span>
	<span class="textfield-1307-spinner" style=""></span>
	<div class="description">	
	</div>
</div>

<div class="field-group" data-jira="description:text">
	<label data-jira="title">Applicant's Department<span class="aui-icon icon-required"></span></label>
	<input type="text" class="text medium-long-field" name="textfield-1802" data-aui-validation-field="" data-aui-validation-required="required" data-aui-validation-when="keyup" placeholder="Example: Data Platform Department" />
	<div class="description">
	</div>
</div>

<div class="field-group" data-jira="description:textarea">
	<label data-jira="title">Long account<span class="aui-icon icon-required"></span></label>
	<textarea class="textarea long-field" name="textarea-1720" data-aui-validation-field="" data-aui-validation-required="required" data-aui-validation-when="keyup" style="height:215px; multiple" placeholder="Please mention the long accounts which need to be created/updated 
Note: for multiple accounts, line separate Full accounts, example:
  huyue.fan
  ts-eiji.sato
  mihoko.taroura"></textarea>
	<div class="description">
	</div>
</div>

<div class="field-group" data-jira="description:text">
	<label data-jira="title">BI Owner<span class="aui-icon icon-required"></span></label>
	<input type="text" class="autocomplete-user text medium-long-field" name="textfield-1308" data-aui-validation-field="" data-aui-validation-required="required" data-aui-validation-when="keyup"  placeholder="long-account"  />
	<span class="aui-icon aui-icon-small aui-iconfont-user"></span>
	<span class="textfield-1308-spinner" style=""></span>
	<div class="description">	
	</div>
</div>
<div class="field-group" data-jira="description:select">
	<label data-jira="title">PROJECTS<span class="aui-icon icon-required"></span></label>
	<select class="select" name="combo-2190" data-aui-validation-field="" data-aui-validation-required="required" data-aui-validation-when="change">
		<option value="">(Please select a item)</option>
		<name><option value="	1	">	PROJECT 1	</option></name>
		<option value="	2	">	PROJECT 2 </option>
		<option value="	3	"> PROJECT 3	</option>

	</select>	
</div>


<div class="field-group">
	<button id="submit" class="aui-button submit" onclick=""><span class="aui-icon aui-icon-small aui-iconfont-jira">Regist</span> Send Request to JIRA</button>
</div>

<script>
/* Submit Action
*/
var user_submit = function(){

	AJS.$(":hidden[name=description]").remove();
	AJS.$(":hidden[name=reporter]").remove();

	/* Description の自動生成と設定
	*/
	AJS.$("<input>", {
		type: "hidden",
		name: "description",
		value: RJS.CONFLUENCE.fairingDescription(".aui")
	}).appendTo("#form_request");
};
</script>