Question

我有点问题。为什么在运行js脚本之前必须在提交按钮上单击两次？我希望当我单击按钮时数据被发送，并且js脚本在没有再次单击的情况下运行这是我的页面：

<html>
<head>
  <script src="js-scripts.js"></script>
  <style>
  .content {
    max-width: 600px;
    margin: auto;
  }
  .test{
    width:200px;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="content" id="tot-op">
  <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
    <center>
      <div class="content" id="tot-op">
        <fieldset>
          <input type="number" min="1" max="7" name="num" required>
          <br><br>
          <input type="submit" value="Invia" onclick="hide()">
        </fieldset>
      </div>
    </center>
  </form>
  </div>
  <div id="insert" style="display:none">
    <?php
    $test=$_POST["num"];
    echo $test;
    ?>
  </div>
</body>
</html>

这是我的剧本：

function hide(){
     document.getElementById("tot-op").style.display = "none";
     document.getElementById("insert").style.display = "block";
  }

我该怎么办？

Answer 1

在表单中添加id属性，如：

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" id="test-form">

将您的按钮定义更改为：

<input type="button" value="Invia" onclick="hide()">

然后，在hide()内添加表单提交操作，如：

function hide()
{
    document.getElementById("test-form").submit();

    document.getElementById("tot-op").style.display = "none";
    document.getElementById("insert").style.display = "block";
}

Answer 2

您可以随时突破php并使用条件块运行JavaScript代码或操作HTML。仅当条件返回<script>时，true标记下方才会添加到文档中。它类似于echo "<script>...</script>"。

因此，您的表单数据将被处理，并且Javascript代码也会运行你想要的方式。

<?php
if( isset($_POST["sButton"]) ) //I had done a mistake here
{ //start if
//close php and add script which will run only if the variable $_POST["num"] is set
?>  

<script>
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
</script>

<?php
//start php again and complete the if block
$test=$_POST["num"];
echo $test;
} //end of if block
?>

设置提交按钮的名称。我在这里使用了sButton并使用了 if( isset($_POST["sButton"]) )。我在上面进行了更改并删除了onclick。这里不需要。

<input type="submit" name="sButton" value="Invia">

在js运行之前，我必须在提交按钮上单击两次。为什么？

2 个答案: