cgray1223
asked on
issue using jquery/javascript submit() to send form to php
Hello,
I'm trying to use the javascript submit() to submit my form from my dialog window instead of using the input submit button in the form. The form never gets submitted when I call the $("#uploadFrm").submit(); any suggestions?
I'm trying to use the javascript submit() to submit my form from my dialog window instead of using the input submit button in the form. The form never gets submitted when I call the $("#uploadFrm").submit(); any suggestions?
<?php
$folder = 'images/';
$orig_w = 500;
$caption = $_POST[caption];
$albumCoverImage = $_POST[albumCoverImage];
if( isset($_POST['submit']) )
{
$imageFile = $_FILES['image']['tmp_name'];
$filename = basename( $_FILES['image']['name']);
$info = pathinfo($folder.$filename);
$fileext = $info['extension'];
list($width, $height) = getimagesize($imageFile);
$src ='';
if (strtolower($fileext) == 'png') {
$src = imagecreatefrompng($imageFile);
}
else if(strtolower($fileext) == 'gif'){
$src = imagecreatefromgif($imageFile);
}
else if(strtolower($fileext) == 'jpg'){
$src = imagecreatefromjpeg($imageFile);
}
else{
echo "File type not supported, .gif, .jpg or .png required!";
}
$orig_h = ($height/$width)* $orig_w;
$tmp = imagecreatetruecolor($orig_w, $orig_h);
imagecopyresampled($tmp, $src, 0,0,0,0,$orig_w,$orig_h,$width,$height);
if (strtolower($fileext) == 'png') {
imagepng($tmp, $folder.$filename,100);
}
else if(strtolower($fileext) == 'gif'){
imagegif($tmp, $folder.$filename,100);
}
else if(strtolower($fileext) == 'jpg'){
imagejpeg($tmp, $folder.$filename,100);
}
else{
echo "File type not supported, .gif, .jpg or .png required!";
}
imagedestroy($tmp);
imagedestroy($src);
$filename = urlencode($filename);
header("Location: crop.php?filename=$filename&height=$orig_h");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Opus1 Image Upload</title>
<link type="text/css" href="../jqueryui/css/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../jqueryui/ui/ui.core.js"></script>
<script type="text/javascript" src="../jqueryui/ui/ui.resizable.js"></script>
<script type="text/javascript" src="../jqueryui/ui/ui.dialog.js"></script>
<script type="text/javascript" src="../jqueryui/ui/effects.core.js"></script>
<script type="text/javascript" src="../js/jquery.opacityrollover.js"></script>
<link type="text/css" href="../jqueryui/css/demos.css" rel="stylesheet" />
<link type="text/css" href="../jqueryui/css/ui.theme.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/basic.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
$(document).ready(function() {
$("#upload").click(function() {
alert('Handler for .submit() called.');
$('#addAlbumDialog').dialog('open');
});
$("#addAlbumDialog").dialog({
bgiframe: true,
autoOpen: false,
height: 400,
width: 400,
modal: true,
buttons: {
'Save': function() {
var caption=$("#captionAlbum");
var albumCoverImage=$("#albumCoverImage");
var albumCover=$("#albumCover");
//alert(albumCover.val());
//$.post("../addAlbumdb.php", {caption:caption.val(),albumCoverImage:albumCoverImage.val()});
$(this).dialog('close');
alert("about to post");
$("#uploadFrm").submit();
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
//allFields.val('').removeClass('ui-state-error');
}
});
});
function createNewAlbum(albumSelected)
{
if(albumSelected == 1){
$('#addAlbumDialog').dialog('open');
}
}
</script>
</head>
<body>
<h1>Opus1 Gallery - Image Upload</h1>
<form id="uploadFrm" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<p>
<input type="file" name="image" id="image" size="50"/>
<input type="button" id="upload" value="Upload!"/>
<input type="submit" name="submit" value="Upload" id="submit" style="display: none"/>
</p>
</form>
<div id="addAlbumDialog" title="Add Album" style="display:none">
<fieldset>
<br />
<label for="captionAlbum">Caption:</label>
<input id="captionAlbum" type="text" name="captionAlbum"/>
<br />
<label for="albumCover">Album Cover:</label>
<input TYPE="checkbox" name="albumCover" id="albumCover">
<input id="albumCoverImage" type="hidden" name="albumCoverImage" value="default"/>
</fieldset>
</div>
</body>
</html>
I am not sure why the submit isn't working but you can try replacing
$("#uploadFrm").submit();
with
$("#submit").click();
which should submit the form
$("#uploadFrm").submit();
with
$("#submit").click();
which should submit the form
ASKER
The problem seems to be in line 6. The isset($_POST['submit'] isn't true when I do a submit from the javascript side but it's true when I click a submit button in the browser
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
105 - 111: form input buttons. Button with an id="upload" is the one that I attach the .click event to and launches my dialog window. In that dialog window, I have a save button that calls the javascript form submit.
84: javascript form submit called