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

现在，如果选中或未选中此复选框，页面也会刷新，仅当return为true时，才应执行index.php。

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

只需使用其他函数名并删除job outcome和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;
  }
}

Answer 3

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

我想您通过在onsubmit事件中调用验证函数来做错了什么。您可以尝试通过函数调用提交按钮的onClick事件来尝试。将按钮类型更改为button而不是Submit，然后从返回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

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

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

Answer 6

从表单标签中删除onsubmit。

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

Answer 7

更改输入的名称属性

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

除gdpr以外的其他东西，这是一个奇怪的错误，可以解决此问题。

如何使用onsubmit方法修复HTML表单？

7 个答案: