How to Auto Fill Text Box with Onchange

ixnay5 · Sep 24, 2003

howdy-

i have a form that displays a dynamic number of rows with dynamically named fields. in fact, it displays a dynamic number of groups of rows with dynamically named fields. at the end of each row are two text boxes. the first represents a start date and the second an end date. in most cases, more than a dozen rows can be displayed in any one group. i don't want the users to have to make dozens of entries by hand, so i would like to set up a pair of control text boxes in the form header where the user can enter the dates once and then the subordinate text boxes are automatically filled in. i'm thinking i can use the onchange event.

here's how the form is structured:

group 1
control1box1 control1box2
row1box1 row1box2
row2box1 row2box2

group 2
control2box1 control2box2
row3box1 row3box2
row4box1 row4box2

how do i set up the onchange event functions so that rowboxes in group 1 get updated automatically when the controlboxes in group 1 are updated?

advice is much appreciated...

clarkin · Sep 24, 2003

Have a look at this: (tested IE6 & NN7)

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd&quot;>[/URL]
<html>
<head>
<script language=&quot;JavaScript&quot;>
function alertAll(theForm)
{
    var str = &quot;Form Elements of form &quot; + theForm.name + &quot; (length: &quot; + theForm.length + &quot;): \n&quot;;
    for (i = 0; i < theForm.length; i++)
    {
        str += i + &quot;) &quot; + theForm.elements[i].name + &quot;: &quot; + theForm.elements[i].value + &quot;\n&quot;;
    }
    alert(str);
}

function matchStartDates(theForm)
{
    // make regexp to match all &quot;control(0-9)box1&quot;
    var regPatt = /^control\d+box1$/
    
    //loop through all elements in theForm
    for (i = 0; i < theForm.length; i++){
        //check if this elements' name matches regexp above
        if (regPatt.test(theForm.elements[i].name)) {
            //match, so set value to masterStartDate's val
            theForm.elements[i].value = theForm.masterStartDate.value;
        }
    }

}
</script>
</head>
<body>
<form name=&quot;thisForm&quot;>
<p>
<input type=&quot;text&quot; name=&quot;masterStartDate&quot; size=&quot;10&quot;>
<input type=&quot;button&quot; onclick=&quot;matchStartDates(this.form);&quot; name=&quot;startDateBtn&quot; value=&quot;Fill Start Dates&quot;>
All your dynamic stuff below here..
<br><br>
<input type=&quot;text&quot; name=&quot;control1box1&quot; size=&quot;10&quot;>
<input type=&quot;text&quot; name=&quot;control1box2&quot; size=&quot;10&quot;>
<br>
<input type=&quot;text&quot; name=&quot;row1box1&quot; size=&quot;10&quot;>
<input type=&quot;text&quot; name=&quot;row1box2&quot; size=&quot;10&quot;>
<br><br>
<input type=&quot;text&quot; name=&quot;control2box1&quot; size=&quot;10&quot;>
<input type=&quot;text&quot; name=&quot;control2box2&quot; size=&quot;10&quot;>
<br>
<input type=&quot;text&quot; name=&quot;row21box1&quot; size=&quot;10&quot;>
<input type=&quot;text&quot; name=&quot;row2box2&quot; size=&quot;10&quot;>
<br><br>

<input type=&quot;Button&quot; onclick=&quot;alertAll(this.form)&quot; name=&quot;alertBtn&quot; value=&quot;Alert all&quot;> 
</p>
</form>
</body>
</html>

matches by element name using reg exp - see if you can work out what its doing. I'm sure you can go from this to a solution for your problem

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

ixnay5 · Sep 25, 2003

many thanks, clarkin. it was a real short trip to the final solution because of you.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to Auto Fill Text Box with Onchange

ixnay5

MIS

clarkin

Programmer

ixnay5

MIS

Similar threads

Part and Inventory Search

Sponsor