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(cu rrvisible) .style.dis play = 'none';
}
if (show) {
document.getElementById(sh ow).style. display = '';
this.currvisible = show;
}
}
//-->
</script>
</head>
<body>
<form method="post">
<select onchange="toggle(this.opti ons[this.s electedInd ex].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>
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function toggle(show)
{
if (this.currvisible) {
document.getElementById(cu
}
if (show) {
document.getElementById(sh
this.currvisible = show;
}
}
//-->
</script>
</head>
<body>
<form method="post">
<select onchange="toggle(this.opti
<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>
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.
ASKER
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.
ASKER
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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).