如何修复使用 onsubmit 方法提交的 html 表单

Question

我正在创建一个HTML表单，需要首先由javascript进行审查，然后如果选中了一个复选框，它将处理PHP代码。

<form class="form" method="POST" action="index.php" onsubmit="return 
gdpr(e)">   
<input class="form-check-input" type="checkbox" value="" name="gdpr" 
id="gdpr_privacy">

<input class="btn btn-primary btn-block" type="submit" name="submit" 
placeholder="Send" id="submit"></input>
</form>

Javascript：

function gdpr(e){
 e.preventDefault();
 e.stopPropagation();
let privacy = document.getElementById('gdpr_privacy').checked;
if(privacy == false){
    window.alert("false");
    return false;
}
else{
     window.alert("true");
    return true;
}
}

现在，如果选中或未选中复选框，页面也会刷新，它应该执行索引.php仅当返回为 true 时。

Answer 1

侦听器中有一个简单的语法错误：

<form ... onsubmit="return gdpr(e)"> 

没有全局 e 变量，因此处理程序会引发错误，代码不会返回false并且提交不会停止。如果要传递关联的事件对象，则必须使用 event。

<form ... onsubmit="return gdpr(event)"> 

但无论如何你真的不在乎事件，返回 false 就可以了。

您还有一个名称为 gdpr 的窗体控件。元素的名称和 ID 成为全局属性是一项旧功能（这是一个非常糟糕的主意，但它卡住了），因此名为 gdpr 的控件在支持旧功能的浏览器中屏蔽了同名函数，因此请更改其名称。匹配 ID 是典型的策略（但窗体控件上的 ID 并不是真正必需的）。

function gdpr(e) {
  console.log(`I'm a ${e.type} event`);
  return false;
}

<form onsubmit="return gdpr(event)">
  <input type="checkbox" value="" name="gdpr_privacy" id="gdpr_privacy">
  <input class="btn btn-primary btn-block" type="submit">
</form>

Answer 2

将

gdpr函数重命名为gdpr1，也不需要对象e，因此请将其删除。

签出以下代码：

function gdpr1(){
 
  let privacy = document.getElementById('gdpr_privacy').checked;
  if(privacy == false){
      window.alert("false");
      return false;
  }
  else{
       window.alert("true");
      return true;
  }
}

<form class="form" method="POST" action="index.php" onsubmit="return gdpr1()">   
  <input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">
  <input class="btn btn-primary btn-block" type="submit" name="submit" placeholder="Send" id="submit" />
</form>

Answer 3

只需使用不同的函数名称并删除e.preventDefault();和e.stopPropagation();，因为它与表单中的其他属性冲突。

function checkval(event) {
  var privacy = document.getElementById('gdpr_privacy').checked;
  if (privacy == false) {
    window.alert("false");
    return false;
  } else {
    window.alert("true");
    return true;
  }
}

<form class="form" method="POST" action="index.php" onsubmit="return checkval(event);">
  <input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">
  <input class="btn btn-primary btn-block" type="submit" name="submit" placeholder="Send" id="submit"></input>
</form>

Answer 4

我猜你在 onsubmit 事件中调用验证函数做错了什么。您可以通过在提交按钮的单击事件上进行函数调用来尝试。将按钮类型更改为按钮而不是提交，然后从返回 true 的 JavaScript 代码提交它。

尝试将代码更改为以下内容：

.HTML：

    <form name="form1" class="form" method="POST" action="index.php">   
    <input class="form-check-input" type="checkbox" value="" name="gdpr" 
    id="gdpr_privacy">

    <input class="btn btn-primary btn-block" type="button" name="submit" 
    placeholder="Send" id="submit" onclick="gdpr(e)></input>
    </form>

JavaScript：

    function gdpr(e){
     e.preventDefault();
     e.stopPropagation();
    let privacy = document.getElementById('gdpr_privacy').checked;
    if(privacy == false){
        window.alert("false");
        return false;
    }
    else{
         document.forms["form1"].submit();
         window.alert("true");
        return true;
    }
    }

Answer 5

从表单标签中删除提交时。

在提交按钮上添加 onclick="gdpr（e）"。

Answer 6

更改输入的名称属性

<input class="form-check-input" type="checkbox" value="" name="gdpr" id="gdpr_privacy">

除了gdpr之外，这是一个奇怪的错误，可以解决此问题。

Answer 7

为什么不使用jquery来获取gdpr_privacy值？或者，您可以编写一个onsubmit函数

func onsubmit(){
  let gdpr_privacy = $('#gdpr_privacy').val();
  $.post('api/',gdpr_privacy)
  // todo 
}