View Full Version : Issue with form within an Iframe

07-24-2007, 10:46 PM
Hi everyone,
I'm working on web applications this summer and I'm having an issue addressing a form that is help within a hidden iframe. I would like my page to upload photos to my server and then to Flickr without freshing the page. Since I had to do a post request I used a form within an Iframe that is not displayed. However, whenever I try to do a document.formname.submit(), I'm presented with a formname has no properties error. I've tried addressing it multiple different ways but with no luck each time. Does anyone have any suggestions? here's some of the code for my site. This is the line currently in the javascript.


The html page is as follows.

<title>Batch Upload Flickr Photos</title>
<link href="upload.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="lib/main.js"></script>
<script type="text/javascript" src="lib/upload.js"></script>
<script src ="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7EaXE5Ni5FkfpssrgwUw2BR-tLEIcZMYBCupoXZ7e-ffp3qUxhRlUl1gC0zBWs1Sq0MCDvd-mT4McQ" type="text/javascript"></script>
<link href="main.css" type="text/css" rel="stylesheet"/>

<body onload="load()" onunload="GUnload()">
include ('http://madison.colgate.edu/maps/menu.htm');
<p>Use this page to upload and geo-tag your Flickr photos simultaneously. Click <a href="http://madison.colgate.edu/maps/mike-index.html">here</a> to return to the main page.</p>
<form action="">
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" />
<input type="hidden" value="" name="lat" id="lat"/>
<input type="hidden" value="" name="lng" id="lng"/>
<td><input type="button" name="uploadButton" value="Upload Photo" id="uploadButton" disabled=true title="This button will only activate after the user has filled out the appropiate fields" onClick="upload()"/>
<td><input type="reset" name="Reset" value="Reset" /></td>
<td><label title="Title of the photo">Title: </label></td>
<td><input name="title" type="text" id="title" size="30" onChange="verifyFields()" value=""/></td>
<td><label title="Photo's Address on your computer">Photo: </label></td>
<td><input name="image" type="file" size="20" id="image" onChange="verifyFields()" value=""/></td>
<td>Save Template: <input type="checkbox" id="saveTemplate"/></td>
<td><label title="Tags you want associated with the photo">Tags: </label></td>
<td><input name="tags" type="text" id="tags" size="30" value="" onChange="verifyFields()"/></td>
<td><label title="Description of what is in the photo">Description: </label></td>
<td><textarea name="description" cols="25" rows="5" wrap="VIRTUAL" id="description" onChange="verifyFields()"></textarea></td>
<td><label title = "Who you want to be able to view this photo">Privacy:</label></td>
<td><input type="radio" name="privacy" value="public" checked="checked" title="Everyone can see this photo"/> Public<br>
<input type="radio" name="privacy" value="private" title="Only you can see this photo"/>Private<br>
<input type="radio" name="privacy" value="friends" title="Only your friends can see this photo"/>Friends Only<br>
<input type="radio" name="privacy" value="family" title="Only your family can see this photo" />Family Only<br>
<input type="radio" name="privacy" value="friendsfamily" title="Both your friends and family can see this photo"/>Friends and Family<br></td>
<td><label title="The address you would like the map to zoom in on">Enter an adress: </label>
<form action="javascript:locationLook()"></td>
<input type="text" name="geosearch" id="gsearch" size="30"/>
<input type="button" value="Center Map on Location" onclick="locationLook()"/>
<input type="button" value="Recenter Marker" onclick="recenterMarker()"/>
<div id="map" style="height:275px;width:575px;"></div>
<form name="postUploadForm" enctype="multipart/form-data" method="post" action="doUpload.php">
<input type="hidden" value="" name="latSubmit" id="latSubmit"/>
<input type="hidden" value="" name="lngSubmit" id="lngSubmit"/>
<input name="titleSubmit" type="hidden" id="titleSubmit" value=""/>
<input name="imageSubmit" type="file" id="imageSubmit" value=""/>
<input name="tagsSubmit" type="hidden" id="tagsSubmit" value=""/>
<input name="descriptionSubmit" type="hidden" id="descriptionSubmit"></textarea>
<input type="hidden" value="" name="privSubmit" id="privSubmit"/>

The link to the site itself if anyone thinks that will help is http://madison.colgate.edu/maps/batchupload/index.php .Thanks everyone for looking at it.


07-24-2007, 11:42 PM

Hey Mike, currently you are telling your code to look for a form named "postUploadForm" from within your page when its not. Its inside of an IFRAME thats inside your page.

Try something like this...


You may have to use document after frames[0] (e.g. window.frames[0].document.postUploadForm.submit();) I haven't used frames in several years I can't remember.
Alternatively, you can give your iframe an id and use something like this to reference the iframe.


07-25-2007, 02:44 PM
Thanks for responding so quickly! I tried that what you suggested along with multiple variations such as top.window.document.forms["postUploadForm"].submit() and all the different variations I could think of. Also, I tried giving the iFrame an id and a name and looking for it that way. Neither of those two methods worked either. Any other suggestions?

07-25-2007, 06:43 PM
Thanks to everyone who looked at this thread and took a look at the source code. I'm using a new work around so that I don't have a form within the Iframe.