How to Avoid Sending Input Fields Which Are Hidden by Display:None to a Server

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();

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.

In PHP Form, How to hinder or suppress posting input element when its parent is hidden?

While posting your form, have a onClick function and write below code in it. This code will help you to find all the div tags that is display:none and is the div is display:none, it will disable all the input elements.

Check this http://jsfiddle.net/xyuY6/3/

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

Hidden value is passing while the div's display style is none using PHP

Setting an input (or its container div) to hidden will not prevent the input from being sent to the server.

You would have to either physically remove the element, or set its value to null, when hiding the container. In order to not lose the original value, store it in a temporary variable, or a property of the input object.

Stop an input field in a form from being submitted

You could insert input fields without "name" attribute:

<input type="text" id="in-between" />

Or you could simply remove them once the form is submitted (in jQuery):

$("form").submit(function() {
   $(this).children('#in-between').remove();
});

---

Related Topics