Link to home
Start Free TrialLog in
Avatar of design_web
design_web

asked on

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

<html>
<head>
<title></title>
<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;
    }
}
//-->
</script>
</head>
<body>
<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>
</select><br>
<div id="d1" style="display: none;">
<input type="text">
<input type="submit" value="Submit">
</div>
<div id="d2" style="display: none;">
<input type="text">
<input type="text">
<input type="submit" value="Submit">
</div>
<div id="results"><c:out    value="${param.results}"  /></div>
</form>
</body>  
</html>
Avatar of numbers1to9
numbers1to9

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).
Avatar of design_web

ASKER

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

Rgds,
Werner.

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.









Hello,

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:


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

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

Rgds,
Werner.

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....
ASKER CERTIFIED SOLUTION
Avatar of numbers1to9
numbers1to9

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial