Submit Form Fields Inside Display:None Element

Submit form fields inside display:none element

Set them to visibility:hidden and position:absolute instead. The fields will not be sent to the server with display:none, but will be with visibility:hidden. By also toggling "position" to "absolute" you should get the same visual effect.

Update This does not appear to be an issue anymore in any current browser (as of Nov of 2015). Fields are submitted even if display is set to 'none'. Fields that are 'disabled', however, will continue to not be submitted.

HTML 5 validates required input field with display none property and not submitting the form

Remove required attribute when fields are not displayed:

function show(val) {
    if (val == 'Company') {
        document.getElementById("show").style.display = "block";
        setRequired(true);
    } else {
        document.getElementById("show").style.display = "none";
        setRequired(false);
    }
}

function setRequired(val){
    input = document.getElementById("show").getElementsByTagName('input');
    for(i = 0; i < input.length; i++){
        input[i].required = val;
    }
}

How to change display none input inside form?

Just change button type="submit" to type="button", so you can do display: none function and if you want to submit the form you can do it with javascript.

How to avoid sending input fields which are hidden by display:none to a server?

Setting a form element to disabled will stop it going to the server, e.g.:

<input disabled="disabled" type="text" name="test"/>

In javascript it would mean something like this:

var inputs = document.getElementsByTagName('input');
for(var i = 0;i < inputs.length; i++) {
    if(inputs[i].style.display == 'none') {
        inputs[i].disabled = true;
    }
}
document.forms[0].submit();

In jQuery:

   $('form > input:hidden').attr("disabled",true);
   $('form').submit();

how to get display: none to work for div inside a form

This turns out to be a case of a CSS declaration being over-ridden by another CSS declaration which is more specific.

As in this example, a second class, .panel was applying display: flex to the div's. The user created a CSS class .hide which applied display: none. For reasons not made apparent here, the .panel declaration was more specific than the .hide declaration and as a result .hide was over-ridden.

Maybe a result of CASCADE:

Stylesheets cascade — at a very simple level, this means that the
order of CSS rules matter; when two rules apply that have equal
specificity the one that comes last in the CSS is the one that will be
used.

And/or SPECIFICITY:

Specificity is how the browser decides which rule applies if multiple
rules have different selectors, but could still apply to the same
element. It is basically a measure of how specific a selector's
selection will be.

And finally INHERITANCE:

Some CSS property values set on parent elements are inherited by their
child elements, and some aren't.

For example, if you set a color and font-family on an element, every
element inside it will also be styled with that color and font, unless
you've applied different color and font values directly to them.

Ultimately the issue was discovered by observing the dev tools in the browser. The user could see that the .hide display:none declaration was lined-through indicating it was over-ridden.

The solution then becomes making the .hide CSS declaration more specific than .panel.

This was accomplished by changing the CSS declaration to:

div.hide {
   display:none;
}

MDN has a great explanation of the concept of cascade, specificity, and inheritance

At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Usually, the problem is that you have created two rules which could potentially apply to the same element. The cascade, and the closely-related concept of specificity, are mechanisms that control which rule applies when there is such a conflict. Which rule is styling your element may not be the one you expect, so you need to understand how these mechanisms work.

How to handle required fields in display:none

You can achieve this by first calling checkValidity() of the Form.

If that reports that the Form is not valid, then gather the invalid elements using .querySelectorAll(':invalid') and then reveal those elements - or in this case, their parent divs.

Demo:

function submitClick() {
  var theForm = document.getElementById('myForm');

  if (theForm.checkValidity()) {
    console.log("All elements are valid");
    return true; // Allow submit to proceed
  }

  var invalidItems = theForm.querySelectorAll(':invalid');

  for (var item of invalidItems) {
    console.log("Element " + item.name + " is not valid");
    item.parentNode.setAttribute("style", "display: block;")
  }
  return false; // Do not allow submit to proceed
}

<form id="myForm" onsubmit="alert('Form will be submitted')">

  <div style="display: none">
    Required field 1 (empty)<input name="v1" required value="" />
  </div>

  <div style="display: none">
    Required field 2 (Hello)<input name="v2" required value="Hello" />
  </div>

  <button type="submit" onclick="return submitClick();">Submit form</button>
</form>

<form onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">

$(document).ready(function() {
    $("#myform").submit(function(e) {
        $("#first").hide();
        $("#second").show();
    });
});