Form Submssion in somewhat real-time

[darkus]

I wasn't sure which subsection to post this but here goes.

I have a form that works great for users to submit their data, but I want to modify it a bit for submitting step-wise instructions on how to do something, think of stepwise instructions on how to cook a meal for example.

So the form is structured as so:

Dish Name : ___________________________
Difficulty: _________________________
Ingredients: ____________________________

Instructions: [textarea-input]

[SUBMIT BUTTON] 

Now what I want to do is for the text-area section labeled 'instructions' I want to put a another button that says "Next Step" and will take whatever input is currently in the textarea region, store it into a variable say $finalinstructions, clear out the Instructions text-area on the form (leaving the other inputtedf data in the other fields in-tact) and allow the user to input a fresh set of data into the Instructions text-area box.

And when the user hits the "Next Step" button again, it will take that inputted data, append it to the $finalinstructions variable, clear out the data in the text-area-input area and let the person input the next step. And so on...

The user can keep inputting steps as he wishes, and when he is done he can submit the form as usual using the [SUBMIT BUTTON] at the bottom, and the $finalinstructions (a compiled set of all the steps that were inputted) in submitted along with the rest of the form.

I was wondering how to start to do something like this? I'm a proficient php/html coder, but i'm guessing something like this is done using AJAX? If it can be done with jscript all the better, but just looking for some hints/tips/help/code/etc.. anything anyone can offer.

Thanks!

[BLiZZaRD]

I am pretty sure this can be done in JS, or a JS/php mix. I have a script that is already similar, will just need some tweaking. I will play around with it when I get home and see what I can come up with.

[darkus]

I am pretty sure this can be done in JS, or a JS/php mix. I have a script that is already similar, will just need some tweaking. I will play around with it when I get home and see what I can come up with.

Sounds perfect! Thanks, I can't wait to see

[BLiZZaRD]

Well, my initial testing has confirmed that it can be done. I just don't have it working quite right yet.

Too bad you don't want it done in Flash, hee he hee.

Will hopefully have a working version up by the end of the week (fingers crossed)

[BLiZZaRD]

Just to update.. I actually have some free time and I am working on this right now.

Edit:
Okay, I almost have it complete. Everything works except the ingredients list is still only one line of text instead of multiline. Once I have that then you should be able to tweak it and go with what you need to do with it. For example, adding more steps, making it pretty, or to match your site, etc. Everything in the two pages is pretty self explanatory.

I will attach the 2 files here... dishinstruct.html is the page they will go to, part2.html is when they click the submit button.

I will update after I finish the multi-line problem. I also added radio buttons for the difficulty rating etc. It should be close to something you can use

[BLiZZaRD]

Okay 0.9 version is out now. One last thing to do is to make carriage returns show as new line on part2.html

Otherwise I think it is done.

Attached newest version.

[BLiZZaRD]

Last version, last post. 1.0 is done. added multiline, and HTML parsing stop, so html code will not be accepted (a protection method).

Attached final version