Need help making an input box appear when user types text in another input box?

@RiothamusJan 14.2012

Hi everyone.

I’m building a form page, and one of the input boxes is optional. If the user enters text into it, I want another input box to appear for more data to be entered. Basically, I just need help setting up the Javascript to get this done.

I was planning on having the input box that’s going to appear be set to display:none with CSS, and then use a Javascript method change the DOM to make it display:block once the user enters text in the optional field. But the problem I’m having is I’m not sure how to tell when the user has entered text there. I understand there’s an onClick method for most elements, but I don’t know of anything like onTextEntered. Can someone help me with how I determine when text has been entered into that box?

to post a comment

JavaScript

@WolfShadeJan 14.2012 — #You can use onFocus, onBlur, onKeyUp.

If you want the second field to appear when focus is put on the optional input:

[CODE]
 <input type="text" name="field1" id="field1" onFocus="document.getElementById('field2').style.display = 'block';" />
 <input type="text" name="field2" id="field2" />
 [/CODE]

If you want the second field to appear when the optional field is blurred but only if it has a value:

[CODE]
 <input type="text" name="field1" id="field1" onBlur="if(this.value != '') {document.getElementById('field2').style.display = 'block';}" />
 <input type="text" name="field2" id="field2" />
 [/CODE]

If you want the second field to appear when a key is pressed and enters a value:

[CODE]
 <input type="text" name="field1" id="field1" onKeyUp="if(this.value != '') {document.getElementById('field2').style.display = 'block';}" />
 <input type="text" name="field2" id="field2" />
 [/CODE]

Many more options, but you get the point.

@RiothamusauthorJan 15.2012 — #Thanks. I used the onKeyUp one to make it appear when a value is entered. But then I tried to add code to make the field disappear again if the user backspaces everything:

<i>
 </i>else {
 document.getElementById('field2').style.display = 'none';
 }

But it doesn't work. Can you tell me what I'm doing wrong?

@RiothamusauthorJan 15.2012 — #Never mind, fixed it. Thanks.

Can anyone tell me how to translate this into jQuery, by any chance?

@007JulienJan 15.2012 — #See too this page and the others about forms from Peter Paul Kock.

Need help making an input box appear when user types text in another input box?

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need help making an input box appear when user types text in another input box?

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴