禁用联系人表单7表单提交

Question

我正在使用我的可湿性粉剂网站的联系方式。在提交表单之前，我想调用一些函数。

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

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中只使用一个表单，这将会起作用：

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

应该通过扩展这个js来重构Quickfix。作为用户体验，我添加了一个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的图像替换单击后的按钮。