Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

How to display an input text in front of a radio button after a click



4:32 pm on Apr 22, 2011 (gmt 0)

5+ Year Member

Hi all,
I have a radio button. I would like to display an input of type text in front of it after a single click on that radio button.

I have written a small function that i placed in the head of the page and called it in an onClick event handler of the radio button but it is directing me to the same page with that input of type text but without the rest of the page content. What can I do to keep the rest of the content on this page?

Here is the function placed in <head>
</head> tags:

<script type="text/javascript" >
function echoText(){
document.write("<input type='text' size='14' name='paycheque' />");
return false;


6:02 pm on Apr 22, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Because when you document.write, you're rewriting over the whole document. You **could** replace the contents of a div with your write using innerHTML (or similar,) but you shouldn't do it this way. Start with the text block in place. Set it's display to none. Then use Javascript to change the display to inline or block.

If you're concerned about your server side script reacting differently because in some cases the form element simply won't be present, just check it's value

if (isset($_POST['paycheque']) and ! empty($_POST['paycheque'])) {
// do something with this value


3:23 pm on Apr 23, 2011 (gmt 0)

5+ Year Member

Hi rocknbil,
Can you please write some Javascript code to show me how to do that task you suggest?


4:10 pm on Apr 23, 2011 (gmt 0)

5+ Year Member

For someone who has used gmail.com, what i mean is like when someone clicks the "Add More Files" when attaching files. If you click that button one sees a list of file input under on his email page.

Featured Threads

Hot Threads This Week

Hot Threads This Month