Change textboxes from dropdown value

igor221189 · March 15, 2011

Hello,

Would it be possible to add text to textboxes with the click of button?

The page contains three dropdowns (category, sub category, items). First, user selects a category in the dropdown. In the second dropdown, all items that are held in that category are displayed. In the third dropdown, all items that are held in the sub category are displayed. Example: Service Delivery – Help desk – HELP1

User should be able to select an item from the last dropdown box, press a button and all attributes (background, qualifications, professional skills) for that item should be displayed in textboxes underneath.

I was able to create connected dropdowns using JavaScript. Items in the last dropdown are also held under attribute ‘role_id’ in the ‘role table.

CREATE TABLE role (
  role_id INTEGER(5) UNSIGNED NOT NULL AUTO_INCREMENT,
  background VARCHAR(5000) NULL,
  tasks VARCHAR(5000) NULL,
  knowledge VARCHAR(5000) NULL,
  training VARCHAR(5000) NULL,
  professional VARCHAR(5000) NULL,
  qualifications VARCHAR(5000) NULL,
  PRIMARY KEY(role_id)
)

I’m using MySQL for the database, PHP for script manipulation and JavaScript for the dropdowns. Looking at examples on the Web, Ajax seems to be most appropriate solution. Based on 'role_id', attributes of the item would need to add to empty text boxes.

Here is the code I’ve done so far. Any examples or advice is greatly appreciated.

Many thanks.

  Role.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Role details - BCS UPDS Web application</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" type="text/css" href="pagestyle.css" />
<script type="text/javascript" src="role_selection.js"></script>

</head> 


<p>Logged in as Student</p>

<p id="pos_help"><a style="text-decoration: none"href="#">Help</a></p>
<p id="pos_logout"><a style="text-decoration: none" href="#">Log out</a></p>


<h3 id="pos_header">BCS UPDS Web application</h3>


<table border="0" cellpadding="0" cellspacing="0" id="pos_list"><tr><td>
<ul id="button"> 
    <li><a href="personal.html">Personal details</a></li>
    <li><a href="role.html">Roles</a></li>
    <li><a href="job.html">Job description</a></li>
    <li><a href="#">Career Development Plan (CDP)</a></li>
    <li><a href="#">End Cycle Review</a></li>
    <li><a href="#">Help</a></li>
</ul>
</td></tr></table>


<div class="box1">
<form action="role.php" method="post" id="role">

<table width="443" border="0">

<tr>
<td style="text-align: left;">Select Function Grouping</td>
<td style="text-align: left;">
<select name="function_grouping" id="function_grouping" onchange="setFunction();">
  <option value="Systems Development and Maintenance">Systems Development and Maintenance</option>
  <option value="Service Delivery">Service Delivery</option>
  <option value="Technical Advice and Consultancy">Technical Consultancy and Advice</option>
  <option value="Quality">Quality</option>
  <option value="Customer Relations">Customer Relations</option>
  <option value="Education and Training">Education and Training</option>
  <option value="Support and Administration">Support and Administration</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">Select Function</td>
<td style="text-align: left;">
<select name="role_level" id="role_level" onchange="setRoleLevel();">
  <option value="">Select Function Grouping</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">Select Role Level</td>
<td style="text-align: left;">
<select name="function2"  id="function2">
  <option value="function">Select Function Grouping</option>
</select>
</td>

</tr>
</table>

<input type="submit" name="Submit" value="Select role" id="selectrole"  /></p>

<br></br>

<fieldset id="fieldset">
<legend id="legend">Background</legend>
<p>
  <label for="background"></label>
  <textarea name="textarea" cols="71" rows="10" id="backgroundtext">
</textarea></p>
</fieldset>
<br></br>


<fieldset id="fieldset">
<legend id="legend">Tasks</legend>
<p>
   <label for="tasks"></label>
   <textarea name="textarea" cols="71" rows="10" id="taskstext">
</textarea></p>
</fieldset>
<br></br>


<fieldset id="fieldset">
<legend id="legend">Knowledge and Skills</legend>
<p>
   <label for="knowledge"></label>
   <textarea name="textarea" cols="71" rows="10" id="knowledgetext">
   </textarea></p>
</fieldset>
<br>  </br>



<fieldset id="fieldset">
<legend id="legend">Training</legend>
<p>
   <label for="training"></label>
   <textarea name="textarea" cols="71" rows="10" id="trainingtext">
</textarea></p>
</fieldset>
<br></br>



<fieldset id="fieldset">
<legend id="legend">Professional Development Activities</legend>  
<p>
   <label for="professional"></label>
   <textarea name="textarea" cols="71" rows="10" id="professionaltext">
   </textarea></p>
</fieldset>  
   <br></br>


<fieldset id="fieldset">
<legend id="legend">Qualifications</legend> 
<p>
   <label for="qual"></label>
   <textarea name="textarea" cols="71" rows="10" id="qualtext">

   </textarea></p>
</fieldset>
<br></br>

<p><input type="submit" name="Submit" value="Add role to job description" id="addjobdesc" /></p>

</form>
</div>
</body>
</html>

 role_selection.js

var function1 = new Array();

function1['Systems Development and Maintenance'] = new Array('Applications Support','Business Analysis','Data Analysis','Database Design', 'Documentation/Technical Authoring','Porting/Software Integration','Programming/Software Creation','Safety Engineering','Software Engineering','Systems Design','Systems Integration','Software Testing','Web Site Specialism');
function1['Service Delivery'] = new Array('Computer Operations','Database Administration','Hardware/Software Installation','Help Desk','Installation and Implementation','Network Administration and Support','Network Operations','Service Level Monitoring','User Support'); 
function1['Technical Advice and Consultancy'] = new Array('System Ergonomics Evaluation');
function1['Quality'] = new Array('Quality Standards');
function1['Customer Relations'] = new Array('Marketing','Sales Support'); 
function1['Education and Training'] = new Array('Education and Training Delivery');
function1['Support and Administration'] = new Array('Change Management','Configuration Management','Project Office','Security Administration');



var rolelevel = new Array();

rolelevel['Systems Development and Maintenance'] = new Array();
rolelevel['Systems Development and Maintenance']['Applications Support'] = new Array('ASUP1','ASUP2');
rolelevel['Systems Development and Maintenance']['Business Analysis'] = new Array('ANAL2');
rolelevel['Systems Development and Maintenance']['Data Analysis'] = new Array('DTAN1','DTAN2');
rolelevel['Systems Development and Maintenance']['Database Design'] = new Array('DBDS1','DBDS2');
rolelevel['Systems Development and Maintenance']['Documentation/Technical Authoring'] = new Array('DOCM1','DOCM2');
rolelevel['Systems Development and Maintenance']['Porting/Software Integration'] = new Array('PORT2'); 
rolelevel['Systems Development and Maintenance']['Programming/Software Creation'] = new Array('PROG1','PROG2');
rolelevel['Systems Development and Maintenance']['Safety Engineering'] = new Array('SFEN2');
rolelevel['Systems Development and Maintenance']['Software Engineering'] = new Array('SENG1','SENG2');
rolelevel['Systems Development and Maintenance']['Systems Design'] = new Array('DESN2');
rolelevel['Systems Development and Maintenance']['Systems Integration'] = new Array('SIST1','SIST2');
rolelevel['Systems Development and Maintenance']['Software Testing'] = new Array('TEST1','TEST2');
rolelevel['Systems Development and Maintenance']['Web Site Specialism'] = new Array('WBSP1','WBSP2');

rolelevel['Service Delivery'] = new Array();
rolelevel['Service Delivery']['Computer Operations'] = new Array('COPS0','COPS1');
rolelevel['Service Delivery']['Database Administration'] = new Array('DBDS1','DBDS2');
rolelevel['Service Delivery']['Hardware/Software Installation'] = new Array('HSIN1','HSIN2');
rolelevel['Service Delivery']['Help Desk'] = new Array('HELP0','HELP1','HELP2');
rolelevel['Service Delivery']['Installation and Implementation'] = new Array('INIM1','INIM2');
rolelevel['Service Delivery']['Network Administration and Support'] = new Array('NTAS2');
rolelevel['Service Delivery']['Network Operations'] = new Array('NTOP0','NTOP1','NTOP2');
rolelevel['Service Delivery']['Service Level Monitoring'] = new Array('SLMO2');
rolelevel['Service Delivery']['User Support'] = new Array('USUP1','USUP2');


rolelevel['Technical Advice and Consultancy'] = new Array();
rolelevel['Technical Advice and Consultancy']['System Ergonomics Evaluation'] = new Array('HCEV2');

rolelevel['Quality'] = new Array();
rolelevel['Quality']['Quality Standards'] = new Array('QUST1','QUST2');

rolelevel['Customer Relations'] = new Array();
rolelevel['Customer Relations']['Marketing'] = new Array('MKTG2');
rolelevel['Customer Relations']['Sales Support'] = new Array('SSUP1','SSUP2');

rolelevel['Education and Training'] = new Array();
rolelevel['Education and Training']['Education and Training Delivery'] = new Array('ETDL2');

rolelevel['Support and Administration'] = new Array();
rolelevel['Support and Administration']['Change Management'] = new Array('CHMG2');
rolelevel['Support and Administration']['Configuration Management'] = new Array('CFMG2');
rolelevel['Support and Administration']['Project Office'] = new Array('PROF2');
rolelevel['Support and Administration']['Security Administration'] = new Array('SCAD2');




function setFunction() {
  functiongSel = document.getElementById('function_grouping');
  rolelevelList = function1[functiongSel.value];
  changeSelect('role_level', rolelevelList, rolelevelList);
  setRoleLevel();
}

function setRoleLevel() {
  functiongSel = document.getElementById('function_grouping');
  functionSel = document.getElementById('role_level');
  functionList = rolelevel[functiongSel.value][functionSel.value];
  changeSelect('function2', functionList, functionList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setFunction();
});

trinaryoc · March 15, 2011

Do a search for Dynamic Dropdown. What you're looking for is JS. There are ways to achieve this with a server-side scripting language like PHP, but honestly it's qmoother and quicker with JS.

Then just concat the variables and drop them into your textbox with document.form.variable.value=

igor221189 · March 15, 2011

JavaScript is already being for dropdowns.

What I need to do when selecting last dropdown, press the button underneath it. Then, attributes will be displayed in textboxes from 'role' table. The last dropdown value is also primary key (role_id) in the role table. I need to check the value in 'role_id' against the value in the dropdown. When matched, attributes(background,qualifications etc.) will be displayed in textboxes underneath.

Sign In

Change textboxes from dropdown value

Recommended Posts

igor221189

Link to comment

Share on other sites

trinaryoc

Link to comment

Share on other sites

igor221189

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information