Tengo un formulario que intento enviar con HTML y JavaScript. Adjunté un detector de eventos a mis casillas de verificación ( .checkbox ), que espera un clic y, al hacer clic, inicia una función que intenta enviar el formulario.
He tenido éxito con el uso de .parent() de jQuery, pero ahora estoy intentando cambiar eso a Vanilla JS.
He probado this.parentNode.submit(); , sin embargo, devuelve el mensaje de error.
this.parentNode.submit is not a function at HTMLInputElement.formSubmit ¿Hay alguna forma posible de enviar mi formulario reemplazando jQuery $(this).parent().submit() a un equivalente de 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) } }Podría usar la propiedad parentNode, pero en su caso apuntará al elemento de etiqueta, por lo que se convertiría en event.target.parentNode.parentNode. Probablemente sea más fácil usar la propiedad de formulario de destino par, así.
function formSubmit(event){ event.target.form.submit(); this.parentNode.parentNode.submit(); //Alternatively without event, using parentNode } document.getElementById("brand_name").onclick=formSubmit;Puede seleccionar el elemento de formulario adjunto y enviarlo como tal:
element.closest( 'form' ).submit(); Esto ignora cualquier anidamiento y no requiere que usted mismo recorra el formulario. Funciona como querySelector en el sentido de que también puede devolver null , así que tenga cuidado con eso, ya que arrojará un error si no está anidado en un formulario.
MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
Puede desencadenar un evento de envío desde un elemento secundario que será capturado por un elemento de formulario adjunto como este:
const event = new Event('submit', {bubbles: true, cancelable: true}); childElement.dispatchEvent(event);