I have a form that has about a hundred input/text fields for each of our companies products. The form is to be filled out at the end of the day with the number of each product that was sold.

How do I have the form only pass on the relatively small subset of fields that are NOT empty?

I'm not looking for form validation. It's ok for the user to either enter or not enter a value in any of the input fields; however I only want the input fields that did have a value entered into them to be included in the POST that the form passes along.

Thanks

I have a form that has about a hundred input/text fields for each of our companies products. The form is to be filled out at the end of the day with the number of each product that was sold.

How do I have the form only pass on the relatively small subset of fields that are NOT empty?

I'm not looking for form validation. It's ok for the user to either enter or not enter a value in any of the input fields; however I only want the input fields that did have a value entered into them to be included in the POST that the form passes along.

Thanks

• javascript
• html
• forms
• filter

• 5 can you share what you have started? – Yaje Commented Jul 13, 2015 at 5:55
• you are using .serializearray() or simple jquery to get all values ? if you use .serializearray() then i have one solution. – Keval Bhatt Commented Jul 13, 2015 at 6:18
• I found this answer in a similar question to be most useful (setting disable works but is visually confusing, removing the name property has the same effect but doesn't change the way the page looks) stackoverflow.com/questions/31376217/… – nonagon Commented Jul 26, 2021 at 14:06

4 Answers 4

One way is to set all empty fields to disabled before submit, e.g.

function disableEmptyInputs(form) {
  var controls = form.elements;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    controls[i].disabled = controls[i].value == '';
  }
}

And run it on the form's submit listener:

<form onsubmit="disableEmptyInputs(this)" ...>

So any input that has a value of "" (empty string) will have its disabled property set to true and it won't be submitted.

Or to add the listener dynamically:

window.onload = function() {
  document.getElementById('formID').addEventListener('submit', function() {
    Array.prototype.forEach.call(this.elements, function(el) {
      el.disabled = el.value == '';
    });
  }, false);
};

This is what I did using JQuery:

$("#myform").submit(function (event) {
    event.preventDefault();
    var dataArr = {};

    $.each($("form > input[name]"), function (key, value) {
        if ($(this).val() != "") {
            dataArr[$(this).attr('name')] = $(this).val();
        }
    });

    $.post($(this).attr('action'), dataArr);
    alert("Form submitted!");

});

What the above code does:

• Stops the default form submission
• Finds all the input fields that have a data
• Builds an array of the valid data
• Submits the form to the page defined by the action attribute of the form via the POST method
• Displays a message of the form submission.

Here is the JSFiddle of the code

This is what I have on a site for exactly this:

$("#my-form").submit(function() {
    $(this).find(":input").filter(function () {
        return !this.value;
    }).attr("disabled", true);

    return true;
});

It will disable all input fields in your form that doesn't have any value, which makes them not being sent in the request.

Here is a solution using JQuery

HTML

<form id="myForm">
    <input name="1" type="text" / >
    <input name="2" type="text" / >
    <input name="3" type="text" / >
    <input name="4" type="text" / >
    <button id="sub">Submit</button>
</form>

JS

(function(){    
    $('#sub').click(function(e){
    e.preventDefault();
    var data = $('form input').filter(function(index,ele){
        return $(ele).val()!= '';
    }).serialize();
    console.log(data)
 })
})()