Duplicate Input on Same Page

[Novacaro]

I sent this yesterday to "birdbrain" who has so generously helped me out before, but still being a little unfamiliar with the process of the web site mailing/posting system, I am not sure it was received; so, am resubmitting.

Reiterating the fact that I am not a programmer, and don't have a clue how to go about this, but will attempt to explain what I need below:

I have a product order form that requires the purchaser to fill an input field (name=QtyANC1) with a quantity (the default is "0"). In another table ON THE SAME PAGE there is another input field that should always duplicate the quantity of the first field. The second field has another name (QtyARA1) which also has "0" as the default value.

My question is, is there javascript, etc., that will automatically duplicate "on screen" the quantity typed into the first field? In other words, could the number "2", for example, be typed in and the number "2" would autotype into the second field, and, if possible, could the second field be "locked" so that it would/could be changed only by changing the first field quantity?

Hopefully, this makes sense. I will most definitely appreciate being pointed in the right direction.

[blang]

My question is, is there javascript, etc., that will automatically duplicate "on screen" the quantity typed into the first field? In other words, could the number "2", for example, be typed in and the number "2" would autotype into the second field,

Yes. What you want to do is use an event handler to 'listen' for an event (such as 'keyup', 'change' or 'blur') on the first text field, i.e. QtyANC1 to effect the second field, i.e. QtyARA1. Something like this should suffice:

<input id="QtyANC1" name="QtyANC1" type="text" onkeyup="function(e) 
{document.getElementById("QtyARA1").value= this.value;}"/> 

I generally don't like inline JavaScript handlers (e.g. the "onkeyup" event is built right into the INPUT element). I much prefer abstracting those out into a SCRIPT element somewhere at the head or end of the document, but you can do it either way (although the inline style is deprecated). Note that it uses a DOM method "getElementById" to look up the element that has the id of "QtyARA1" (which obviously is the one we want to mirror) and assign the value of that field to the same value as this field. Being that it's a "keyup" event, it will be a synchronous event (both fields will change at the same time always). If you wanted a different effect, such as that the user would have to be finished typing in the field before it changed, you could use one of the other events mentioned.

A couple of good JavaScript references I've found are here [javascriptkit.com] and here [developer.mozilla.org]. Here is also a good JavaScript event reference [webmonkey.com]. Oh and while we're at it, don't forget to bookmark this DOM reference [javascriptkit.com].

could the second field be "locked" so that it would/could be changed only by changing the first field quantity?

Also yes. You flip on the second field's "disabled" attribute so it cannot be altered by the user, e.g.

<input id="QtyARA1" name="QtyARA1" type="text" disabled="disabled"/> 

That's it.

[edited by: DrDoc at 2:51 am (utc) on April 9, 2009]
[edit reason] eliminated side scrolling, fixed disabled attribute example [/edit]

[Novacaro]

Thank you SO much! I'll give it a go and see if I can manage it! Cyber high five!