Question

我在WP网站上使用联系表单。我想在提交表单之前调用一些函数。

我想我可以使用以下代码禁用提交表单：

let form = document.querySelector('form');
form.addEventListener('submit', function(ev){
    ev.preventDefault();
    //some more functions
});

由于某种原因，这不起作用，CF7仍在提交我的表格。有人知道如何阻止提交功能。

我不想在按钮上使用禁用功能，因此表单失去了它的原始功能。

Answer 1

我在我的页面上尝试了它并遇到了同样的问题。

使用input[type=submit]代替form尝试。

let form = document.querySelector('input[type=submit]');
form.addEventListener('click', function(e) {
    e.preventDefault();
})

修改

如果您只在HTML中使用1个表单，那么这将有效：

window.addEventListener('submit', function(e) { e.preventDefault(); }, true)

Answer 2

选项是阻止对提交输入的“单击”。因此，并不是您所需要的100％，但是对我来说，它可以完成工作。

不确定是否符合您的条件，以避免“按钮上的禁用功能”，但对我来说，表单保留了原始功能，仅取决于用户的决定。

var submit = document.getElementsByClassName('wpcf7-submit')[0];

submit.addEventListener('click', function(e) {
  var confirmMessage = 'If you require a response, please make sure you have completed the ‘Name’ and ‘Email’ fields.';

  if (!confirm(confirmMessage)) {
    e.preventDefault();
  }
});

<form method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
  <p><label> Name<br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
  <p><label> Email address<br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false"></span> </label></p>
  <p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
  <div class="wpcf7-response-output wpcf7-display-none"></div>
</form>

Answer 3

Quickfix，应该通过扩展这个js来重构。作为用户体验，我在第一次提交点击后添加了一个 GIF 图像而不是按钮。

对于没有在 contact-form-7/includes/js/scripts.js 中找到解决方案的任何人，现在搜索第 499 行，可能正在改变，你有 wpcf7.clearResponse，在这个函数中添加：

var str = '<img src="path_of_file"/>';

$('.wpcf7-submit').replaceWith(str);

这将在单击后用路径为 path_of_file 的图像替换您的按钮。

禁用联系表格7表单提交

3 个答案: