Display form fields after submit

Posted on 2007-08-06
Last Modified: 2008-03-06
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>
Question by:design_web
    LVL 3

    Expert Comment

    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).

    Author Comment

    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.

    Author Comment

    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.
    LVL 10

    Expert Comment


    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.



    Author Comment

    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.

    LVL 10

    Expert Comment



    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....
    LVL 3

    Accepted Solution

    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.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    This article will show, step by step, how to integrate R code into a R Sweave document
    Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now