Forum Moderators: coopster
I just found out after making a very complicated web form that the submit button doesn't work in Internet Explorer but it works fine in Firefox. The form has a nested form which is necessary (its an ajax file upload form).
Is their any way around this issue?
why cant everyone just use firefox?
:)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form method="post" action="insertSurvey.php" >
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<input type="hidden" name="AudioFile-1" value=""/>
<p id="f1_upload_process"><!--Loading...--><!--<img src="questionInfo/loader.gif" />--></p>
<p id="f1_upload_form" align="center">
<label>
<input name="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" class="sbtn" value="Upload" />
</label>
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
<input type="hidden" name="submitCheck" value="1" />
<input id="smsSubmitBtn" type="image" src="images/nextBtn.gif" alt="Submit" style="float:right; margin-right:30px;" />
</form>
</body>
</html>
However, I then noticed you have a form nested inside a form, and this is of course not valid. It was at this point I noticed both were submitting to insertSurvey.php. which is probably what you mean by not working.
Close the first form before starting the second.
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
...........
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
<form method="post" action="insertSurvey.php" >
............
</form>
<form method="post" action="insertSurvey.php" >
(in here there is lots of form items)
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
for example; setting up an account with a website and in the middle of personal details form you have an upload profile picture section?
i'm confused..
on your proble, here are a couple of ideas:
make sure your submit buttons are named differently
make sure to use these new names in your proccess form
make sure you use id='' in all your form elements (this has to do with your css and or any javascripts you may use in your form)
if having a form nested inside another form doesn't work, then how do people design a web form with a file uploader inside the form?
You would do something like
if (uploadfile) {
- proceed with upload
- return to original form
- store "was uploaded" as hidden, session variable, or cookie
}
else if (complete process) {
- if "was uploaded" exists and requires special handling, perform those tasks
- complete process
}
So if they opt not to upload an image, it completes the process without an image. If they upload an image and have not clicked "next," it returns to the same form. To avoid confusion, in this condition you may choose not to display the upload portion of the form.
As mentioned you can use Ajax/JS to dynamically submit a separate form, but IMO this only complicates the process and adds a possible problem when JS is disabled or broken.
I have not experimented with nested forms because it's invalid html and as you see it can produce unexpected results. My guess is that no matter what you do, the "outer" containing form action will be the one submitted to.
