How to submit form but remove null fields

Question

How to submit form but remove null fields

Navigation

#1 by (3 votes)
#2 by (2 votes)

0

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

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

Let's suppose I have the form below, I would like only field1 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 with it empty, in the url would be for example? field1 = 1 & field2 =, and I want it to be only? field1 = 1 and only when field 2 has some value that would send its value. >

php html

asked by anonymous 19.09.2017 / 20:59

2 answers

3

If you just wanted to hide from URL just use POST .

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

If you really do not want to receive these values then you can do this in some ways:

Add the property disabled ;

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

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

So I guess you have to create a Javascript to catch the submit event, check if the field (s) are empty, and assign disabled or remove name property.

$("#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><formaction="#" 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>

19.09.2017 / 21:10

What's wrong with this code? Uncaught Error: Call to undefined function

score 2 · Accepted Answer

Just like Caique commented , you can, with JavaScript, add the disabled property the moment you 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 thing happens if you set the name property to null:

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

Code Comments

With document.getElementById we can get the JS reference of the form in the DOM, that is, form will be the form we want to work on - realize that we need to define the id attribute in it. Then, using addEventListener , we add a function that will always be executed when the submit event of the form is triggered, that is, when the form is submitted - in fact the submit event is executed immediately before the actual submission of the form browser. In this function, we then traverse all the elements (fields) of the form in question through a% loop of% loop, iterating over for . The this.elements , in this case, refers to the object this . Thus, form will be the reference to each field of the form, then we check if its input value is valid and, when it is not, we define the input.value property as true of it. A field with the disabled property set is ignored by the browser when the form is submitted, so the blank fields are not sent.