Javascript 提交表格时的奇怪行为_Javascript_Php

Javascript 提交表格时的奇怪行为

javascript php

Javascript 提交表格时的奇怪行为,javascript,php,Javascript,Php,我正在测试一个代码示例，它将一个值从php传递到JavaScript，以便测试表单值这是我的密码： <!DOCTYPE html> <html lang="en"> <head> <title>Page 1</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquer

我正在测试一个代码示例，它将一个值从php传递到JavaScript，以便测试表单值

这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page 1</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
 <form method="post" action="essai.php">
    <input type="text" name="mail" id="mail" placeholder="mail"/><br />
    <input type="submit" value="Validate" />
 </form>

     <?php
        if (isset($_POST['mail'])){
            $data=789;
        }
    ?>    


  <script>


    var data = <?php echo json_encode($data); ?>;

    $(function(){

      $("form").on("submit", function() {
      if($("#mail").val().length < 4) {
          alert(data);
          return false;
      }

    });
  });

  </script>

</body>
</html>


第1页


var数据=；
$（函数（）{
$（“表格”）。在（“提交”，函数（）上{
if（$（“#mail”）.val（）.length<4）{
警报（数据）；
返回false；
}
});
});

因此，它假设在输入少于4个字符时弹出一条消息（789）

当我在表单中输入一个字母时，然后直接按enter键弹出窗口。但是当我填写表单时（仍然是一个字母），单击页面上的其他地方，然后单击验证，弹出窗口不会出现

我不明白为什么会有这种行为，可能是因为我在页面上的其他地方单击，撤消JavaScript操作，但为什么

有人有解释吗

谢谢

将您的HTML更改为此

 <form method="post" action="essai.php">
    <input type="text" name="mail" id="mail" placeholder="mail"/><br />
    <input type="submit" name="submit" value="Validate" />
 </form>

还有PHP

<?php
        if (isset($_POST['submit'])){
            $data=789;
        }
    ?>


var数据=；
$（函数（）{
$（“表格”）。在（“提交”，函数（）上{
if（$（“#mail”）.val（）.length<4）{
警报（数据）；
返回false；
}
else{$（this.form）.submit（）；}
});
});

@LucaJung同样的问题当我将php代码从脚本标记中移出时，我将编辑我的帖子。如果您在文档外部使用jquery。ready（）…将其包装起来，然后查看是否正确works@BernardParah-已经有一个文档就绪处理程序，尽管在任何情况下，JS都在它绑定事件处理程序的元素之后，因此它不需要文档就绪处理程序。@BernardParah我刚刚尝试了（$（document）.ready（function（）{myJavaScript}）；）但仍然存在相同的问题…您的JS工作正常：-但是，

$data

第一次加载页面时有什么值，如果它是通过POST参数在PHP中设置的？为什么会有不同？请看，首先他在代码中设置了

isset（$\u POST['mail']）

，但试图使用

Validate

按钮提交表单。让他试试看是否需要它。有一个输入元素带有

name=“mail”

，但无论如何，OP询问的行为在提交之前在JS事件处理程序中，而不是在PHP中。

  <script>


    var data = <?php echo json_encode($data); ?>;

    $(function(){

      $("form").on("submit", function() {
      if($("#mail").val().length < 4) {
          alert(data);
          return false;
      }
      else { $(this.form).submit(); }

    });
  });

  </script>