By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,165 Members | 1,089 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,165 IT Pros & Developers. It's quick & easy.

creating dynamic select combo boxes

P: 18
I have a page that when you click on a button it is supposed to add 5 more rows to an existing table. This functionality works but then we had to change one of the cells from using a Text box to using a Select box and then it no longer worked completely. I can see the Select box with the drop down arrow but the width of the box is not the same as the original Select boxes. Also the OnClick and OnChange events do not work for the newly added Select boxes. Below is the code we are using to create the Select boxes. I am pretty sure I have the rest of the code correct but just am not getting line 3 typed in correctly.

I would think that this should be able to be done so any help from any one would be greatly appreciated.

Expand|Select|Wrap|Line Numbers
  1.         // Consumption PO cell
  2.     var cellRight = row.insertCell(2);
  3.     var el = document.createElement('<select><input TYPE="select-one" NAME=cmbConsPO' + iteration + ' SIZE="1" STYLE="WIDTH: 170px"  OnClick="ConsPOClick(' + iteration + ')" OnChange="ConsPOChange(' + iteration + ')" ></select>');
  4.     cellRight.appendChild(el);
  5.  
Oct 22 '07 #1
Share this Question
Share on Google+
14 Replies


acoder
Expert Mod 15k+
P: 16,027
The document.createElement method has been used incorrectly.

You can't nest an input tag within a select tag.

Try:
Expand|Select|Wrap|Line Numbers
  1. var el = document.createElement('select');
  2. el.type="select-one";
  3. el.name='cmbConsPO' + iteration;
  4. el.size="1";
  5. el.style="WIDTH: 170px";
  6. el.onclick=funArg(ConsPOClick,iteration);
  7. el.onchange=funArg(ConsPOChange,iteration);
and funArg (which returns an anonymous function:
Expand|Select|Wrap|Line Numbers
  1. function funArg(fn, arg) {
  2.   return function () { return fn(arg); };
  3. }
Oct 23 '07 #2

P: 18
I tried your suggestion but it did not show the Select box at all. At least with the code I was using before the Select box would show up. I noticed that the code example you gave me did not a have
Expand|Select|Wrap|Line Numbers
  1. </select>;
in it. Could this have something to do with why it did not show up on the page. Because of using the "el" variable I am not sure how to add the /select code if that is what is needed.

If that is not what is needed, do you or anyone else have any ideas to resolve my problem? When the function is executed it is with in a loop that executes 5 times so it adds 5 lines at a time. There is also 1 Text box before and 3 Text boxes after the Select box within the table. I don't seem to have a problem with the code for these, just the Select Combo box.
Oct 23 '07 #3

P: 18
I probably should have mentioned that this function is in a Javascript section of an ASP page. I am sorry if this lack of information caused any problems.
Oct 23 '07 #4

acoder
Expert Mod 15k+
P: 16,027
OK, it seems that you can't set some read-only properties. Change the code to:
Expand|Select|Wrap|Line Numbers
  1. var el = document.createElement('select');
  2. //can't change the type using type property
  3. el.name='cmbConsPO' + iteration;
  4. el.size="1";
  5. el.style.width ="170px";
  6.  
Notice how the width is set, using style.width rather than just style.
Oct 24 '07 #5

P: 18
Your latest suggestion worked great. Thank you very much.

I also tried your earlier suggestion in regards to the OnClick and OnChange events but it did not work. I found I had to put single quotes around the ConsPOClick and ConsPOChange values otherwise the Select boxes would not load onto the screen. The events do not fire. Could it have something to do with the fact that the these two functions that I am calling are VBScript functions and I am trying to call them from a Javascript Function? Here is the section of code that is loading the Select boxes and trying to call the Click and Change events. I know the ConsPOClick and ConsPOChange functions work because of other fields that are already loaded initially on the form.

Expand|Select|Wrap|Line Numbers
  1.      // Consumption PO cell
  2.     var cellRight = row.insertCell(2);
  3.     var el = document.createElement('Select');
  4.     el.name='cmbConsPO' + iteration;
  5.     el.size="1";
  6.     el.style.width="170px";
  7.     el.OnClick=funArg('ConsPOClick',iteration);    //funArg(ConsPOClick,iteration);
  8.     el.OnChange=funArg('ConsPOChange',iteration);    //funArg(ConsPOChange,iteration);
  9.     cellRight.appendChild(el);
  10.  
Expand|Select|Wrap|Line Numbers
  1.    function funArg(fn,Arg){
  2.     return function() { return fn(arg); };
  3. }    
  4.  
Oct 24 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Could it have something to do with the fact that the these two functions that I am calling are VBScript functions and I am trying to call them from a Javascript Function?
Hmm, that does make it tricky. If they were JavaScript functions, they should work. Try using JavaScript functions as a test.
Oct 24 '07 #7

P: 18
I just got done doing a test where I tried to write text to a text box from the function funArg and it would not even do that. From the research I have done I should not have any problems calling VBScript functions from Javascript and vice versa. I think the problem has to do with how I am trying to assign the Onclick and Onchange events but I am not sure. I keep looking for examples on the web but have not found anything conclusive to help me.
Oct 24 '07 #8

acoder
Expert Mod 15k+
P: 16,027
Change OnClick and OnChange to onclick and onchange (with no caps).
Oct 24 '07 #9

P: 18
Thank you. I had no idea that Javascript was so case sensitive. Since I am a beginner to the Javascript country, can you suggest a reference book I can get to use?

I know I am going to keep my account here!
Oct 24 '07 #10

acoder
Expert Mod 15k+
P: 16,027
Yes, JavaScript is case-sensitive and a lot of people get caught out on that one.

For a JavaScript book, you could try David Flanagan's JavaScript : The Definitive Guide, Fifth Edition. Make sure you get the latest edition.

As well as books, there are a lot of online resources. Check out the links in the Offsite Links sticky thread at the top of this forum.
Oct 24 '07 #11

P: 18
I was wrong, my test worked on a Text box but it won't work on the Select box. I did notice on the Select box that if I do not put any quotes around the function name it executes the function on the first time it loads the Select box to the screen and then it stops loading the page. If I put either double or single quotes around the function it loads the page completely but will not call the function at all.

With the Text box test I found I can call either a Javascript function or a VBScript function from the event handler. I am still experimenting with the code and will check out some of the links you suggested to try and figure it out.
Oct 24 '07 #12

acoder
Expert Mod 15k+
P: 16,027
What does the function do? Can you post some code?

Can you also post the code that you're using to create the text box?
Oct 25 '07 #13

P: 18
Here is the code that I am using to create the initial list of 5 rows of cells that we start with.
[HTML]
<td><input type="text" name="txtGTW<%=nI%>" size="8" value="<%=strPart%>" Onchange="LoadPoList(<%=nI%>)"></td>
<td><select CLASS="MMSelect" name="cmbConsPO<%=nI%>" size="1" style="WIDTH: 170px" OnClick="ConsPOClick(<%=nI%>)" OnChange="ConsPOChange(<%=nI%>)">
<td><input type="text" NAME="txtPullPO<%=nI%>" SIZE=20 >
<td><input type="text" name="txtQty<%=nI%>" size="8" ></td>
<td><input type="text" name="txtDateProc<%=nI%>" size="10" readonly ></td>
</tr>
[/HTML]

Here is the Javascript function that adds a new row of cells when a button is clicked. The GTW Cell section starting on line 15 is where I was testing. I must have been tired because I am not able to duplicate my success from yesterday. The Consumption PO Cell section on line 21 is the Select box that started this whole mess. Now from what I have read line 29 should be a valid assignment to the onchange event. ConsPOClick is just a validation VBScript subroutine to make sure that the 3 fields needed to populate the Select box are populated before trying to click on the drop down arrow.

Expand|Select|Wrap|Line Numbers
  1. function addRowToTable()
  2. {
  3.     var tbl = document.getElementById('tblSample');
  4.     var lastRow = tbl.rows.length;
  5.     // if there's no header row in the table, then iteration = lastRow + 1
  6.     var iteration = lastRow;    
  7.     var row = tbl.insertRow(lastRow);
  8.  
  9.     // left cell
  10.     var cellLeft = row.insertCell(0);
  11.     var textNode = document.createTextNode(iteration);
  12.     cellLeft.appendChild(textNode);
  13.     document.all("TXTCount").value = iteration;
  14.  
  15.     // GTW cell
  16.     var cellRight = row.insertCell(1);
  17.     var el = document.createElement('<input TYPE=TEXT NAME=txtGTW' + iteration + ' SIZE=8 OnChange="funArg(' + iteration + ')" >');
  18.     //el.onchange="funArg(" + iteration + ")"; 
  19.     cellRight.appendChild(el);
  20.  
  21.     // Consumption PO cell
  22.     var cellRight = row.insertCell(2);
  23.     //var el = document.createElement('<select><input TYPE="select-one" NAME=cmbConsPO' + iteration + ' SIZE="1" STYLE="WIDTH: 170px"  OnClick="ConsPOClick(' + iteration + ')" OnChange="ConsPOChange(' + iteration + ')" ></select>');
  24.     var el = document.createElement('Select');
  25.     //el.type="select-one";
  26.     el.name='cmbConsPO' + iteration;
  27.     el.size="1";
  28.     el.style.width="170px";
  29.     el.onclick="ConsPOClick(" + iteration + ")";    
  30.     //el.onchange=funArg('ConsPOChange',iteration);    
  31.     cellRight.appendChild(el);
  32.  
  33.     // Pull PO - BAX cell
  34.     var cellRight = row.insertCell(3);
  35.     var el = document.createElement('<input TYPE=TEXT NAME=txtPullPO' + iteration + ' SIZE=20  maxlength=10>');
  36.     cellRight.appendChild(el);
  37.  
  38.     // QTY cell
  39.     var cellRight = row.insertCell(4);
  40.     var el = document.createElement('<input TYPE=TEXT NAME=txtQty' + iteration + ' SIZE=8>');
  41.     cellRight.appendChild(el);
  42.  
  43.  
  44.     if (document.all("txtACT").value == "MODIFY"){
  45.     // Status
  46.     var cellRight = row.insertCell(5);
  47.     var el = document.createElement('<input type=Checkbox VALUE="CANCEL"  NAME=txtCancel' + iteration + ' Disabled >');
  48.     cellRight.align = "center";
  49.     cellRight.appendChild(el);
  50.     }
  51.  
  52.     if (document.all("txtACT").value == "MODIFY"){
  53.     // Date Processed cell
  54.     var cellRight = row.insertCell(6);
  55.     var el = document.createElement('<input TYPE=TEXT NAME=txtDateProc' + iteration + ' SIZE=10 readonly >');
  56.     cellRight.appendChild(el);
  57.     }
  58.     else{
  59.     // Date Processed cell
  60.     var cellRight = row.insertCell(5);
  61.     var el = document.createElement('<input TYPE=TEXT NAME=txtDateProc' + iteration + ' SIZE=10 readonly  >');
  62.     cellRight.appendChild(el);
  63.     }
  64.  
  65. }
This is the generic function you suggested I create for passing the function name and the parameter. I temporarily changed it to call a VBScript test function.
Expand|Select|Wrap|Line Numbers
  1. function funArg(Arg){
  2.     TestSub(Arg);
  3.     //return function() { return fn(arg); };
  4. }    
  5.  
Here is the test VBScript function I created. I started off simple with just a message box to make sure that the function was being called and then I added the actual call to the function that needed to be called.

Expand|Select|Wrap|Line Numbers
  1. Sub TestSub(strMsg)
  2.  
  3.     msgbox "Message = " & strMsg
  4.     call LoadPoList(cint(strMsg))
  5.  
  6. End Sub
  7.  
The LoadPoList subroutine is a VBScript subroutine that is loading the Select box with values that it gets from a database based on other field criteria on the page.

Expand|Select|Wrap|Line Numbers
  1. Sub LoadPoList(FieldNo)
  2.  
  3.     dim intStart
  4.     dim intEnd
  5.     dim strAddPO
  6.  
  7.     frmAddInvoice("cmbConsPO" & FieldNo).length = 0
  8.     frmAddInvoice("txtPullPO" & FieldNo).value = ""
  9.     frmAddInvoice("txtQty" & FieldNo).Value = ""
  10.     frmAddInvoice("txtDateProc" & FieldNo).Value = ""
  11.  
  12.     UseOwner = Trim(document.frmAddInvoice.cmbOwner.value)
  13.     UseDestination = Trim(document.frmAddInvoice.cmbDestination.value)
  14.     UsePart = Trim(document.all("txtGTW" & FieldNo).Value)
  15.     strValue = GetPoInfo( UseOwner, UseDestination, UsePart)
  16.  
  17.     If strValue <> "" Then
  18.         Call AddToDropDown("Select a PO",FieldNo)
  19.     End If
  20.  
  21.     intStart = 1
  22.     intEnd = instr(intStart,strValue,"|")
  23.     do while intEnd <> 0
  24.         strAddPO = mid(strValue,intStart,intEnd - intStart)
  25.         call AddToDropDown(strAddPO,FieldNo)
  26.         intStart = intEnd + 1
  27.         intEnd = instr(intStart,strValue,"|")
  28.     loop
  29.  
  30. End Sub
  31.  
Oct 25 '07 #14

acoder
Expert Mod 15k+
P: 16,027
This is the generic function you suggested I create for passing the function name and the parameter. I temporarily changed it to call a VBScript test function.
Expand|Select|Wrap|Line Numbers
  1. function funArg(Arg){
  2.     TestSub(Arg);
  3.     //return function() { return fn(arg); };
  4. }    
  5.  
funArg was just a name I just came up with. It should probably be called bindArg or something.

The reason why the function executed when you created the select element is that onclick/onchange should be assigned a function reference. You don't call the function. funArg returns an anonymous function which calls a function. It doesn't actually call the function. If you just call TestSub, it's running the function and assigning the result of the execution to onclick/onchange.

For more on this, read this article by pbmods on function objects.
Oct 26 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.