mtparsons
07-24-2007, 09: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.
document.postUploadForm.submit();
The html page is as follows.
<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
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.
document.postUploadForm.submit();
The html page is as follows.
<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