0

I want that when the user clicks an image a pop up window shows up asking the user to input a name, in this case I want to create a folder in a directory therefore the user has to input the name of the new folder to be created.

Now to create the pop up I need to use javascript and to create the folder I need to use PHP (server side). I am using the following code:

When the user clicks the image:

<div>
    <a id="myLink" onclick="MyFunction();">
      <img src="images/create_folder.png" width="60px" alt="create folder"/>
    </a>
</div>

The code I am using to execute this operation:

<script>
    function MyFunction(){
    var foldername = prompt('Enter Folder Name');

        <?php
          $foldername = $_GET['foldername'];
          mkdir('users_page/folders/', true);
        ?>
    }
</script>

The pop up window I showing however when I click the ok button the folder is not being created.

Can any one please help.

Thanks!

3 Answers3

0

The PHP code runs before the page is loaded, this means it runs before the javascript. In order to execute PHP code by means of javascript you'll need to implement an AJAX request.

MeLight
  • 5,454
  • 4
  • 43
  • 67
0

Check out my answer on this question: Using AJAX to return query results based on drop down box

It's an commented example on how to do Ajax requests with Jquery & PHP. You might find it helpful as a starting point.

Community
  • 1
  • 1
herrjeh42
  • 2,782
  • 4
  • 35
  • 47
0

It is a good pratice on understand how php code works with javascript. Be precisely, how server works with client.

First, create a new file called CreateFolder.php and put it on same directory of javascript file and write following code.

<?php
    $foldername = $_POST['foldername'];
    mkdir('users_page/folders/matthewborgcarr/'.$foldername, true);
    echo 'the folder name is:' .$foldername;     // add this line
?>

Then, on your javascript, remove all php code and add ajax function

<script>
    function MyFunction(){
    var foldername = prompt('Enter Folder Name');

    $.ajax({
        type: "POST",
        url: 'CreateFolder.php',
        data: {foldername: foldername},
        success: function (dataCheck) {
            alert(dataCheck);      // foldername is returned on alert.
        }
    });
}
</script>
edisonthk
  • 1,403
  • 16
  • 35
  • Thank you for your reply. I tried this however it is not working. I am not good with Ajax could you kindly give me further information. thanks. – Matthew Borg Carr Sep 16 '13 at 12:41
  • Can you be more specified with your not working. Do you means that new folder is not created. – edisonthk Sep 16 '13 at 14:18
  • It is better you show me the apache log by cat /var/log/apache2/error.log – edisonthk Sep 16 '13 at 14:18
  • yes the new folder is not being created. the prompt is working but when I click ok after I enter the folder's name the folder is not being created. It seams that there is no connection between the php file and the javascript. The variable foldername is not passing. – Matthew Borg Carr Sep 16 '13 at 16:53
  • 1. check the permissions (can the php script create folders?). 2. are the php script and the javascript running on the the same domain like (dev.myfancy-app.com)? Otherwise you have to do a "cross domain request" – herrjeh42 Sep 16 '13 at 16:56
  • yes they are working on the same domain, actually so far I am working locally (localhost). I have tested whether the php is able to create folders, and it does... – Matthew Borg Carr Sep 16 '13 at 17:18
  • Php code: – Matthew Borg Carr Sep 16 '13 at 17:19
  • I updated 2 placed on my code, one on php and one on success function. Can you tried it and check if there foldername is shows on alert. – edisonthk Sep 16 '13 at 17:40
  • can you also check what's happening in Chrome's developer tools or Firebug? In Chrome you should see a request in the Network tab once you entered something in the popup. Click on this request and check the values, e.g. the response. – herrjeh42 Sep 17 '13 at 08:27
  • edisonthk: I added the code you provided. And the foldername is showing on alert. I would say the problem is when passing the folder name to the php file (createfolder.php) so that it can create the folder with that same name.\ – Matthew Borg Carr Sep 17 '13 at 12:14
  • I changed the echo line in php to make sure the php file is actually working. and it is. (take a look at your php file above). it seems that the browser is loading the file and echoing: 'the folder name is:' however the $foldername is not showing. – Matthew Borg Carr Sep 17 '13 at 12:52
  • Strange... I have tested it on my browser and it does work. Either your browser not working with prompt or the pops blocking it. – edisonthk Sep 17 '13 at 13:41
  • I added two images which demonstrate that the user input is passing. I am sure that after I hit ok (refer to the secound image) the variable name is not passing to the php file (createfolder.php) via ajax. – Matthew Borg Carr Sep 19 '13 at 18:20
  • It worked! the problem was with the path. Thanks a lot! – Matthew Borg Carr Sep 26 '13 at 16:54