CODEWITHSUNDEEP
phpjavascriptjqueryforms
input
input

Reputation: 7519

Send/receive data via jQuery to/from PHP

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}.";
    }
}
?>

Upvotes: 0

Views: 3109

Answers (3)

Simon
Simon

Reputation: 3539

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.

Upvotes: 1

Thomas Brasington
Thomas Brasington

Reputation: 588

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.

Upvotes: 1

andrei
andrei

Reputation: 8582

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/

Upvotes: 1

Related Questions