PHP not working on js form

Question

I have a form on my website(http://hokuco.com/test/). It creates a folder with php, but ever since I installed a javascript my php is not working. The javascript redirects to the folder the php creates. Ironically, before I made the javascript work, the php works.

focus on the area between the two barriers that look like this:

<!--===========-->

index.php:

<?php 
function recurse_copy($src,$dst) {
  $dir = opendir($src); 
  @mkdir($dst); 
  while(false !== ( $file = readdir($dir)) ) { 
      if (( $file != '.' ) && ( $file != '..' )) { 
         if ( is_dir($src . '/' . $file) ) { 
             recurse_copy($src . '/' . $file,$dst . '/' . $file); 
         } 
         else { 
             copy($src . '/' . $file,$dst . '/' . $file); 
         } 
      } 
  } 
 closedir($dir); 
}
 
$src = "./xe7";
 

$dst = $_POST['foldername']; 
 
recurse_copy($src,$dst);
?>
<link rel="stylesheet" type="text/css" href="style.css" />
<div>
<body onload="timer=setTimeout('removeControls();',3)">
<h1>Drawblog</h1>
<div class="FAQ" style ="box-shadow: 1px 1px 3px rgba(0,0,0,0);">
    <a href="#hide1" class="hide" id="hide1">Controls</a>
    <a href="#show1" class="show" id="show1">-</a>
        <div class="list" style ="box-shadow: 1px 1px 3px rgba(0,0,0,0);">
  <!--===========-->
<form method="post" id ="form" action ="index.php">
<input type="text" name="foldername" id ="togl">
<input type="submit" name="submit" value="Create panorama">
   <script type="text/javascript">
window.onload = function () {
    document.getElementById("form").onsubmit = function () {
        var folder = document.getElementById("togl").value;
        window.location.href ="http://hokuco.com/test/" + folder + "/toggle.php";
        return false;
    }
}
    </script>
 </form>
  <!--===========-->
<h3>Or,</h3>
<h2>Login with an access code(the account you just typed into the box above, or a code someone shared with you)</h2>
    <input type="text" id="field" />
    <button id="submit">Go</button>
<link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript">
document.getElementById("submit").addEventListener("click", function(){
  var folder = document.getElementById("field").value;
  var url = "http://hokuco.com/test/" + folder + "/index.html";

  window.location.href = url;
});
    </script>
         </div>
</div>
<h1>&nbsp;</h1>
<h1>&nbsp;</h1>
<p>make shocking panoramas in minutes, no account needed</p>
<br/>
<br/>
<br/>
<br/>
<p>special thanks to:</p>
  <div id="info"><a href="http://threejs.org" target="_blank">three.js css3d</a> - panorama.</div>

 <h5>a hokuco company</h5>
</div>

I think probably the reason you have down-votes is because of the large script you posted ... try to weed out all the irrelevant code, to make your code snippet easier to read ... keep in mind that as you do that, you may inadvertently discover the problem ... — dsdsdsdsd, Mar 23 '16 at 23:37
When the `onsubmit` function returns `false`, that prevents the form from submitting, so `$_POST['foldername']` is not set. — Barmar, Mar 23 '16 at 23:37

TerraPass · Answer 1 · 2016-03-24T00:03:22.383

<form method="post" id ="form" action ="index.php">
<input type="text" name="foldername" id ="togl">
<input type="submit" name="submit" value="Create panorama">

</form>

Alright. Before you added JS code, your form used to be submitted to index.php when the user pressed the submit button.

However, now you have added a handler to onsubmit event for this form.

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("form").onsubmit = function () {
            var folder = document.getElementById("togl").value;
            window.location.href ="http://hokuco.com/test/" + folder + "/toggle.php";
            return false;
        }
    }
</script>

Note that your handler returns false, thus suppressing the default behaviour of form submission. Indeed, it needs to return false to be able to perform redirection.

However, now that you've introduced your own onsubmit handler, you need to provide your own custom JavaScript code to submit form. One way to do so, using jQuery, is like this:

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("form").onsubmit = function () {
            // Submit form to index.php
            $.post('index.php', $('#form').serialize(), function() {
                // Perform redirection, once submission succeeds
                var folder = document.getElementById("togl").value;
                window.location.href ="http://hokuco.com/test/" + folder + "/toggle.php";
            });
            return false;
        }
    }
</script>

You might also want to consider removing JS handler altogether and instead implementing redirection logic in PHP.

score 0 · Accepted Answer · edited May 23 '17 at 11:45

You are redirecting the user when the on-submit button is pressed. This happens instead of submitting the form.

If you want to submit the form, wait till it's work is done, and then redirect the user to the new location, you could use AJAX to submit the form, and a callback to redirect the user once it's done. See this: submit the form using ajax

Alternatively you could just use a php redirect in the page form submits to, and send the user there. Since this page is both the form and the submit target you could use something like:

if (isset($_POST['foldername'])) {
    $dst = $_POST['foldername']; 
    recurse_copy($src, $dst);
    $destURL = "http://hokuco.com/test/".$dst."/toggle.php";
    header('Location:  '.$destURL);
    die('redirecting, please wait. Alternatively use this url: '.$destURL);
}

This is very rudimentary and dangerous, since you are not cleaning the user input for the folder name (See this: Regular expression for folders), however it may help you understand the concept, in order to get to the next step.

PHP not working on js form

2 Answers2