PHP不适用于js表单答案

【问题标题】：PHP not working on js formPHP不适用于js表单
【发布时间】：2016-07-11 11:30:41
【问题描述】：

我的网站上有一个表格 (http://hokuco.com/test/)。它使用 php 创建一个文件夹，但是自从我安装了 javascript 后，我的 php 就无法正常工作。 javascript 重定向到 php 创建的文件夹。具有讽刺意味的是，在我使 javascript 工作之前，php 工作。

关注两个障碍之间的区域，如下所示：

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

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>

【问题讨论】：

请查看如何创建minimal reproducible example
我认为您投反对票的原因可能是您发布的大型脚本...尝试清除所有不相关的代码，以使您的代码 sn-p 更易于阅读.. . 请记住，当您这样做时，您可能会无意中发现问题...
当onsubmit函数返回false时，会阻止表单提交，所以$_POST['foldername']没有设置。

标签： javascript php html forms

【解决方案1】：

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

</form>

好的。在您添加 JS 代码之前，您的表单曾经在用户按下提交按钮时提交到index.php。

但是，现在您已经为这个表单的onsubmit 事件添加了一个处理程序。

<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>

请注意，您的处理程序返回false，从而抑制表单提交的默认行为。实际上，它需要返回false 才能执行重定向。

但是，既然您已经引入了自己的 onsubmit 处理程序，您需要提供自己的自定义 JavaScript 代码来提交表单。使用 jQuery 的一种方法是这样的：

<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>

您可能还想考虑完全删除 JS 处理程序，而是在 PHP 中实现重定向逻辑。

【讨论】：

【解决方案2】：

按下提交按钮时，您正在重定向用户。发生这种情况而不是提交表单。

如果你想提交表单，等到它的工作完成，然后将用户重定向到新的位置，你可以使用 AJAX 提交表单，并在完成后使用回调来重定向用户。看到这个：submit the form using ajax

或者，您可以在提交到的页面表单中使用 php 重定向，并将用户发送到那里。由于此页面既是表单又是提交目标，您可以使用以下内容：

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);
}

这是非常初级和危险的，因为您没有清理文件夹名称的用户输入（参见：Regular expression for folders），但是它可以帮助您理解这个概念，以便进入下一步。

【讨论】：