首页 > 解决方案 > Javascript 单击网页中的特定按钮

问题描述

这是我的工作示例页面https://graphicstogether.com/free-trial/

我正在使用 Wordpress 联系表 7。问题是当我单击附件上的清除按钮时,它点击了发送按钮。如何单独控制每个按钮操作?

**

我也面临 JS 代码的错误。我在页脚应用了这个 JS 代码。

**


在此处输入图像描述

html

<input type="file" name="file-860" size="40" class="wpcf7-form-control wpcf7-file" id="file1" accept=".jpg,.jpeg,.png,.gif,.pdf" aria-invalid="false">

<input type="file" name="file-860" size="40" class="wpcf7-form-control wpcf7-file" id="file2" accept=".jpg,.jpeg,.png,.gif,.pdf" aria-invalid="false">

JS

var f = document.querySelectorAll('input[type=file]'),
clearInput = function(){this.previousSibling.value = '';};
for(var i = 0; i < f.length; i++){
  button = document.createElement('button');
  button.textContent = 'clear';
  button.addEventListener('click', clearInput);
  f[i].parentNode.insertBefore(button, f[i].nextSibling);
}

标签: javascriptjquerywordpresscontact-form-7

解决方案


对于不发送表单,按钮必须为 type="button",否则为 type="submit"。

<button type="button">clear</button>

推荐阅读