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


114

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.


2
¿Cuál es el problema si se envían? Puede elegir qué campos procesar en el idioma del lado del servidor.
Sarfraz

6
No creo que los elementos de formulario sin nombre aparezcan cuando se envía un formulario; si puede escribir su JS para hacer referencia a ellos por ID, puede dejar sus nombres vacíos, evitando efectivamente que se envíen.
gddc

2
deje el campo de atributo de nombre en blanco
deostroll

@Sarfraz Ahmed: Estoy escribiendo un script de greasemonkey, así que no tengo control sobre el sitio web.
Bellota

11
De acuerdo con w3: Para ser incluido en el envío de un formulario. un campo (elemento de formulario) debe estar definido dentro del elemento de formulario y debe tener un atributo de nombre. Los elementos sin nombre, o no contenidos en el formulario, no se envían al servidor.
Kennebec

Respuestas:


159

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

7
¿Omitir el nombre impide que se envíe? Genial, no lo sabía. ¿Funciona esto en todos los navegadores? ¿Es parte de un estándar o es una peculiaridad de implementación?
BlairHippo

2
@Acorn No estoy del todo seguro, pero vale la pena leerlo. Básicamente, si omite el valor del atributo "nombre", no puede acceder a ese valor a través de ningún método ... por lo que podría ser que el navegador simplemente descarte el valor. Si es fundamental estar seguro para usted, elija la opción jquery / javascript (solo tenga en cuenta que los campos se enviarán cuando javascript se deshabilite fácilmente, así que no confíe en ninguno de sus mecanismos de seguridad).
Gal

17
Probé omitiendo el atributo de nombre con Chrome, Firefox, Safari y parece que los campos del formulario se envían al servidor con una cadena vacía para el nombre. Inspeccioné los datos de la publicación usando WebScarab y encontré que los datos se están enviando. Por ahora supongo que tendré que deshabilitar los campos para evitar que se envíen.
kldavis4

1
@ kldavis4: parece que tanto stripe (stripe.js) como Braintree (braintree.js) [enlace] braintreepayments.com/docs/python/guide/getting_paid utilizan el concepto de atributo "omitir el nombre" para evitar que los datos lleguen a los servidores reduciendo así la necesidad de cumplimiento de "PCI" ... si dice que los "datos" se están enviando, ¿son erróneos?
Rahul Dighe


57

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.


La idea es que mis campos insertados sean utilizables para que el usuario pueda cambiar las casillas de verificación, etc. y luego enviarlos a mi javascript.
Bellota

3
Desactivado aún podría funcionar, si solo desactiva los campos al enviar o si selecciona una casilla de verificación. De esa manera, no solo está tirando la namepropiedad, que es posible que desee conservar si desea que se use más adelante.
JMTyler

Esto es genial cuando tiene que enviar el formulario usando AJAX y no desea eliminar sus entradas del formulario o eliminar su nameatributo.
Nolonar

15

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">

Esta debería ser la respuesta :))
Máxima Alekz

1
Esto funciona para casillas de verificación. Sin embargo, tenga en cuenta que esto interrumpirá la deselección automática del otro botón de opción cuando se utilice con botones de opción.
2017

10

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" />

1
aunque esto probablemente funcione (no lo he probado), a menos que realmente defina en fakeFormotro lugar (no es necesario enviarlo), esto da como resultado HTML no válido.
Brian H.

1
Si no desea agregar javascript y necesita la entrada dentro del formulario con la interacción del usuario. Esta es, con mucho, la solución más simple desde mi perspectiva.
yannisalexiou

1
NOTA: esta solución no funciona con IE . Compruebe aquí
Harvey

@Harvey ¡Ay! ¡Gracias por el aviso!
Joshua Pinter

9

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;

2

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.


Sencillo y sencillo. ¡Me gusta!
pbarney

2

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');


2

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 ...


Interesante observación, pero ¿ha probado esto en varios navegadores? Me pregunto si es por diseño, por especificación o simplemente por una peculiaridad del comportamiento del navegador. ¿Será un método confiable en el futuro a medida que cambien los navegadores?
scipilot

1

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.


0

¿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.


Sí, necesito que sean elementos de entrada porque estoy tratando de obtener la entrada del usuario.
Bellota

0
$('#serialize').click(function () {
  $('#out').text(
    $('form').serialize()
  );
});

$('#exclude').change(function () {
  if ($(this).is(':checked')) {
    $('[name=age]').attr('form', 'fake-form-id');
  } else {
    $('[name=age]').removeAttr('form');    
  }
  
  $('#serialize').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/">
  <input type="text" value="John" name="name">
  <input type="number" value="100" name="age">
</form>

<input type="button" value="serialize" id="serialize">
<label for="exclude">  
  <input type="checkbox" value="exclude age" id="exclude">
  exlude age
</label>

<pre id="out"></pre>

Desafortunadamente, el atributo de formulario no funciona en IE / Edge. caniuse.com/#search=form%20attribute
George Helyar

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.