Impedir que um campo de entrada em um formulário seja enviado

Estou escrevendo um javascript (um greasemonkey / userscript) que irá inserir alguns campos de entrada em um formulário em um site.

Acontece que não quero que esses campos de entrada afetem o formulário de forma alguma, não quero que eles sejam enviados quando o formulário for enviado, só quero que meu javascript tenha acesso aos seus valores.

Existe alguma maneira de adicionar alguns campos de entrada no meio de um formulário e não tê-los enviados quando o formulário for enviado?

Obviamente, o ideal seria que os campos de entrada não estivessem no elemento do formulário, mas eu quero que o layout da minha página resultante tenha os campos de entrada inseridos entre os elementos do formulário original.

Você pode inserir campos de entrada sem o atributo "nome":

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

Ou você pode simplesmente removê-los assim que o formulário for enviado (em jQuery):

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

A coisa mais fácil a fazer seria inserir os elementos com o disabledatributo.

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

Dessa forma, você ainda pode acessá-los como filhos do formulário.

Os campos desabilitados têm a desvantagem de que o usuário não pode interagir com eles de forma alguma - então, se você tiver um disabledcampo de texto, o usuário não poderá selecionar o texto. Se você tiver uma disabledcaixa de seleção, o usuário não poderá alterar seu estado.

Você também pode escrever algum javascript para disparar no envio do formulário para remover os campos que não deseja enviar.

Simples tente remover o atributo de nome do elemento de entrada.
Então tem que parecer

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

Eu só queria adicionar uma opção adicional: Em sua entrada, adicione a tag do formulário e especifique o nome de um formulário que não existe em sua página:

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

Você pode escrever um manipulador de eventos para onsubmitremover o nameatributo de todos os campos de entrada que você deseja que não sejam incluídos no envio do formulário.

Aqui está um exemplo rápido não testado:

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;

Sei que esta postagem é antiga, mas responderei mesmo assim. A maneira mais fácil / melhor que encontrei é simplesmente definir o nome como em branco.

Coloque isso antes de enviar:

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

Em suma, sua função de envio pode ter a seguinte aparência:

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

Isso ainda enviará o formulário com todos os seus outros campos, mas não enviará aquele sem um nome.

Adicionar disabled = "disabled" na entrada e enquanto o jquery remove o atributo disabled quando você deseja enviá-lo usando .removeAttr ('disabled')

HTML:

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

jquery:

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

Todas as respostas acima já disseram tudo sobre (não) nomear os controles do formulário ou removê-los programaticamente antes de realmente enviar o formulário.

Embora, em minha pesquisa, eu encontrei outra solução que não vi mencionada neste post:
Se você encapsular os controles do formulário que deseja que não sejam processados ​​/ não sejam enviados, dentro de outra <form>tag sem methodatributo nem path(e obviamente sem controle de tipo de envio como um botão ou enviar entrada aninhada nele), o envio do formulário pai não incluirá esses controles de formulário 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>

O valor de controle [name = "notSent"] não será processado nem enviado ao terminal POST do servidor, mas o de [name = "sent"] será.

Esta solução pode ser anedótica, mas ainda estou deixando para a posteridade ...

Manipule o envio do formulário em uma função por meio de onSubmit () e execute algo como a seguir para remover o elemento do formulário: Use getElementById()o DOM e, em seguida, use[object].parentNode.removeChild([object])

suponha que seu campo em questão tenha um código de atributo de id "my_removable_field":

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

Isso lhe dará exatamente o que você está procurando.

Você ainda precisa que eles sejam elementos de entrada em primeiro lugar? Você pode usar o Javascript para criar dinamicamente divs ou parágrafos ou itens de lista ou o que quer que contenha as informações que você deseja apresentar.

Mas se o elemento interativo é importante e é um saco colocá-los fora do <form>bloco, deve ser possível remover esses elementos do formulário quando a página for enviada.

Você precisa adicionar o onsubmit ao seu formulário:

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

E o roteiro será assim:

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

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

Isso funciona para mim sempre :)