Welcome to WebmasterWorld Guest from 50.16.52.237

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Nested Form not working in IE

nested form not submitting in internet explorer

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

Junior Member

5+ Year Member

joined:June 11, 2009
posts: 77
votes: 0


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?

:)

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

Junior Member

5+ Year Member

joined:June 11, 2009
posts:77
votes: 0


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>

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

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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>

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

Junior Member

5+ Year Member

joined:June 11, 2009
posts:77
votes: 0


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

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

Junior Member

5+ Year Member

joined:June 11, 2009
posts:77
votes: 0


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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 15, 2004
posts:941
votes: 0


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)

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

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members