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

114

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.

Bolota
fonte
2
qual é o problema se eles forem enviados? Você pode escolher quais campos processar no idioma do servidor.
Sarfraz
6
Não acredito que elementos de formulário sem nome apareçam quando um formulário é enviado - se você puder escrever seu JS para se referir a eles por ID, poderá deixar seus nomes em branco, evitando efetivamente que sejam enviados.
gddc
2
deixe o campo de atributo de nome em branco
deostroll em
@Sarfraz Ahmed: Estou escrevendo um script greasemonkey, então não tenho controle sobre o site.
Acorn
11
De acordo com w3: Para ser incluído no envio de um formulário. um campo (elemento de formulário) deve ser definido dentro do elemento de formulário e deve ter um atributo de nome. Elementos sem nomes, ou não contidos no formulário, não são enviados ao servidor.
Kennebec

Respostas:

159

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();
});
Garota
fonte
7
Omitir o nome impede que ele seja enviado? Legal, eu não sabia disso. Isso funciona em todos os navegadores? É parte de um padrão ou é uma peculiaridade de implementação?
BlairHippo
2
@Acorn Não tenho certeza, mas vale a pena ler sobre. Essencialmente, se você omitir o valor do atributo "name", não poderá acessar esse valor por meio de nenhum método ... então, pode ser que o valor seja simplesmente descartado pelo navegador. Se for essencial para ser seguro para você, vá para a opção jquery / javascript (observe que os campos SERÃO enviados quando o javascript for facilmente desabilitado - portanto, não confie nisso nenhum de seus mecanismos de segurança).
Gal
17
Eu testei deixando de fora o atributo name com chrome, firefox, safari e parece que os campos do formulário estão sendo enviados ao servidor com uma string vazia para o nome. Eu inspecionei os dados da postagem usando o WebScarab e descobri que os dados estão sendo enviados. Por enquanto, acho que terei que desabilitar os campos para evitar que sejam enviados.
kldavis4
1
@ kldavis4 - parece que stripe (stripe.js) e Braintree (braintree.js) [link] braintreepayments.com/docs/python/guide/getting_paid usam o conceito de atributo " omitindo o nome" para impedir que os dados cheguem aos servidores reduzindo assim a necessidade de conformidade com "PCI" ... se você disser que os "dados" estão sendo enviados, eles estão errados?
Rahul Dighe
57

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.

Johrn
fonte
A ideia é que meus campos inseridos sejam utilizáveis ​​para que o usuário possa alterar as caixas de seleção etc. e, em seguida, enviá-los para o meu javascript.
Acorn
3
Desativado ainda pode funcionar, se você desativar apenas os campos no envio ou com base em uma caixa de seleção selecionada. Dessa forma, você não está apenas jogando fora a namepropriedade, que talvez queira manter se quiser usá-la mais tarde.
JMTyler
Isso é ótimo quando você precisa enviar o formulário usando AJAX e não deseja remover suas entradas do formulário ou remover seus nameatributos.
Nolonar de
15

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">
Lesha Pipiev
fonte
Esta deve ser a resposta :))
Máxima Alekz
1
Isso funciona para caixas de seleção. Observe, entretanto, que isso interromperá a desmarcação automática do outro botão de opção quando usado com botões de opção.
anre
10

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" />
Farvgnugn
fonte
1
embora isso provavelmente funcione (não testei), a menos que você realmente defina em fakeFormoutro lugar (não há necessidade de enviar), isso resulta em HTML inválido.
Brian H.
1
Se você não deseja adicionar javascript e precisa da entrada dentro do formulário com a interação do usuário. Esta é de longe a solução mais simples da minha perspectiva.
yannisalexiou
1
NOTA: Esta solução não funciona com o IE . Verifique aqui
Harvey
@Harvey Caramba! Obrigado pelo aviso!
Joshua Pinter
9

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;
Jacob Relkin
fonte
2

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.

Vai
fonte
Simples e direto. Eu gosto disso!
pbarney
2

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

Pikka pikka
fonte
2

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

Delfshkrimm
fonte
Observação interessante, mas você já testou isso em vários navegadores? Eu me pergunto se é por design, por especificação ou apenas uma peculiaridade de comportamento do navegador. Será um método confiável no futuro, conforme os navegadores mudarem?
scipilot
1

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.

portador do anel
fonte
0

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.

BlairHippo
fonte
Sim, preciso que sejam elementos de entrada porque estou tentando obter a entrada do usuário.
Acorn
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>
Denis Lukyanov
fonte
Infelizmente, o atributo form não funciona no IE / Edge. caniuse.com/#search=form%20attribute
George Helyar
0

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

Vasilakakis Anastasios
fonte