Auto-populating a form from data presented in a table/grid.

[tedbyers]

Here is a Javascript function that mostly works (NB: the double quote marks are escaped as this is actually written to the response by a Perl CGI script):

		function getUserRow(t) {			var col=t.cellIndex;			var row=t.parentNode.rowIndex;			var procTable = document.getElementById(\"usertable\");			var uform = document.getElementById(\"uform\");			var StrippedString = (procTable.rows[row].cells[0].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.ufuid.value = StrippedString;			StrippedString = (procTable.rows[row].cells[1].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.fname.value = StrippedString;			StrippedString = (procTable.rows[row].cells[2].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.lname.value = StrippedString;			StrippedString = (procTable.rows[row].cells[3].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.uemail.value = StrippedString;			StrippedString = (procTable.rows[row].cells[4].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.uphone.value = StrippedString;			StrippedString = (procTable.rows[row].cells[5].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.agentid.value = StrippedString;			StrippedString = (procTable.rows[row].cells[6].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.merchantid.value = StrippedString;			StrippedString = (procTable.rows[row].cells[7].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.usertypeid.value = StrippedString;			StrippedString = (procTable.rows[row].cells[8].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.username.value = StrippedString;			StrippedString = (procTable.rows[row].cells[9].innerHTML);			StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");			uform.pwd.value = StrippedString;			uform.usersave.value = 'Update Data';		}

NB: for the curious, the use of StrippedString, with the regex, is a device I use to get rid of HTML tags that get placed around the tables' cells by the CSS file and accompanying javascript, that makes the tables look niver and behave more like a spreadsheet, sans in place editing). Only the agentid and merchantid inputs on the form do not get the proper values. I believe the reason is that for the text inputs, it is easy to just copy the text from the table's cells into the form, and all but 3 of the controls on this form are text input controls. There is one select control that does work, user type. But the two select controls, for the agent ID and merchant ID (if one is selected, the other can not be), do not get the values read from the database. Here is my guess as to why. (one reason I am not fond of Javascript programming, vs C++, is I don't have a debugger that lets me step through the code, or an editor that will tell me what members a particular object has that I could use). In the case of the user ID, what is displayed inthe table is the actual numbe used for the ID in the database, and that matches the value provided in the select control, but not the corresponding text in that control. That makes the text in the table a bit less user friendly, and was going to have my server-side code replace that.number by the text that describes the useer type. I suspect, though, that doing so will break that control here too. That is exactly what I had done with the two select controls that do not work. In there cases, I had the server-side code replace the number representing the ID by the merhcnat's name or the agent's name. Doing so makes the data inthe table more user friendly, but it means that the select controls for them do not get properly populated when I click on a given user. Now, the kicker is that all the text that is displayed in the columns for the agents' and merchants' names exist in the select control.as that is how the data was initally entered. (My objective, BTW, is to support editing data that already exists in the DB. So, my question is, "How do i modify the above Javascript code so that the two select controls in question actually work (as in display the data that is in the user's row that was clicked)?" Thanks Ted

[justsomeguy]

one reason I am not fond of Javascript programming, vs C++, is I don't have a debugger that lets me step through the code, or an editor that will tell me what members a particular object has that I could use

These are built in to most browsers today, check the links in my signature for information. If you're not checking for Javascript errors there, that should be your first step. You can also set breakpoints or inspect any object. Inside Javascript, you can use console.log to display the value of a certain variable or object in the developer console. For a select element it may not be enough to just set the value property, you may need to loop through the list of options to find the one with the correct value and use its index to set the select element's selectedIndex property. http://www.w3schools.com/jsref/prop_select_selectedindex.asp

[tedbyers]

Thanks for this. I tried replacing my code above for the agentID by the following:

		    var ndx = -1;		    var imax = uform.agentid.options.length;		    StrippedString = (procTable.rows[row].cells[5].innerHTML);		    StrippedString = StrippedString.replace(/(<([^>]+)>)/ig,\"\");		    for (i = 0 ; i < imax ; i++) {			  if (uform.agentid.options[i] == StrippedString) {			    ndx = i;			  }		    }		    uform.agentid.selectedIndex = ndx;

Alas, this change in my code did not help. The agent select control still does not get set to the correct value. Firefox, BTW, is telling me that there are no Javascript errors. Since you suggested looping through the options inthe control, the above loop seemed to be the obvious result. So, what did I miss? Is there any chance that the values in either the select control or the table have invisible characters, for whatever reason (unknown to me as my server side code doesn't add anything to the strings displayed/stored in the db). Perhaps leading or trailing unprintable characters? Since I can see every string that is displayed in that column in the table is in the select control as one fo the options, I can not understand why my loop didn't find the index of the value in the table and set the value in select control accordingly. WHat is my error now? Thanks Ted

[justsomeguy]

The options array is an array of option objects, you'll need to check the value for each option: uform.agentid.options.value

[tedbyers]

Thanks. That didn't work, but since the problem was the text I displayed in the table were not the values in the select control, I wondered if there was a text data member of option also. I took a shot, and behold, it worked.