Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder
    Join Date
    Mar 2003
    Location
    Atlanta
    Posts
    1,037
    Thanks
    14
    Thanked 30 Times in 28 Posts
    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")
    Last edited by StupidRalph; 07-24-2007 at 11:54 PM.
    Most of my questions/posts are fairly straightforward and simple. I post long verbose messages in an attempt to be thorough.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •