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

【问题标题】：I have to click twice on my submit button before js run. Why?在 js 运行之前，我必须在我的提交按钮上单击两次。为什么？
【发布时间】：2018-03-17 16:48:46
【问题描述】：

我有一个小问题。为什么我必须在我的 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";
  }

我能做什么？

【问题讨论】：

当你第一次点击时，表单被提交了，对吧？然后你再次点击，js脚本运行？
@MathewsMathai 是的。它的功能就像你说的那样
那是因为您第一次填写表格然后submit action 有效，因为您已经满足了所有要求，第二次您可能没有填写表格就点击了按钮。因此，提交不会发生，但会触发 onclick。在第二次点击之前再次填写表格并检查会发生什么。
@MathewsMathai 好像是第一次
我没听懂你。您是否填写了两次点击的表单？

标签： javascript php html css linux

【解决方案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";
}

【讨论】：

如果在没有填写required字段的情况下点击按钮会发生什么？ onclick 电话无论如何都会起作用，对吧？
@teddo 将您的输入按钮定义从type="submit" 更改为type="button"。提交操作将在您的 hide() JS 脚本中完成。
@LenielMacaferi document.getElementById("test-form").submit() 检查required 字段是否已填写？只是好奇。
@MathewsMathai 验证表单，您可以将onsubmit 添加到此处描述的表单中：w3schools.com/js/js_validation.asp

【解决方案2】：

您始终可以跳出php 并运行javascript 代码或使用条件块操作HTML。仅当条件返回 true 时，<script> 标记下方才会添加到文档中。类似于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">

【讨论】：

我必须在我的 php 代码上复制此代码吗？我必须将提交按钮更改为普通按钮吗？
你可以用这个替换你的 php 代码并尝试它是否按你想要的方式工作。我刚刚编辑了<script>...</script>。保持input 类型为submit。
我最初使用的是if( !isset($_POST["num"]) )。我打错了那个感叹号。感叹号使其成为if(false ) then enter，我们想输入if true，即如果设置了某个值。您可以删除感叹号和onclick 并保持其他所有内容相同或使用submit button instead of using the name field。如果您使用submit button，请给它一个name，然后使用name，就像我编辑的答案中显示的那样。