Welcome to WebmasterWorld Guest from 54.167.85.221

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Nested Form not working in IE

nested form not submitting in internet explorer

     

eatspinach

4:14 pm on Jun 30, 2009 (gmt 0)

5+ Year Member



Hello,

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?

:)

eatspinach

4:41 pm on Jun 30, 2009 (gmt 0)

5+ Year Member



Here is a cut down version of my code, as you can see the next button works fine in ff but not in ie

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

rocknbil

8:57 pm on Jun 30, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Well, as posted, it's "working" in both FF and IE7 here. But I don't have benefit of your CSS, so at first thought it would be something in the CSS . . .

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>

eatspinach

8:22 am on Jul 1, 2009 (gmt 0)

5+ Year Member



hmm i dont think that would work.. this code i have submitted is a cut down version of my actual code... my actual code has lots of form items in between the tags

<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();" >

eatspinach

8:34 am on Jul 1, 2009 (gmt 0)

5+ Year Member



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?

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

omoutop

8:52 am on Jul 1, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



form inside a form could be ajax based - not sure though

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)

rocknbil

4:14 pm on Jul 1, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month