creating dynamic select combo boxes

[Heggr]

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.

		// Consumption PO cell
	var cellRight = row.insertCell(2);
	var el = document.createElement('<select><input TYPE="select-one" NAME=cmbConsPO' + iteration + ' SIZE="1" STYLE="WIDTH: 170px"  OnClick="ConsPOClick(' + iteration + ')" OnChange="ConsPOChange(' + iteration + ')" ></select>');
	cellRight.appendChild(el);

[acoder]

The document.create Element method has been used incorrectly.

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

Try:[CODE=javascript]var el = document.create Element('select ');
el.type="select-one";
el.name='cmbCon sPO' + iteration;
el.size="1";
el.style="WIDTH : 170px";
el.onclick=funA rg(ConsPOClick, iteration);
el.onchange=fun Arg(ConsPOChang e,iteration);[/CODE]and funArg (which returns an anonymous function:[CODE=javascript]function funArg(fn, arg) {
return function () { return fn(arg); };
}[/CODE]

[Heggr]

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

</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.

[Heggr]

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.

[acoder]

OK, it seems that you can't set some read-only properties. Change the code to:
[CODE=javascript]var el = document.create Element('select ');
//can't change the type using type property
el.name='cmbCon sPO' + iteration;
el.size="1";
el.style.width ="170px";
[/CODE]Notice how the width is set, using style.width rather than just style.

[Heggr]

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.

     // Consumption PO cell
	var cellRight = row.insertCell(2);
	var el = document.createElement('Select');
	el.name='cmbConsPO' + iteration;
	el.size="1";
	el.style.width="170px";
	el.OnClick=funArg('ConsPOClick',iteration);	//funArg(ConsPOClick,iteration);
	el.OnChange=funArg('ConsPOChange',iteration);	//funArg(ConsPOChange,iteration);
	cellRight.appendChild(el);

   function funArg(fn,Arg){
	return function() { return fn(arg); };
}

[acoder]

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.

[Heggr]

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.

[acoder]

Change OnClick and OnChange to onclick and onchange (with no caps).

[Heggr]

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!

[acoder]

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.

[Heggr]

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.

[acoder]

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?

[Heggr]

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="<%=strPa rt%>" Onchange="LoadP oList(<%=nI%>)" ></td>
<td><select CLASS="MMSelect " name="cmbConsPO <%=nI%>" size="1" style="WIDTH: 170px" OnClick="ConsPO Click(<%=nI%>)" OnChange="ConsP OChange(<%=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="txtDatePr oc<%=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.

function addRowToTable()
{
	var tbl = document.getElementById('tblSample');
	var lastRow = tbl.rows.length;
	// if there's no header row in the table, then iteration = lastRow + 1
	var iteration = lastRow;	
	var row = tbl.insertRow(lastRow);
	
	// left cell
	var cellLeft = row.insertCell(0);
	var textNode = document.createTextNode(iteration);
	cellLeft.appendChild(textNode);
	document.all("TXTCount").value = iteration;
	
	// GTW cell
	var cellRight = row.insertCell(1);
	var el = document.createElement('<input TYPE=TEXT NAME=txtGTW' + iteration + ' SIZE=8 OnChange="funArg(' + iteration + ')" >');
	//el.onchange="funArg(" + iteration + ")"; 
	cellRight.appendChild(el);

	// Consumption PO cell
	var cellRight = row.insertCell(2);
	//var el = document.createElement('<select><input TYPE="select-one" NAME=cmbConsPO' + iteration + ' SIZE="1" STYLE="WIDTH: 170px"  OnClick="ConsPOClick(' + iteration + ')" OnChange="ConsPOChange(' + iteration + ')" ></select>');
	var el = document.createElement('Select');
	//el.type="select-one";
	el.name='cmbConsPO' + iteration;
	el.size="1";
	el.style.width="170px";
	el.onclick="ConsPOClick(" + iteration + ")";	
	//el.onchange=funArg('ConsPOChange',iteration);	
	cellRight.appendChild(el);

	// Pull PO - BAX cell
	var cellRight = row.insertCell(3);
	var el = document.createElement('<input TYPE=TEXT NAME=txtPullPO' + iteration + ' SIZE=20  maxlength=10>');
	cellRight.appendChild(el);

	// QTY cell
	var cellRight = row.insertCell(4);
	var el = document.createElement('<input TYPE=TEXT NAME=txtQty' + iteration + ' SIZE=8>');
	cellRight.appendChild(el);

	
	if (document.all("txtACT").value == "MODIFY"){
	// Status
	var cellRight = row.insertCell(5);
	var el = document.createElement('<input type=Checkbox VALUE="CANCEL"  NAME=txtCancel' + iteration + ' Disabled >');
	cellRight.align = "center";
	cellRight.appendChild(el);
	}

	if (document.all("txtACT").value == "MODIFY"){
	// Date Processed cell
	var cellRight = row.insertCell(6);
	var el = document.createElement('<input TYPE=TEXT NAME=txtDateProc' + iteration + ' SIZE=10 readonly >');
	cellRight.appendChild(el);
	}
	else{
	// Date Processed cell
	var cellRight = row.insertCell(5);
	var el = document.createElement('<input TYPE=TEXT NAME=txtDateProc' + iteration + ' SIZE=10 readonly  >');
	cellRight.appendChild(el);
	}

}

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.

function funArg(Arg){
	TestSub(Arg);
	//return function() { return fn(arg); };
}

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.

Sub TestSub(strMsg)

	msgbox "Message = " & strMsg
	call LoadPoList(cint(strMsg))
	
End Sub

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.

Sub LoadPoList(FieldNo)
	
	dim intStart
	dim intEnd
	dim strAddPO

	frmAddInvoice("cmbConsPO" & FieldNo).length = 0
	frmAddInvoice("txtPullPO" & FieldNo).value = ""
	frmAddInvoice("txtQty" & FieldNo).Value = ""
	frmAddInvoice("txtDateProc" & FieldNo).Value = ""

	UseOwner = Trim(document.frmAddInvoice.cmbOwner.value)
	UseDestination = Trim(document.frmAddInvoice.cmbDestination.value)
	UsePart = Trim(document.all("txtGTW" & FieldNo).Value)
	strValue = GetPoInfo( UseOwner, UseDestination, UsePart)

	If strValue <> "" Then
		Call AddToDropDown("Select a PO",FieldNo)
	End If

	intStart = 1
	intEnd = instr(intStart,strValue,"|")
	do while intEnd <> 0
		strAddPO = mid(strValue,intStart,intEnd - intStart)
		call AddToDropDown(strAddPO,FieldNo)
		intStart = intEnd + 1
		intEnd = instr(intStart,strValue,"|")
	loop

End Sub

[acoder]

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.

function funArg(Arg){
	TestSub(Arg);
	//return function() { return fn(arg); };
}

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.