Hiding/Showing form elements

[jamfitz001]

Hi. I'm a beginner who is trying to learn AJAX and use it with a PHP based webiste. I've been struggling with how to accomplish the following:

I would like to have a form where a user enters some info in a field. Before the user can submit, I want to use a captcha security image. After the user submits, I would like to give him the opportunity to upload a file with his post.

I had everything working via standard PHP, but I was not happy with the number of PHP pages that must be loaded and the amount of variables that must be posted and read via the PHP Session to accomplish these step. I wanted everything to occur on a single page to improve the user experience.

My goal was to have:

1. theCaptcha image/input box/enter on a line at the end of my form. The user would match the image and...

2. javascript would then display the submit button. Entering the submit button would validate the form info and write it to my database. Upon successful form completion ...

3. javascript would show the file upload form.

I tried using the PHP script that handled the captcha image to return via echo the submit button to a <p> tag's innerHTML. The button appeared, but it did not function (you could not click on it).

I'm now thinking that all the elements need to be in place during the initial page load, but the submit button and the file upload form need to be in some tags with a display:none state. I then need to change the display state of the tag in my jscript when the httmlrequest is completed.

Can I accomplish what I want to do? Is this the correct way to accomplish what I want? Do I need to append via the DOM model?