Display form fields after submit

I have a form with a drop down box.  If you select the first or second option in the drop down box, form fields and a button will display.   After filling out the form fields and submitting the information, the form fiields disappear and you have to select the option again in the drop down box.  How do you keep the option that was selected "showing" until another option is selected???   The code is below

<script type="text/javascript">
function toggle(show)
    if (this.currvisible) {
        document.getElementById(currvisible).style.display = 'none';

    if (show) {
        document.getElementById(show).style.display = '';
        this.currvisible = show;
<form method="post">
<select onchange="toggle(this.options[this.selectedIndex].value);">
<option value=''>Select</option>
<option value="d1">Option One</option>
<option value="d2">Option Two</option>
<div id="d1" style="display: none;">
<input type="text">
<input type="submit" value="Submit">
<div id="d2" style="display: none;">
<input type="text">
<input type="text">
<input type="submit" value="Submit">
<div id="results"><c:out    value="${param.results}"  /></div>
Who is Participating?
Hi, I was busy so I forgot about your post, sorry about that.

First let me clarify what I meant by using "AJAX", and by "AJAX" I meant XhttpRequest (= JavaScript).

Of what I read from your question it seemed that the best way of doing what you where trying would be to submit the information without reloading the page, because the method you are thinking about (select 1: submit; select 2: submit etc.) could become very tedious for a user even if it's only 2 selects.

Now to answer your question after you clearly stated "PHP, ASP, .NET, or JAVA do this?" I will leave the JavaScript.

First, it is possible (if I have understood what you want to do correctly).

Secondly, how you could do this:

This is a quick sketch:

1. Set the action attribute to the name of the file that is going to process the form (let's called it "process.php".
2. In "process.php" (which will be activated when the user presses "onSubmit") the value from the form that has been chosen/filled will be taken.
3. The "process.php" will then create a new html page that looks like the previous, with "select 1" and its value selected, along side a new option/input tag with "select 2".
4. The site is than created.
5. Repeat until all "select steps" are done, and then send the page to its final processing.

I could give you more details regarding the code for the "process.php" file if you want to (but only PHP, though I do not work with ASP, JAVA).

Otherwise, good luck to.
I am not sure, but your problem seem to be the use of the "submit/form" tags.

Try put this attribute in the form tag "action="file" (where "file" is a the name of the server side script name. If you do not have one just put "file.php").

Now submit. You will be taken to whatever the server side script page takes you, or if you didn't have one and used "file.php" you will be taken to an error page. Now, press the "back" button -- and this is what I am trying to point out -- your form is still there.

I think that you need to use "AJAX" for what you are trying to do. I would recommend that you use an AJAX driven solution, but I think that you could do it with a server side solution also (when the script returns the page have whatever forms shown that you want to be shown).
design_webAuthor Commented:
Actually when I insert action="file.php" it goes to an error page and when I press the back button the form isn't there.
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

design_webAuthor Commented:
Well EE doesn't have a option for AJAX. I don't even know what to search for to find info on what I want to do here.

Hello design_web,

The behavior you're describing sounds logical for me. Once submitted, the page is gone. As it sounds like you're calling the same page name, you got a fresh page displayed after that, with default value.

To get previous value pre-filled, you need a way to store the previous state. One way is to read the values passed by the form, and pre-select it in the form (when building the form). This cannot be done with javascript, but rather a server side language (ASP, PHP, ...).

If you want to only use javascript, you may want to store the information into a cookie, and when loading the page, start by reading the cookie (if any), and modify the default selection accordingly.


design_webAuthor Commented:
I don't think you understand what I'm asking.  Let me go through it again  
1. I select option 1 from the drop down menu.  
2. I fill out the form and press submit.  
3. After pressing submit it stays on the same page but the form fields are gone.  

Since the form field are gone, I have to select the drop down menu again and select option one.  Once I select the option, I want that option to stay no matter how many times I submit the form.  How can PHP, ASP, .NET, or JAVA do this???? I don't konw how so tell me if there's away because I don't think there's a away to keep the form fields visible after submitting using those languages.



Unless I've missed something, your step 3 is actually:
3a. submit sends data to page with same url
3b. new page (fresh) with same url is displayed

So, you may have the feeling to "stay on the same page". Indeed, you're at the same location (URL), but the page (content) is different (renewed, in your case).

If this makes sense, then my post above should make sense also. To answer in short your question  (how can PHP, ...,  do this), a basic example:

<SELECT NAME="flavor">
<OPTION value="V">Vanilla
<OPTION value="S" <?php if ($flavor=="S") echo " selected"; ?>>Strawberry
<OPTION value="R">Rum and Raisin
<input type="submit" value="Submit">

--> if previous submission was Strawberry, it will be selected next display, thanks to the PHP code section : <?php if ($flavor=="S") echo " selected"; ?>


PS: I still don't understand what you're form is meant for. For instance, currently, your fields have no names, so content/result cannot be processed after submission....
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.