The attached files are for a Recipe Form. Users will submit recipes to our database. A fairly simple form, however I decided to try and implement a Javascript feature to allow for better usability/user friendliness. However, this has resulted in becoming a nightmare for me!! LOL. I have tried everything. I need expert help.

Heres how it should work: For the ingredients and Directions users can add as many fields as they need. They should also be able to delete these fields as they are creating them. When they hit submit, if there was an error with the form, they must be returned back to the form with all the fields pre-filled as they submitted them.

As I can see now, there are only 3problems with it right now. But beware! It seems like every time I fix something, I see something else that needs to be fixed for it to work right. So it might just take us a few tries going back and forth to get it completely fixed.

But as far as I know… these are the only three problems right now….

1. When you click "Add More [+]" in Internet Explorer, you see a little movement, but the new field is not added. However, this works perfectly in Firefox ???confused?? Thats the biggest issue.

These problems occur only when the user has forgotten to fill out a required field, and the user is kicked back to the form. Their previous entries should be saved in the session and show back up on the Form so they can only fill in the fields they missed. Just leave the Name Field blank while testing so it kicks you back each time.

2. For Ingredients: Say you have three rows, If you delete row three, hit submit and return, row three is Deleted! Perfect!
BUT, if you delete row 2… hit submit, come back, and youll see what happens. Both Row 2 and 3 are gone. When it should show rows 1 and 3.

3. Directions: This one is even more weird.

On first submit, with cleared session, I add:
Direction1, Direction 2, Direction 3
Hit Submit, return to page, I see one, two three. Good!

If I delete Direction 3. Hit Submit and Return. Direction 3 Is gone! Good!

I add Direction 3 back, hit Submit, return to page. And its back. So far so good!

Now I click the "x" to delete Direction 2, hit submit, return to page. I see, Direction 1 and Direction 3. Still good!

Now the problems….

So I now have Direction 1, and Direction 3. I will add a new row for Direction 4.
Hit Submit, return, and now it has replaced Direction 3 with Direction 4.
So now I see: Direction 1 and Direction 4 only. This should have been: Direction 1, Direction 3, Direction 4.

I tried to explain this the best I could in text, if we can chat on the phone or skype it may be easier to explain.

Please make sure you test every aspect of the form to make sure it works for every possible action that the user can take. Thats the idea with any application right?

I need this done as quickly as possible.

The bidder with the clear english, fast turnaround time and expert javascript skills will get the job.

Thanks!

Tags: add fields form javascript, add fields form javascript php, add fields together form javascript, add fields website form javascript, delete, direction, dynamically add fields form php, fields, form, javascript add fields form, javascript add fields form php, javascript form dynamically add fields, php form javascript add fields, php javascript form add fields, return, submit, three