issue using jquery/javascript submit() to send form to php

Posted on 2010-08-23
Medium Priority
Last Modified: 2012-05-10

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?

      $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);
                  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);
                  echo "File type not supported, .gif, .jpg or .png required!";
            $filename = urlencode($filename);
            header("Location: crop.php?filename=$filename&height=$orig_h");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
            <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.');
                  bgiframe: true,
                  autoOpen: false,
                  height: 400,
                  width: 400,
                  modal: true,
                  buttons: {
                        'Save': function() {
                                          var caption=$("#captionAlbum");
                                          var albumCoverImage=$("#albumCoverImage"); 
                                          var albumCover=$("#albumCover"); 
                                          //$.post("../addAlbumdb.php", {caption:caption.val(),albumCoverImage:albumCoverImage.val()});
                                          alert("about to post");
                        Cancel: function() {
                  close: function() {
                  function createNewAlbum(albumSelected)
                        if(albumSelected == 1){
            <h1>Opus1 Gallery - Image Upload</h1>
            <form id="uploadFrm" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
                        <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"/>
            <div id="addAlbumDialog" title="Add Album" style="display:none">                  
                        <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"/> 

Open in new window

Question by:cgray1223
  • 2
  • 2

Author Comment

ID: 33507404
lines of interest are:

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

Expert Comment

ID: 33508993
I am not sure why the submit isn't working but you can try replacing




which should submit the form

Author Comment

ID: 33517879
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

Accepted Solution

Silhouette earned 2000 total points
ID: 33518964
isset($_POST['submit']) checks to see if there is a value for 'submit' which only happens if you press a button with the name 'submit'.
A better options is to check
    if(isset($_FILES['image']['name']) && $_FILES['image']['name'] != ''")
This will show you if a file has been uploaded

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question