javascript - para - Detener la presentación de un campo de entrada en un formulario

validar formulario javascript onclick

Question

Estoy escribiendo un 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íe el formulario, solo quiero que mi javascript tenga acceso a sus valores.

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

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

Answer 1

$(''#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>

Answer 2

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

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

Answer 3

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

HTML:

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

jquery:

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

Answer 4

Debes agregar onsubmit en tu formulario:

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

Y el script 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í todo el tiempo :)

Answer 5

Lo más fácil sería insertar los elementos con el atributo disabled .

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

De esta manera, todavía puede acceder a ellos como hijos de la forma.

Los campos deshabilitados tienen la desventaja de que el usuario no puede interactuar con ellos, de modo que si tiene un campo de texto disabled , el usuario no puede seleccionar el texto. Si tiene una casilla disabled , el usuario no puede cambiar su estado.

También puede escribir algunos javascript para iniciar el envío del formulario para eliminar los campos que no desea enviar.

Answer 6

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

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

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

Esto te dará exactamente lo que estás buscando.

Answer 7

Puede escribir un controlador de eventos para onsubmit que elimine el atributo de name de todos los campos de entrada que no desea incluir 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;

Answer 8

Puede insertar campos de entrada sin ningún atributo de "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();

});

Answer 9

Sé que esta publicación es antigua, pero responderé de todos modos. La forma más fácil / mejor que he encontrado es simplemente configurar 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 aún enviará el formulario con todos sus otros campos, pero no enviará el que no tenga un nombre.

Answer 10

Simple intento de eliminar el atributo de nombre del elemento de entrada.
Entonces tiene que parecerse

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

Answer 11

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