Detener el envío de un campo de entrada en un formulario

Estoy escribiendo algo de javascript (un greasemonkey / userscript) que insertará algunos campos de entrada en un formulario en un sitio web.

La cuestión es que no quiero que esos campos de entrada afecten el formulario de ninguna manera, no quiero que se envíen cuando se envía el formulario, solo quiero que mi javascript tenga acceso a sus valores.

¿Hay alguna forma de que pueda agregar algunos campos de entrada en el medio de un formulario y no enviarlos cuando se envía el formulario?

Obviamente, lo ideal sería que los campos de entrada no estuvieran en el elemento del formulario, pero quiero que el diseño de mi página resultante tenga los campos de entrada insertados entre los elementos del formulario original.

Puede insertar campos de entrada sin el atributo "nombre":

<input type="text" id="in-between" />

O simplemente puede eliminarlos una vez que se envía el formulario (en jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

Lo más sencillo sería insertar los elementos con el disabledatributo.

<input type="hidden" name="not_gonna_submit" disabled="disabled" value="invisible" />

De esta manera, aún puede acceder a ellos como elementos secundarios del formulario.

Los campos deshabilitados tienen la desventaja de que el usuario no puede interactuar con ellos en absoluto, por lo que si tiene un disabledcampo de texto, el usuario no puede seleccionar el texto. Si tiene una disabledcasilla de verificación, el usuario no puede cambiar su estado.

También puede escribir algo de javascript para que se active al enviar un formulario para eliminar los campos que no desea enviar.

Intente simplemente eliminar el atributo de nombre del elemento de entrada.
Entonces tiene que verse como

<input type="checkbox" checked="" id="class_box_2" value="2">

Solo quería agregar una opción adicional: en su entrada agregue la etiqueta del formulario y especifique el nombre de un formulario que no existe en su página:

<input form="fakeForm" type="text" readonly value="random value" />

Puede escribir un controlador de eventos para onsubmitque elimine el nameatributo de todos los campos de entrada que desea que no se incluyan en el envío del formulario.

Aquí hay un ejemplo rápido no probado:

var noSubmitElements = [ 'someFormElementID1', 'someFormElementID2' ]; //...
function submitForm() {
    for( var i = 0, j = noSubmitElements.length; i < j; i++ ) {
        document.getElementById(noSubmitElements[i]).removeAttribute('name');
    }
}
form.onsubmit = submitForm;

Sé que esta publicación es antigua, pero responderé de todos modos. La forma más fácil / mejor que he encontrado es simplemente poner el nombre en blanco.

Pon esto antes de tu envío:

document.getElementById("TheInputsIdHere").name = "";

En general, su función de envío podría verse así:

document.getElementById("TheInputsIdHere").name = "";
document.getElementById("TheFormsIdHere").submit();

Esto seguirá enviando el formulario con todos sus otros campos, pero no enviará el que no tenga nombre.

Agregue disabled = "disabled" en la entrada y mientras jquery elimine el atributo disabled cuando desee enviarlo usando .removeAttr ('disabled')

HTML:

<input type="hidden" name="test" value="test" disabled='disabled'/>

jquery:

$("input[name='test']").removeAttr('disabled');

Todas las respuestas anteriores ya dijeron todo sobre (no) nombrar los controles de formulario o eliminarlos mediante programación antes de enviar su formulario.

Aunque, a lo largo de mi investigación encontré otra solución que no he visto mencionada en esta publicación:
si encapsula los controles de formulario que desea que no se procesen / no se envíen, dentro de otra <form>etiqueta sin methodatributo ni path(y obviamente sin control de tipo de envío como un botón o enviar una entrada anidada en él), luego enviar el formulario principal no incluirá esos controles de formulario encapsulados.

<form method="POST" path="/path">
  <input type="text" name="sent" value="..." />
  <form>
    <input type="text" name="notSent" value="..." />
  </form>
  <input type="submit" name="submit" value="Submit" />
</form>

El valor de control [nombre = "notSent"] no se procesará ni se enviará al punto final de la POST del servidor, pero sí lo hará el de [nombre = "enviado"].

Esta solución puede ser anecdótica pero aún la dejo para la posteridad ...

Maneje el envío del formulario en una función a través de onSubmit () y realice algo como a continuación para eliminar el elemento del formulario: Uso getElementById()del DOM, luego usando[object].parentNode.removeChild([object])

Suponga que su campo en cuestión tiene un atributo de id "my_removable_field" código:

var remEl = document.getElementById("my_removable_field");
if ( remEl.parentNode && remEl.parentNode.removeChild ) {
remEl.parentNode.removeChild(remEl);
}

Esto le dará exactamente lo que está buscando.

¿Incluso necesita que sean elementos de entrada en primer lugar? Puede usar Javascript para crear dinámicamente divs o párrafos o elementos de lista o lo que sea que contenga la información que desea presentar.

Pero si el elemento interactivo es importante y es un fastidio colocar esos elementos fuera del <form>bloque, debería ser posible eliminar esos elementos del formulario cuando se envíe la página.

Necesita agregar onsubmit en su formulario:

<form action="YOUR_URL" method="post" accept-charset="utf-8" onsubmit="return validateRegisterForm();">

Y el guión será así:

        function validateRegisterForm(){
        if(SOMETHING IS WRONG)
        { 
            alert("validation failed");
            event.preventDefault();
            return false;

        }else{
            alert("validations passed");
            return true;
        }
    }

Esto funciona para mí siempre :)