Go Back   CodingForums.com > :: Client side development > JavaScript programming > Ajax and Design

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-24-2007, 09:46 PM   PM User | #1
mtparsons
New to the CF scene

 
Join Date: Jul 2007
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
mtparsons is an unknown quantity at this point
Issue with form within an Iframe

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.
Code:
document.postUploadForm.submit();
The html page is as follows.
Code:
<head>
		<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"/>
	</head>
	
	<body onload="load()" onunload="GUnload()">
		<?php
			include ('http://madison.colgate.edu/maps/menu.htm');
		?>
		<br>
		<center>
		<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" />
				<table>
					<tr>
					<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>
					</tr><tr>
						<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>
					</tr><tr>
						<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>
					</tr><tr>
						<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>
					</tr>	
				</table>
				</form>
					<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()"/>
					</form>
					<div id="map" style="height:275px;width:575px;"></div>
		</center>
		<iframe>
			<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"/>
			</form>
		</iframe>
	</body>
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.

Mike
mtparsons is offline   Reply With Quote
Old 07-24-2007, 10:42 PM   PM User | #2
StupidRalph
Senior Coder

 
Join Date: Mar 2003
Location: Atlanta
Posts: 1,037
Thanks: 14
Thanked 30 Times in 28 Posts
StupidRalph is on a distinguished road
Quote:
Originally Posted by mtparsons View Post
Code:
document.postUploadForm.submit();
Mike
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...
Code:
window.frames[0].postUploadForm.submit();
Reference
http://www.devguru.com/Technologies/...in_frames.html
Edit: 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.
Code:
[window.]document.getElementById("elementID")
__________________
Most of my questions/posts are fairly straightforward and simple. I post long verbose messages in an attempt to be thorough.

Last edited by StupidRalph; 07-24-2007 at 11:54 PM..
StupidRalph is offline   Reply With Quote
Old 07-25-2007, 01:44 PM   PM User | #3
mtparsons
New to the CF scene

 
Join Date: Jul 2007
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
mtparsons is an unknown quantity at this point
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?
mtparsons is offline   Reply With Quote
Old 07-25-2007, 05:43 PM   PM User | #4
mtparsons
New to the CF scene

 
Join Date: Jul 2007
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
mtparsons is an unknown quantity at this point
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.
mtparsons is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:07 AM.


Advertisement
Log in to turn off these ads.