0

Como faço para mandar um form por exemplo via GET ou POST, mas sem enviar os campos que estiverem nulos?

Para deixar bem claro, eu quero que o form seja submetido mesmo com alguns campos vazios, mas que esses campos vazios não sejam enviados.

Vamos supor que eu tenha o form abaixo, gostaria que somente o campo1 fosse enviado.

<form action="" method="get">
   <input type="text" name="campo1" value="1">
   <input type="text" name="campo2" value="">
</form>

Porque caso envie com ele vazio, na url ficara por exemplo ?campo1=1&campo2=, e quero que fique apenas ?campo1=1 e somente quando o campo 2 tiver algum valor que enviaria o valor dele.

2 Respostas 2

3

Caso você só queria ocultar da URL basta utilizar POST.

<form action="" method="POST">

Caso você realmente não queira receber esses valores então você pode fazer isso de algumas formas:

  1. Adicionar a propriedade disabled;

  2. Remover a propriedade name (uma vez que ela é necessária para a requisição no lado do servidor);

Para o seu caso as duas opções acima só devem ser aplicadas se no momento do envio os campos estiverem vazios.

Então imagino que você tenha de criar um Javascript para captar o evento de submit, verificar se o(s) campo(s) são vazio(s) e atribuir o disabled ou remover a propriedade name.

$("#btnEnviar").on("click", function(){
  event.preventDefault(); //Evito o submit para nosso teste.
  
  //atribuir disabled
  if(!$("#campo1").val()){
    $("#campo1").attr("disabled", true);
  }
  
  //Ou modificar a propriedade name
  if(!$("#campo2").val()){
    console.log("hi");
    $("#campo2").prop("name", "");
  }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form  action="#" method="get">
   <input type="text" name="campo1" id="campo1" value="1" />
   <input type="text" name="campo2" id="campo2" value="" />
   
   <button type="submit" name="btnEnviar" id="btnEnviar">
       Enviar
   </button>
</form>

2

Assim como o Caique comentou, você pode, com JavaScript, adicionar a propriedade disabled no momento que o formulário é submetido, assim o navegador não incluirá os campos em branco:

const form = document.getElementById("form");

form.addEventListener("submit", function(event) {
    for (let input of this.elements) {
        if (!input.value) {
            input.setAttribute("disabled", true);
        }
    }
});

O mesmo acontece se definir a propriedade name para nulo:

form.addEventListener("submit", function(event) {
    for (let input of this.elements) {
        if (!input.value) {
            input.setAttribute("name", "");
        }
    }
});

Comentários sobre o código

Através do document.getElementById conseguimos obter a referência em JS do formulário no DOM, ou seja, form será o formulário que desejamos trabalhar - perceba que para isso será ncessário definir o atributo id no mesmo. Após, utilizando addEventListener, adicionamos uma função que sempre será executada quando o evento submit do formulário for disparado, isto é, quando o formulário for submetido - na verdade o evento submit é executado imediatamente antes da submissão efetiva do formulário pelo navegador. Nesta função, então, percorremos todos os elementos (campos) do formulário em questão através de um laço de repetição for, iterando sobre this.elements. O this, neste caso, faz referência ao objeto form. Assim, input será a referência a cada campo do formulário, então verificamos se o respectivo valor input.value é válido e, quando não for, definimos a propriedade disabled como verdadeira do mesmo. Um campo com a propriedade disabled definida é ignorado pelo navegador quando o formulário é submetido, por esse motivo que os campos em branco não são enviados.

2
  • 1
    Anderson, funcionou amigo muito obrigado. Se não for pedir de mais, será que você poderia me explicar o que você fez ai? pois eu tinha tentado anteriormente algo parecido com jquery e não tive sucesso. Commented 20/09/2017 às 3:37
  • 1
    @LeandroSilvaCampos tentei explicar, veja se ficou suficientemente claro.
    – Woss
    Commented 20/09/2017 às 11:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .