How to send form but remove null fields

Question

How do I send a form for example via GET or POST, but without sending fields that are null?

To make it very clear, I want the form to be submitted even with some empty fields, but that these empty fields are not sent.

Let’s assume that I have the form below, I would like only campo1 to be sent.

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

Because if you send it empty, the url will be ? campo1=1&campo2=, and I want it to be just ? campo1=1 and only when field 2 has some value that would send its value.

Answer 1

In case you just wanted to hide from URL just use POST.

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

If you really don’t want to receive these values then you can do it in some ways:

1. Add property disabled;

2. Remove the property name (since it is required for server-side request);

For your case the two options above should only be applied if at the time of sending the fields are empty.

So I guess you have to create a Javascript to capture the event submit, verify that the field(s) (s) are empty(s) and assign the disabled or remove the property 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>

Answer 2

Just like the Caique commented, you can, with Javascript, add the property disabled at the time the form is submitted, so the browser will not include the blank fields:

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

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

The same happens if you define the property name for nil:

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

Comments on the code

Through the document.getElementById we managed to obtain the reference in JS of the form in the DOM, ie, form will be the form we wish to work - realize that for this it will be necessary to define the attribute id no. After, using addEventListener, add a function that will always be run when the event submit form is triggered, that is, when the form is submitted - actually the event submit is executed immediately prior to the actual submission of the form by the browser. In this function, then, we go through all the elements (fields) of the form in question through a loop of repetition for, iterating on this.elements. The this, in this case, refers to the form. Thus, input will be the reference to each field of the form, then we check whether the respective value input.value is valid and when it is not, we define the property disabled as true of it. A field with the property disabled defined is ignored by the browser when the form is submitted, for this reason blank fields are not sent.