I wonder whether someone could help me please.
I’ve really got myself in a bit of a pickle with this and I just seem to be going round in circles to find a solution.
I have created this modal dialog page to allow users to upload images. I would like to access this through the click of the ‘Upload Images’ button on this page.
The problem I have is two fold, but are linked.
I can’t seem to get the modal dialog page to act as a pop dialog hovering over the parent page, instead it opens as another web browser page, and because I’m using two submit buttons, I can’t get the ‘submit’ functionality to work independently i.e. one that submits the form, whilst the other opens up the modal dialog.
I’ve been working on this for quite some time now, changing the button types, giving specific name to each button and calling that in a Javascript function, but I just can’t seem to find the solution.
I just wondered whether someone could perhaps have a look at this please and help me with this problem.
For ease, I’ve added the code below:
Modal Dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#dialog").dialog();
modal: true
//getter
var modal = $( ".dialog" ).dialog( "option", "modal" );
//setter
$( ".dialog" ).dialog( "option", "modal", true );
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="dialog">
</head>
<?php
//define a maxim size for the uploaded images
//define ("MAX_SIZE","100");
// define the width and height for the thumbnail
// note that theese dimmensions are considered the maximum dimmension and are not fixed,
// because we have to keep the image ratio intact or it will be deformed
define ("WIDTH","150");
define ("HEIGHT","100");
// this is the function that will create the thumbnail image from the uploaded image
// the resize will be done considering the width and height defined, but without deforming the image
function make_thumb($img_name,$filename,$new_w,$new_h)
{
//get image extension.
$ext=getExtension($img_name);
//creates the new image using the appropriate function from gd library
if(!strcmp("jpg",$ext) || !strcmp("jpeg",$ext))
$src_img=imagecreatefromjpeg($img_name);
if(!strcmp("png",$ext))
$src_img=imagecreatefrompng($img_name);
//gets the dimmensions of the image
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
// next we will calculate the new dimmensions for the thumbnail image
// the next steps will be taken:
// 1. calculate the ratio by dividing the old dimmensions with the new ones
// 2. if the ratio for the width is higher, the width will remain the one define in WIDTH variable
// and the height will be calculated so the image ratio will not change
// 3. otherwise we will use the height ratio for the image
// as a result, only one of the dimmensions will be from the fixed ones
$ratio1=$old_x/$new_w;
$ratio2=$old_y/$new_h;
if($ratio1>$ratio2) {
$thumb_w=$new_w;
$thumb_h=$old_y/$ratio1;
}
else {
$thumb_h=$new_h;
$thumb_w=$old_x/$ratio2;
}
// we create a new image with the new dimmensions
$dst_img=ImageCreateTrueColor($thumb_w,$thumb_h);
// resize the big image to the new created one
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);
// output the created image to the file. Now we will have the thumbnail into the file named by $filename
if(!strcmp("png",$ext))
imagepng($dst_img,$filename);
else
imagejpeg($dst_img,$filename);
//destroys source and destination images.
imagedestroy($dst_img);
imagedestroy($src_img);
}
// This function reads the extension of the file.
// It is used to determine if the file is an image by checking the extension.
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
// This variable is used as a flag. The value is initialized with 0 (meaning no error found)
//and it will be changed to 1 if an error occurs. If the error occures the file will not be uploaded.
$errors=0;
// checks if the form has been submitted
if(isset($_POST['Submit']))
{
$title = ($_POST['title']);
if ($title == '') // if title is not set
$title = '(No Title Provided)';// use (empty title) string
//reads the name of the file the user submitted for uploading
$image=$_FILES['image']['name'];
// if it is not empty
if ($image == '')
{
echo '<b> Error! </b> - You <b> must </b> select a file to upload before selecting the <b> "Upload image" </b> button. Please try again.';
$errors=1;
}
else
if ($image)
{
// get the original name of the file from the clients machine
$filename = stripslashes($_FILES['image']['name']);
// get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
// if it is not a known extension, we will suppose it is an error, print an error message
//and will not upload the file, otherwise we continue
if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png"))
{
echo '<b> Error! </b> - The image that you attempted to upload is not in the correct format. The file format <b> must </b> be one of the following: <b> "jpg", "jpeg" </b> or <b> "png" </b>. Please try again.';
$errors=1;
}
else
{
// get the size of the image in bytes
// $_FILES[\'image\'][\'tmp_name\'] is the temporary filename of the file in which the uploaded file was stored on the server
$size=getimagesize($_FILES['image']['tmp_name']);
$sizekb=filesize($_FILES['image']['tmp_name']);
//compare the size with the maxim size we defined and print error if bigger
if ($sizekb > 1150000)
{
echo '<b> Error! </b> - The file that you are attempting to upload is greater than the prescribed <b> 1MB </b> limit. Please try again.';
$errors=1;
}
//we will give an unique name, for example the time in unix time format
$image_name=$title.'.'.$extension;
//the new name will be containing the full path where will be stored (images folder)
$newname="images/".$image_name;
$copied = copy($_FILES['image']['tmp_name'], $newname);
//we verify if the image has been uploaded, and print error instead
if (!$copied)
{
echo '<b> Error! </b> Your file has not been loaded';
$errors=1;
}
else
{
// the new thumbnail image will be placed in images/thumbs/ folder
$thumb_name='images/thumbs/'.$image_name;
// call the function that will create the thumbnail. The function will get as parameters
//the image name, the thumbnail name and the width and height desired for the thumbnail
$thumb=make_thumb($newname,$thumb_name,WIDTH,HEIGHT);
}} }}
//If no errors registred, print the success message and show the thumbnail image created
if(isset($_POST['Submit']) && !$errors)
{
echo '<br><b> Success! </b> - Your image has been uploaded</br>';
echo '<img src="'.$thumb_name.'">';
}
?>
<!-- next comes the form, you must set the enctype to "multipart/form-data" and use an input type "file" -->
<form name="newad" method="post" enctype="multipart/form-data" action="">
<table>
<tr><td><input type="text" name="title" ></td></tr>
<tr><td><input type="file" name="image" ></td></tr>
<tr><td><input name="Submit" type="submit" value="Upload image"></td></tr>
</table>
</form>
</div>
</html>
Parent Page Form Code
<form name="savemyfindstolocation" id="savemyfindstolocation" method="post" action="testdialog.php">
<p><label></label>
</p>
<p align="left">
<input name="userid" type="text" id="userid"/>
<input name="locationid" type="text" id="locationid"/>
<br />
</p>
<div>
<label>
<div align="left">Click on the map to place the marker for the find that has been made and drag until the precise location has been found. </div>
</div>
<p align="left"><label>Find OSGB36 Latitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lat" type="text" id="findosgb36lat" size="20" />
</div>
</div>
<p align="left"><label>Find OSGB36 Longitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lon" type="text" id="findosgb36lon" size="20" />
</div>
</div>
<p align="left"><label>Date of Trip<br />
</label>
</p>
<div>
<div align="left">
<input name="dateoftrip" type="text" id="dateoftrip" size="10" />
</div>
</div>
<p align="left"><label>Find Category</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM findcategories";
$result = mysql_query($query);
?>
<select name="findcategory" id="findcategory">
<option value=''>Select a Find Category</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['findcategory'];?>"> <?php echo $line['findcategory'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">Find Name</p>
<div>
<div align="left">
<input name="findname" type="text" id="findname" size="35" />
</div>
</div>
<p align="left"> Find Description</p>
<div>
<div align="left">
<input name="finddescription" type="text" id="finddescription" size="150" />
</div>
</div>
<p align="left">
<label> Detector Used</label>
</p>
<div>
<div align="left">
<select id="detectorname" name="detectorname" onchange="getTextList(this)">
<option value="">Select a Detector</option>
<?php
// QUERY DATABASE TO GET CATEGORIES
$query = mysql_query("SELECT detectorid, detectorname FROM detectors ORDER BY detectorname ASC") or die(mysql_error());
// LOOP THROUGH ROWS RETURNED TO CREATE SELECT BOX
while($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['detectorid'].'">'.$row['detectorname'].'</option>';
}
?>
</select>
</div>
</div>
<p align="left">
<label>Search Head Used<br />
</label>
</p>
<div>
<div align="left">
<select id="searchheadname" name="searchheadname">
</select>
</div>
</div>
</div>
<p align="left">
<label>Detector Settings</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<textarea name="detectorsettings" cols="50" rows="12" id="detectorsettings"></textarea>
</div>
</div>
<p align="left">
<label>PAS Ref. (if known)<br />
</label>
</p>
<div>
<div align="left">
<input name="pasref" type="text" id="pasref" size="9" />
</div>
</div>
<p align="left"><label>Additional Comments</label>
</p>
<div>
<div align="left">
<textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments"></textarea>
</div>
</div>
</p>
<p>
<label>
<div align="left">
<input name="uploadimages" type="submit" id="uploadimages" value="Upload Image(s)"/>
</div>
</label>
</p>
<p align="left"><label>Do you wish to make this find public?<br />
</label>
</p>
<div>
<div align="left">
<?php
mysql_connect("host", "user", "password") or die("Connection Failed");
mysql_select_db("database")or die("Connection Failed");
$query = "SELECT * FROM makepublicoptions";
$result = mysql_query($query);
?>
<select name="makepublic" id="makepublic">
<option value=''>Choose 'Yes' or 'No'</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['publicoption'];?>"> <?php echo $line['publicoption'];?> </option>
<?php
}
?>
</select>
</div>
</div>
<p align="left">
<input name="submit" type="submit" value="Submit" />
</form>
Sincere thanks and regards
Try this:
HTML
Use a
<button>element isntead of a submit button. Forms should never have more than one ‘submit’ button.JS