Send/receive data via jQuery to/from PHP

Question

I am using this code to make the user input a name to create a folder. I have modified the code to try and send the form data via jQuery and receive the success/failure message from PHP through jQuery.

However, when I enter the name of the folder, nothing happens. No folder is created nor any error displayed. Firebug does not show any error either.

This is the code I have till now:

create.php:

<html>
<head><title>Make Directory</title></head>
<body>
<div id="albumform">
    <form id="album_form" method="post" action="createAlbum.php" enctype="multipart/form-data">
        <p id="message" style="display:none;">
        <?php echo (isset($success)?"<h3>$success</h3>":""); ?>
        <?php echo (isset($error)?'<span style="color:red;">' . $error . '</span>':''); ?>
        </p>
        <input type="text" id="create_album" name="create_album" value="" />
        <input type="button" onclick="return checkForm('album_form');" id="btn_album" name="btn_album" value="Create" />
    </form>
</div>
</body>
</html>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  <script type="text/javascript">
  /* $("#btn_album").click(function() { */
                function checkForm(form) {
                    //create post data
                      var postData = { 
                        "create_album" : $("#create_album").val()
                      };

                      //make the call
                      $.ajax({
                        type: "POST",
                        url: "createAlbum.php",
                        data: postData, //send it along with your call
                        success: function(response){
                            $('#message').fadeIn();
                        }
                      });
                /* });   */
                }
  </script>

createAlbum.php:

<?php
/**********************
File: createDir.php
Author: Frost
Website: http://www.slunked.com
***********************/

// set our absolute path to the directories will be created in:
$path = $_SERVER['DOCUMENT_ROOT'] . '/web/photos/images/';


if (isset($_POST['btn_album'])) {
    // Grab our form Data
    $dirName = isset($_POST['create_album'])?$_POST['create_album']:false;

    // first validate the value:
    if ($dirName !== false && preg_match('~([^A-Z0-9]+)~i', $dirName, $matches) === 0) {
        // We have a valid directory:
        if (!is_dir($path . $dirName)) {
            // We are good to create this directory:
            if (mkdir($path . $dirName, 0775)) {
                $success = "Your directory has been created succesfully!<br /><br />";
            }else {
                $error = "Unable to create dir {$dirName}.";
            }
        }else {
            $error = "Directory {$dirName} already exists.";
        }
    }else {
        // Invalid data, htmlenttie them incase < > were used.
        $dirName = htmlentities($dirName);
        $error = "You have invalid values in {$dirName}.";
    }
}
?>

Simon · Accepted Answer · 2011-05-04 15:29:33Z

1

There are at least two seperate problems with your code:

In the php-file, you check if $_POST['btn_album'] is set. This field is not sent as it is not part of your ajax-request (You're only sending "create_album" : $("#create_album").val()). So the code that creates the folder is never executed.

Another problem is the part

    <?php echo (isset($success)?"<h3>$success</h3>":""); ?>
    <?php echo (isset($error)?'<span style="color:red;">' . $error . '</span>':''); ?>

in your response-message. This code is evaluated when the page loads, not during your ajax-request, so the php-variables $success and $error will always be undefined. You have to return those response-messages as response to the actual request and then use javascript to display them.

answered May 4, 2011 at 15:29

Simon

3,5391 gold badge21 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

input Over a year ago

Thanks for your input! I corrected the first problem and now it's creating the folder but not displaying the success/error message..which brings up the second problem. How would I display the success/error messages from the PHP file via jQuery?

Thomas Brasington Over a year ago

echo $error before your last brace and you that will get passed to your "success" in the ajax request. Then you can write $('#message).html(success)

andrei · Accepted Answer · 2011-05-04 15:22:04Z

1

The ajax request has a bad habit of failing silently. You should use jQuery post and take advantage of .success(), .complete(), and .error() functions to track your code. Also use the console.log() to check if the parameters are sent corectly. I'll try out the code myself to see the problem.

http://api.jquery.com/jQuery.post/

answered May 4, 2011 at 15:22

andrei

8,64014 gold badges53 silver badges68 bronze badges

Comments

Thomas Brasington · Accepted Answer · 2011-05-04 15:24:49Z

1

Due to the nature of the $.ajax request, $_POST['btn_album'] is not sent. So your php file gets here

if (isset($_POST['btn_album'])) {

and returns false.

also you need to echo $error to get a response.

answered May 4, 2011 at 15:24

Thomas Brasington

5882 silver badges7 bronze badges

Collectives™ on Stack Overflow

Send/receive data via jQuery to/from PHP

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related