homepage Welcome to WebmasterWorld Guest from 54.166.123.2
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library, Charter, Moderators: coopster & jatar k

PHP Server Side Scripting Forum

    
Nested Form not working in IE
nested form not submitting in internet explorer
eatspinach




msg:3943313
 4:14 pm on Jun 30, 2009 (gmt 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?

:)

 

eatspinach




msg:3943341
 4:41 pm on Jun 30, 2009 (gmt 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>

rocknbil




msg:3943536
 8:57 pm on Jun 30, 2009 (gmt 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>

eatspinach




msg:3943892
 8:22 am on Jul 1, 2009 (gmt 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();" >

eatspinach




msg:3943899
 8:34 am on Jul 1, 2009 (gmt 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..

omoutop




msg:3943912
 8:52 am on Jul 1, 2009 (gmt 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)

rocknbil




msg:3944149
 4:14 pm on Jul 1, 2009 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved