Question

我正在尝试使用HTML和JavaScript提交表单。我已将一个事件监听器附加到我的复选框（.checkbox），等待点击，然后单击一下，启动一个尝试提交表单的函数。

我已成功使用jQuery的.parent()用法，但我现在正试图将其转换为vanilla JS。

我已尝试过this.parentNode.submit();，但它会回复错误消息。

this.parentNode.submit is not a function at HTMLInputElement.formSubmit

是否有可能通过将jQuery $(this).parent().submit()替换为类似于vanilla的JS来提交表单？

HTML：

<form id="theform" action="/phones/search_results" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
  <label>
    <input type="checkbox" name="brand_name" id="brand_name" value="Apple" class="Apple brand checkbox" style="height: 30px;">
        Apple

  </label>

$(function() {
  var checkbox = document.querySelectorAll(".checkbox");
  for (var i = 0; i < checkbox.length; i++) {
    checkbox[i].addEventListener("click", formSubmit)
  }

});
function formSubmit(){
  if(this.checked){
    $(this).parent().submit();
    console.log("Form was submitted" + this.parentNode)
  }
}

Answer 1

您可以使用parentNode属性，但在您的情况下将指向label元素，因此它将成为event.target.parentNode.parentNode。使用偶数目标表单属性可能更容易，就像这样。

function formSubmit(event){
    event.target.form.submit();
    this.parentNode.parentNode.submit(); //Alternatively without event, using parentNode
}

document.getElementById("brand_name").onclick=formSubmit;

Answer 2

document.getElementById("theform").submit();

https://www.w3schools.com/jsref/met_form_submit.asp

Answer 3

使用香草js的好工作！如果您将来有关于jquery to vanilla js的任何其他问题，这是一个很好的资源：http://youmightnotneedjquery.com/

的document.getElementById（＆＃34; theform＆＃34）。提交（）;将允许您提交申请

Answer 4

您可以尝试使用popup notification file

但是，与其他答案建议的方式一样访问表单对我来说比间接检索表单更直接。

Answer 5

您可以从子元素触发提交事件，该事件将由封闭的表单元素捕获，如下所示：

const event = new Event('submit', {bubbles: true, cancelable: true});
childElement.dispatchEvent(event);

Answer 6

您可以选择封闭的表单元素并按以下方式提交：

element.closest( 'form' ).submit();

这将忽略任何嵌套，并且不需要您自己遍历表单。它的功能类似于querySelector，因为它也可以返回null，所以请注意这一点，因为如果未嵌套在表单中，则会抛出错误。

MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

什么是vanilla JavaScript相当于$（this）.parent（）。submit（）？

6 个答案: