I have a form I am trying to submit with HTML and JavaScript. I have attached an event listener to my checkboxes (.checkbox), that waits for a click, and upon a click, launches a function that attempts to submit the form.

I have succeeded with jQuery's .parent() usage, but am now attempting to switch that to vanilla JS.

I have tried this.parentNode.submit();, however it gives back the error message.

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

Is there a possible way I can submit my form by replacing the jQuery $(this).parent().submit() to a vanilla JS equivalent?

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

I have a form I am trying to submit with HTML and JavaScript. I have attached an event listener to my checkboxes (.checkbox), that waits for a click, and upon a click, launches a function that attempts to submit the form.

I have succeeded with jQuery's .parent() usage, but am now attempting to switch that to vanilla JS.

I have tried this.parentNode.submit();, however it gives back the error message.

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

Is there a possible way I can submit my form by replacing the jQuery $(this).parent().submit() to a vanilla JS equivalent?

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

• javascript
• jquery

• 2 I misread the question.... this.form.submit() – epascarello Commented Mar 15, 2017 at 1:52
• 1 of course since jQuery is JavaScript... stackoverflow./questions/6856871/… – epascarello Commented Mar 15, 2017 at 2:01
• 1 Have you tried this.parentNode.parentNode.submit()? In your html, the input's parent is the label element, not the form, so I don't see how $(this).parent().submit() worked either - it wouldn't have given an error, but it would've triggered a submit event on the label. – nnnnnn Commented Mar 15, 2017 at 2:17
• 1 .parent() returns a jQuery object that wraps the DOM element, but .parentNode returns the actual DOM element. They're not supposed to be the same. Regarding the difference in calling .submit(), when you call it on the form DOM element it submits the form. When you call it on the jQuery object, it triggers the event handler that you have bound to the form (and presumably your event handler does the Ajax request). If you want to do this in plain JS and use Ajax, just a call your handler directly, don't call .submit(). – nnnnnn Commented Mar 15, 2017 at 2:43
• 1 The concept of an equivalent version in vanilla JS doesn't really make sense, because (as I mentioned before) .parent() - and most other jQuery methods - will return a jQuery object that is a wrapper around a list of DOM elements. (Sometimes the list is empty or has only one element in it.) This jQuery object wrapper is what lets you call all the other jQuery methods, and chain them, etc., like when you said $(this).parent(), or .parent().submit(). This is a big part of what makes jQuery easy to use, especially to manipulate multiple elements at once. – nnnnnn Commented Mar 15, 2017 at 2:56

6 Answers 6

You can select the enclosing form element and submit it as such:

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

This ignores any nesting and doesn't require you to loop through the form yourself. It functions like querySelector in that it can also return null, so beware of that as it will throw an error if it's not nested in a form.

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

You could use the parentNode property, but in your case that will point to the label element, so it would bee event.target.parentNode.parentNode. It is probably easier to use the even target form property, like this.

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

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

You can trigger a submit event from a child element that will be catched by an enclosing form element like this:

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

Nice job using vanilla js! Here is a great resource if you have any other questions about jquery to vanilla js in the future: http://youmightnotneedjquery./

document.getElementById("theform").submit(); will allow you to submit the application

You could try using Node.parentElement

But accessing the form the way the other answers suggest seems more straightforward to me than retrieving the form indirectly like this.

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

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