create new input text box in the same page when pressinh button

[Revos]

I am trying to do that when someone will press the button, it will create in the same page new input textbox, what I did is:

function blabla()
{
document.write("<tr><td> bla")
document.write(":</td><td><input name='Option")
document.write("' type='text' /></td></tr>") 
}

Everything is great, it does make a new textbox but it clears the page and then makes only new text box..I want it to create new text box in the same page, below the button, how?

thanks.

[fenway]

If you must use document.write() only call it once,  build the HTML string in JS first.

[Revos]

done, but still it clears the page and then makes the text box..and I don't must use it..I just don't know any other ways..

[fenway]

Well, then why not simply show/hide this input, and have it pre-generated in the right place?

[Revos]

Ok I solved the problem but there is a new one now..

What I did is putting TR and TD style="display:'none;'", in IE it works great but in FF it just messes us, how can I solve it?

[nogray]

put the style="display:'none;'" in the tr instead of the td

[Revos]

put the style="display:'none;'" in the tr instead of the td

Ok, done..now it works but to show it I do style="display:'block;'", in IE it works fine but in FIREFOX it is not working good and table messes up, how can I solve it?

[Zeon]

remove the single quotes:

style="display:none", not style="display:'none;'"

 

edit:

and another thing: for firefox (and every standards compilant browser for that matter) you should set style="display:table-cell" for tds, not block. You'll have to do some browser checking because IE doesn't recognise table-cell for display property.

[nogray]

actually, don't use display:block;

 

Not sure you set the script up, but here is what works

 

Let's say this is your html (notice the id in the tr tag)

<tr id="TR_ID" style="display:none;">
.....
</tr>

 

Your button will call the following Javascript function once clicked

<script>
function show_tr(){
document.getElementById('TR_ID').style.display = "";
}
</script>

You can add an if statment to toggle the display between "none" and "";