Forum Moderators: open

Message Too Old, No Replies

Multiple Select lists updating text boxes

         

irosa

2:48 am on Nov 23, 2004 (gmt 0)

10+ Year Member



I have an add records form with 10 rows that the user can add 1 to 10 records. On the form is a select list that I need to change the value of a textbox.

I need to modify this code which works for one row to work with 10 rows on the form.

<HTML>
<HEAD>
<TITLE>Parallel Array Lookup</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// the data
var UsageCsaId = new Array("ABERDEEN","AGOURA","AGUADILLA","AKRON");

var originalCompany = new Array("6410","8728","1260","6613");

// do the lookup into parallel arrays
function getData(form) {
var i = form.UsageCsaId.selectedIndex
form.OriginalCompanyCode.value = originalCompany[i]
}
</SCRIPT>
</HEAD>
<BODY onLoad="getData(document.frmMaintenance)">
<FORM NAME="frmMaintenance">
<SELECT NAME="UsageCsaId" onChange="getData(this.form)">
<OPTION>ABERDEEN
<OPTION>AGOURA
<OPTION>AGUADILLA
<OPTION>AKRON
</SELECT>
<INPUT TYPE="text" NAME="OriginalCompanyCode" SIZE=4 readonly>
</BODY>
</HTML>

Any help is greatly appreciated.

Thanks,
Issac

Bernard Marx

3:15 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Excuse my lack of imagination. I'm not sure what you're asking.

Would it be possible to give an example of what you mean by "10 rows" _?

Do you mean there will be 10*(selectBox + inputBox) _?

Is the information the same, or does each select/input pair have it's own parallel array pair for data _?

Can you change the data format _? (eg combine the array pairs into one single map).
---------------------------------

Is there any reason this info can't be put into the value attribute of each option element?

<option value="6410">ABERDEEN

..or would this cause unnecessary repetition?

irosa

4:28 pm on Nov 23, 2004 (gmt 0)

10+ Year Member



Thanks for responding.

>>Do you mean there will be 10*(selectBox + inputBox) _?
Yes, there will be 10 selects and inputBoxes (there are other fields within each row, but these are the only two that are related.

>>Is the information the same, or does each >>select/input pair have it's own parallel array pair >>for data _?
Yes, each row will have the same options in the selectBox and related inputBox

>>Can you change the data format _? (eg combine the >>array pairs into one single map).
Yes, the format can change. Actually, I need to build the array dynamically through BC4J/Java as the values will be coming from a database. It may be easier to create an array such as this: array[0] = new Array("ABERDEEN","6410"); How would I call the function if it were this way?

>>Is there any reason this info can't be put into the >>value attribute of each option element?
>><option value="6410">ABERDEEN
>>..or would this cause unnecessary repetition?
This would not work as the value for the selectBox needs to be what is in the text value. The inputBox is actually readonly and is there for display purposes

Issac

Bernard Marx

5:21 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks for the replies.

The only one I'm still uncertain about is why the info can't be kept in the value attributes. Then again, considering this would involve 10x duplication of the info. Maybe we should forget about that.

Sorry to come back with another couple of questions...

This is possible as it stands. However, the task can be less complicated if certain things are allowed. The central issue is how to identify and reference the appropriate input box.

* Do all the input boxes have the same name, or can they be different?

irosa

5:36 pm on Nov 23, 2004 (gmt 0)

10+ Year Member



The names need to be the same, so is it possible to use id's with different values?

Bernard Marx

5:43 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmmm. technically, yes, but it should probably be avoided, especially if we're using old-fashioned "document.formName.elementName" style code.

I was working on one that references the inputs by position, I'll switch to one that uses ids first.

Bernard Marx

6:45 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try this:
(! change ¦ symbol to unbroken pipe)


<HTML>
<HEAD>
<TITLE>Parallel Array Lookup</TITLE>
<SCRIPT src="start.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>[red]<!--onload added via script -->[/red]
<FORM NAME="frmMaintenance">
<SELECT NAME="UsageCsaId">
<OPTION>ABERDEEN
<OPTION>AGOURA
<OPTION>AGUADILLA
<OPTION>AKRON
</SELECT>
<INPUT TYPE="text" NAME="OriginalCompanyCode" SIZE=4 readonly>

<SELECT NAME="UsageCsaId">[red]<!-- onchange added via script -->[/red]
<OPTION>ABERDEEN
<OPTION>AGOURA
<OPTION>AGUADILLA
<OPTION>AKRON
</SELECT>
<INPUT TYPE="text" NAME="OriginalCompanyCode" SIZE=4 readonly>
</FORM>
</BODY>
</HTML>

[b]The SCRIPT[/b]---------(data.js)--------------------------------------

// the data
var UsageCsaId = new Array("ABERDEEN","AGOURA","AGUADILLA","AKRON");
var originalCompany = new Array("6410","8728","1260","6613");

window.onload = function()
{
initForm( document.getElementsByName('frmMaintenance')[0] )
}

function initForm(form)
{
var select, input, k=-1;
var selects = form.elements.UsageCsaId;
var inputs = form.elements.OriginalCompanyCode;

while(select=selects[++k]){
select.input = inputs[k];
select.onchange = showData;
showData(select);
}
}

// called globally first (with arg)
// then as method of select elm (no arg)
function showData(select)
{
select = select¦¦this;
select.input.value = getData(select);
}

function getData(select)
{
return originalCompany[select.selectedIndex];
}

--------------------------------------------------------------------------

Bernard Marx

7:32 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I separated out the getting of the data itself so that the options can be explored.
(The actual statement can be placed inside the showData function later.

Here's two choices of data format and associated implementation of

getData
. First, my favoured,

Using an object to map names to numbers:

[pre]
var data =
{
ABERDEEN : 6410,
AGOURA : 8728,
AGUADILLA : 1260,
AKRON : 6613
};

function getData(select)
{
return data[select.options[select.selectedIndex].text];
}
[/pre]

* About quoting: In this case, neither the 'name',nor 'value' component need be quoted, unless..
The name needs to be quoted if it wouldn't pass the usual rules about variable names.
The value will need to be quoted if it contains leading zeros.
If in doubt, quote them all.

Now the other option. Your suggestion of a '2D' array:

[pre]
var data =
[
['ABERDEEN' , 6410],
['AGOURA' , 8728],
['AGUADILLA' , 1260],
['AKRON' , 6613]
];

function getData(select)
{
return data[select.selectedIndex][1];
}

[/pre]

Bernard Marx

8:54 pm on Nov 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Oh. Change start.js to data.js in the script tag.

irosa

9:11 pm on Nov 23, 2004 (gmt 0)

10+ Year Member



Wow, man that is awesome. I will be trying these out here in a little while. Thanks for all the help. I really appreciate it.

irosa

8:46 pm on Nov 26, 2004 (gmt 0)

10+ Year Member



Works great. What do I need to change to get it to work if there is only one record. The scenario is that when the user enters 1 or more entries from the original 10 input form, there could be validation errors and 1 or more records could come back for the user to modify.

When 1 record returns, I get the following error: 'input' is null or not an object.