Filling more then one text field at once

**blastbb** · 12-17-2008, 06:09 PM

Text in title doesn't describe very well what I want, so you need to read following explanation to understand.

What I want is to that while type text in one text field, I automatically type text in other fields. Page would look like this page. There will be boxes for several site searches, so when visitor, for example, type text in field Pogodak.hr, that text would be entered in other fields too. (note that this is not my site and I don't want to do make that on this page)

I saw that feature somewhere sometime ago, by I don't remember where, and I also can't create any explanatory query in search engines to find solution. If you know some page were this is explained, you can just drop a link.

I think that there is need for javascript to use here, though maybe I'm wrong.
Thanks in advance

**magicyte** · 12-18-2008, 03:29 AM

Ex w/ JavaScript (yes, you were correct):

Code:

<input type="text" onkeydown="document.getElementById('other_textbox').value = this.value;" onkeyup="document.getElementById('other_textbox').value = this.value;" id="this_textbox" />

<input type="text" onkeydown="document.getElementById('this_textbox').value = this.value;" onkeyup="document.getElementById('this_textbox').value = this.value" id="other_textbox" />

Any questions? You can use excerpts from the code I provided to tweak your own, that is unless you aren't such a JavaScript buff...or stud...w/e!

-magicyte

**blastbb** · 12-23-2008, 11:22 PM

Thank you very much for this, it works fine, I really appreciate it.

I just want to ask you is this possible to use with more then two fields or with just two fields, and if so, what approach should I have (what values should be changed and by what rule)? I tried with modifying this code, but since I'm not some JavaScript man I didn't succeed.

Thanks again!

**magicyte** · 12-24-2008, 12:00 AM

Yes, it is possible. The way I'm doing it isn't very customizable, though. Anyway, please post a link to your site or give me some code that you are using right now. Perhaps I could develop a customizable script in the meantime

.

-magicyte

**Snookerman** · 12-24-2008, 12:54 AM

I don't know much JavaScript but if you can get the element by class, you could give them multiple class values and for each value there would be one element that does not have it. Here is what it would be with 4 fields:

Code:

<input type="text" class="two three four" onkeydown="document.getElementByClass('one').value = this.value;" onkeyup="document.getElementByClass('one').value = this.value;" />

<input type="text" class="one three four" onkeydown="document.getElementByClass('two').value = this.value;" onkeyup="document.getElementByClass('two').value = this.value;" />

<input type="text" class="one two four" onkeydown="document.getElementByClass('three').value = this.value;" onkeyup="document.getElementById('three').value = this.value;" />

<input type="text" class="one two three" onkeydown="document.getElementByClass('four').value = this.value;" onkeyup="document.getElementByClass('four').value = this.value;" />

This is just a suggestion, I doubt it works but maybe some JavaScript whiz can fix it.

However, if you only want the user to type in one specific text field, say the first one, then it would be much easier:

Code:

<input type="text" id="this_textbox" />

<input type="text" onkeydown="document.getElementById('this_textbox').value = this.value;" onkeyup="document.getElementById('this_textbox').value = this.value" />

<input type="text" onkeydown="document.getElementById('this_textbox').value = this.value;" onkeyup="document.getElementById('this_textbox').value = this.value" />

<input type="text" onkeydown="document.getElementById('this_textbox').value = this.value;" onkeyup="document.getElementById('this_textbox').value = this.value" />

Again, I don't know if this works either, but I looks like it should.

**magicyte** · 12-24-2008, 01:55 AM

Tada! I created a customizable solution which took practically ten minutes to figure out, despite the fact I'm posting quite sometime later. Here it is:

Code:

<html>
<head>
<title>Textbox Test</title>
<script type="text/javascript">
function applyTextboxValues(parentNodeId, txt) {
    for(i = 0; i < document.getElementById(parentNodeId).getElementsByTagName("input").length; ++i) {
	document.getElementById(parentNodeId).getElementsByTagName("input")[i].value = txt;
    }
}
</script>
</head>
<body>
Textbox Test<br>
<br>
You can place any number of textboxes in a form with the 'onkeydown' and 'onkeyup' events attached. The form must have an id, but no matter the number of textboxes, it doesn't take much code.
<span id="myTextboxes">
<input type="text" onkeydown="applyTextboxValues(this.parentNode.id, this.value);" onkeyup="applyTextboxValues(this.parentNode.id, this.value);"><br>
<input type="text" onkeydown="applyTextboxValues(this.parentNode.id, this.value);" onkeyup="applyTextboxValues(this.parentNode.id, this.value);"><br>
<input type="text" onkeydown="applyTextboxValues(this.parentNode.id, this.value);" onkeyup="applyTextboxValues(this.parentNode.id, this.value);"><br>
<input type="text" onkeydown="applyTextboxValues(this.parentNode.id, this.value);" onkeyup="applyTextboxValues(this.parentNode.id, this.value);">
</span>
</body>
</html>

You can put any number of inputs into the parentNode (be it form, span, label, etc.) with the same handlers. Be careful: if you put another input in there, say a button or a checkbox, those values will be effected as well. Be sure to include an id in the parentNode, too.

**blastbb** · 01-01-2009, 10:47 PM

magicyte, thanks again for your detailed post. Code from your last post works perfectly, but only when it is inserted just like that. Unfortunately, it doesn't work on my page. Maybe I should did this before, but here is page where I wanted to implement this, so you can see if I'm doing wrong somewhere.

Thanks again.

**magicyte** · 01-02-2009, 08:41 PM

Sorry. I fixed the code so that is only applies it to text boxes and won't change the other values. Just apply the events to your text boxes and give your <body> tag an id:

Code:

<html>
<head>
<title>Textbox Test</title>
<script type="text/javascript">
function applyTextboxValues(parentNodeId, txt) {
    var inputs = document.getElementById(parentNodeId).getElementsByTagName("input");
    for(var i = 0; i < inputs.length; ++i) {
	if(inputs[i]["type"] == "text") inputs[i].value = txt;
    }
}
</script>
</head>
<body id="bodyId">
Textbox Test<br>
<br>
<pre>You can place any number of textboxes in a parent node (used commonly w/ the <body> tag, <span> tag, and <form> tag) with the 'onkeydown' and 'onkeyup' events attached. The tag must have an id, but no matter the number of textboxes, it doesn't take much code. Insert your element's id (in this scenario, 'bodyId' which is the body's id) into the first parameter of applyTextboxValues. Make sure that your body's id doesn't conflict w/ other element's ids. It is also suggested that the textbox's parent node is the <body> tag.</pre>
<input type="text" onkeydown="applyTextboxValues('bodyId', this.value);" onkeyup="applyTextboxValues('bodyId', this.value);"><br>
<input type="text" onkeydown="applyTextboxValues('bodyId', this.value);" onkeyup="applyTextboxValues('bodyId', this.value);"><br>
<input type="text" onkeydown="applyTextboxValues('bodyId', this.value);" onkeyup="applyTextboxValues('bodyId', this.value);"><br>
<input type="text" onkeydown="applyTextboxValues('bodyId', this.value);" onkeyup="applyTextboxValues('bodyId', this.value);">
</body>
</html>

All you have to do is take the new code and apply it to your HTML page. In my next post, I will do it for you. Just wait.

-magicyte

**magicyte** · 01-02-2009, 08:51 PM

The file is in the attachments below. It's saved as an HTML file in Unicode. Just copy that HTML file's code and put it in your current site. I already tested it and it will work. If you have any questions, please ask. I am very willing to help you out. The code I made ALSO doesn't interfere with other scripts you may be using on your site. Happy coding, and also, a happy new year.

-magicyte

**blastbb** · 01-02-2009, 09:59 PM

This is brilliant! How can I thank you for this? Do you have some website so that I could link to you as one of the authors of that page?

This should be published somewhere as how-to since somebody will need this sometime. Only this should have appropriate name, as you can see I'm not native English speaker so I don't how to name this properly.

(btw, how to give status "resolved" for this topic, I saw something like that here on forums?)

Thanks a lot and happy new year to you also!