[SOLVED] Help with populating drop down

freakus_maximus · May 10, 2007

I have my form almost working like I need it to but with one problem I cannot seem to get working right. Pardon my java-noobness.

What I want to happen is that after a user selects a Primary Analyst, when they click the "add task" to dynamically create the new row, the "Assigned To" dropdown defaults to the Primary Analyst. But I still need the dropdown list of options available in case the task is not assigned to the Primary Analyst.

For example: If I select "Jane Doe" as the Primary Analyst, then click "Add task" the dropdown for "Assigned To" reflects "Jane Doe".

Any help would be appreciated. I'm lost at this point...

This is the line that needs to be updated based on the value of the Primary Analyst dropdown (id="analyst" in the code):

tdropdownfield.options[0].selected = true;

Here is the full code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<title></title>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
var numrows = 1; 
function drawoptions()
{
  var tbl = document.getElementById("task_tbl");
  var targetnumrows = parseInt(document.getElementById("numoptions").value + "");
  // if they've selected to show more rows, then we add more rows
  if(targetnumrows > numrows)
  {
      for(var i=0; i<targetnumrows - numrows; i++)
      {
          var row = tbl.insertRow(tbl.rows.length);

          // create the checkbox cell
          var cell = row.insertCell(0);
          var checkboxfield = document.createElement("input");
          checkboxfield.setAttribute("type", "checkbox");
          checkboxfield.setAttribute("id", "Checkbox[" + (numrows+i) + "]");
          checkboxfield.setAttribute("name", "Checkbox[" + (numrows+i) + "]");
          cell.appendChild(checkboxfield);
          cell.setAttribute('align','center');
         
         // create the drop down cell
          cell = row.insertCell(1);
          var tdropdownfield = document.createElement("select");
          tdropdownfield.setAttribute("id", "Tdrop[" + (numrows+i) + "]");
          tdropdownfield.setAttribute("name", "Tdrop[" + (numrows+i) +"]");           
          cell.appendChild(tdropdownfield);
          cell.setAttribute('align','center');
          tdropdownfield.options[0] = new Option("John Smith","John Smith");
          tdropdownfield.options[1] = new Option("Jane Doe","Jane Doe");
          tdropdownfield.options[0].selected = true;

          
          // create the text cell
          cell = row.insertCell(2);
          var tdescfield = document.createElement("textarea");
          tdescfield.setAttribute("cols", "60");
          tdescfield.setAttribute("rows", "3");
          tdescfield.setAttribute("id", "Tdescr[" + (numrows+i) + "]");
          tdescfield.setAttribute("name", "Tdescr[" + (numrows+i) +"]");          
          cell.appendChild(tdescfield);
      }
  }
  // they've decided to show less rows, so we remove some
  else
  {
      for(var i=0; i<numrows - targetnumrows; i++)
      {
          tbl.deleteRow(tbl.rows.length - 1);
      }
  }

  numrows = tbl.rows.length - 1;
  document.getElementById("numoptions").value=tbl.rows.length;  
  //alert(numrows);
}

window.onload = drawoptions;

//]]>
</script>
<form action="../na/na_entry_proc.php" method="post">
<table id="Table1" cellspacing="1" cellpadding="1" width="95%"
align="center" border="0">
<tbody>
<tr>
<td width="25%">
<p align="center">Primary Analyst</p>
</td>
<td>
<p align="center">Change Request Number</p>
</td>
<td>
<p align="center">Date</p>
</td>
</tr>
<tr>
<td>
<p align="center"><select id="analyst" style="WIDTH: 110px" name=
"analyst">
<option value="" selected="selected">Select...</option>
<option value="John Smith">John Smith</option>
<option value="Jane Doe">Jane Doe</option>
</select></p>
</td>
<td>
<p align="center"><input id="cr_num" style="WIDTH: 100%" name=
"cr_num" /></p>
</td>
<td>
<p align="center"><input id="date" style=
"WIDTH: 75px; HEIGHT: 22px" size="10" name="date" /></p>
</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
<input id="numoptions" type="hidden" value="1" />
<table class="bodymain" id="task_tbl" cellspacing="1" cellpadding=
"1" width="95%" align="center" border="1">
<tbody>
<tr>
<td width="10%" bgcolor="#FFCC00">
<p align="center"><strong>Complete</strong></p>
</td>
<td bgcolor="#FFCC00">
<p align="center"><strong>Assigned To</strong></p>
</td>
<td bgcolor="#FFCC00" colspan="2">
<p align="center"><strong>Description of Task</strong></p>
</td>
</tr>
</tbody>
</table>
  <a href="javascript:drawoptions();" align="center">add
task</a>
<p>  Summary of Build (to be completed by Network
Analyst)<br />
  
<textarea id="crsummary" style="WIDTH: 95%; HEIGHT: 104px" name="crsummary" rows="6" cols="81" align="center">
</textarea>
<br />
  <input id="Submit1" type="submit" value="Submit" name="Submit1" /> <input id="Reset1" type="reset" value="Reset"
name="Reset1" /></p>
</form>
</body>
</html>

fenway · May 10, 2007

I'll need to see the HTML output being produced.

freakus_maximus · May 10, 2007

I have attached a jpg of the output when I run the html. I selected "Jane Doe" as the primary and then clicked "add task" twice just to show a few rows. The new rows populate with the default (first in the list, the way it is coded now) of "John Smith".

Thanks Fenway!

[attachment deleted by admin]

fenway · May 10, 2007

Sorry, I meant the actual HTML of those new drop-downs... also, are you sure you have a handle to the right object?

freakus_maximus · May 10, 2007

Hmm...well they are generated by the "add task" link in my code I posted. In the drawoptions section I have this:

          // create the drop down cell
           cell = row.insertCell(1);
           var tdropdownfield = document.createElement("select");
           tdropdownfield.setAttribute("id", "Tdrop[" + (numrows+i) + "]");
           tdropdownfield.setAttribute("name", "Tdrop[" + (numrows+i) +"]");           
           cell.appendChild(tdropdownfield);
           cell.setAttribute('align','center');
           tdropdownfield.options[0] = new Option("John Smith","John Smith");
           tdropdownfield.options[1] = new Option("Jane Doe","Jane Doe");
           tdropdownfield.options[0].selected = true;

This peice just creates the dropdown in a cell (all of the code is in the original post). I have brought it up and tried to do a view source, but that does not show me the html code of the dropdowns.

fenway · May 10, 2007

Hmm...well they are generated by the "add task" link in my code I posted. In the drawoptions section I have this:
          // create the drop down cell
           cell = row.insertCell(1);
           var tdropdownfield = document.createElement("select");
           tdropdownfield.setAttribute("id", "Tdrop[" + (numrows+i) + "]");
           tdropdownfield.setAttribute("name", "Tdrop[" + (numrows+i) +"]");           
           cell.appendChild(tdropdownfield);
           cell.setAttribute('align','center');
           tdropdownfield.options[0] = new Option("John Smith","John Smith");
           tdropdownfield.options[1] = new Option("Jane Doe","Jane Doe");
           tdropdownfield.options[0].selected = true;
This peice just creates the dropdown in a cell (all of the code is in the original post). I have brought it up and tried to do a view source, but that does not show me the html code of the dropdowns.

I see how it's being generated, I want to see what it produces -- you need to view partial sourcd.

freakus_maximus · May 10, 2007

Sorry about that Fenway, here is what you requested. I did the same steps as I stated earlier, so there are two rows added from the "add task" piece.

Thanks again!

<form action="../na/na_entry_proc.php" method="post">
<table id="Table1" cellspacing="1" cellpadding="1" width="95%"
align="center" border="0">
<tbody>
<tr>
<td width="25%">
<p align="center">Primary Analyst</p>
</td>
<td>
<p align="center">Change Request Number</p>
</td>
<td>
<p align="center">Date</p>
</td>
</tr>
<tr>
<td>
<p align="center"><select id="analyst" style="WIDTH: 110px" name=
"analyst">
<option value="">Select...</option>
<option value="John Smith">John Smith</option>
<option value="Jane Doe">Jane Doe</option>
</select></p>
</td>
<td>
<p align="center"><input id="cr_num" style="WIDTH: 100%" name=
"cr_num" value="" /></p>
</td>
<td>
<p align="center"><input id="date" style=
"WIDTH: 75px; HEIGHT: 22px" size="10" name="date" value="" /></p>
</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
<input id="numoptions" type="hidden" value="3" />
<table class="bodymain" id="task_tbl" cellspacing="1" cellpadding=
"1" width="95%" align="center" border="1">
<tbody>
<tr>
<td width="10%" bgcolor="#FFCC00">
<p align="center"><strong>Complete</strong></p>
</td>
<td bgcolor="#FFCC00">
<p align="center"><strong>Assigned To</strong></p>
</td>
<td bgcolor="#FFCC00" colspan="2">
<p align="center"><strong>Description of Task</strong></p>
</td>
</tr>
<tr>
<td align="center"><input id="Checkbox[0]" type="checkbox" value=
"on" /></td>
<td align="center"><select id="Tdrop[0]">
<option value="John Smith">John Smith</option>
<option value="Jane Doe">Jane Doe</option>
</select></td>
<td>
<textarea id="Tdescr[0]" rows="3" cols="60">
</textarea></td>
</tr>
<tr>
<td align="center"><input id="Checkbox[1]" type="checkbox" value=
"on" /></td>
<td align="center"><select id="Tdrop[1]">
<option value="John Smith">John Smith</option>
<option value="Jane Doe">Jane Doe</option>
</select></td>
<td>
<textarea id="Tdescr[1]" rows="3" cols="60">
</textarea></td>
</tr>
</tbody>
</table>
  <a href="javascript:drawoptions();" align="center">add
task</a>
<p>  Summary of Build (to be completed by Network
Analyst)<br />
  
<textarea id="crsummary" style="WIDTH: 95%; HEIGHT: 104px" name=
"crsummary" rows="6" cols="81" align="center">
</textarea>
<br />
  <input id="Submit1" type="submit" name="Submit1" value=
"Submit" /> <input id="Reset1" type="reset" name="Reset1"
value="Reset" /></p>
</form>
</body>
</html>

fenway · May 10, 2007

Well, as you can see, there is no "selected" attribute being added...

freakus_maximus · May 11, 2007

Hmm...odd thing. If I change this line of code:

tdropdownfield.options[0].selected = true;

to this:

tdropdownfield.options[1].selected = true;

The "Assigned to' dropdowns do in fact default to "Jane Doe" and not "John Smith" whenever I click the "add task". I can't hard code this however, I need it to based on whatever was selected in the "Primary Analyst" dropown.

Any thoughts?

fenway · May 11, 2007

You need to "search" your list to find out which option to "engage" -- and since you have this list in advance, you can easily make a lookup hash.

freakus_maximus · May 11, 2007

Solved -

I replaced:

tdropdownfield.options[0].selected = true;

with:

var analystDDL = document.getElementById('analyst');
     if (analystDDL.selectedIndex > 0)
     tdropdownfield.options[analystDDL.selectedIndex-1].selected = true;

Sign In

[SOLVED] Help with populating drop down

Recommended Posts

freakus_maximus

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

freakus_maximus

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

freakus_maximus

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

freakus_maximus

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

freakus_maximus

Link to comment

Share on other sites

fenway

Link to comment

Share on other sites

freakus_maximus

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information