Empty elements in an input form passed on to URL

Question

Possible Duplicate:
How to prevent submitting the HTML form’s input field value if it empty

If I have a three piece input form and a submit button.

Form 1 id: book
Form 2 id: music
Form 3 id: tv

Say I put "Book1" in the book field, "Music1" in the music field and nothing in the TV field, I would get this URL:

http://url/search/?book=Book1&music=Music1&tv=

What happens is that even though there is nothing in the "tv" field, "&tv=" still gets appended to the URL. Is there any way to stop this, or is this standard browser behavior?

score 1 · Answer 1 · answered Oct 16 '12 at 11:12

1

This is standard and logical behavior. "No value" is not the same as "empty value".

answered Oct 16 '12 at 11:12

Markus Unterwaditzer

7,992
32
60

score 1 · Accepted Answer · edited May 23 '17 at 11:48

This is due to the browsers behavior, as correctly said in this answer.

To "overcome" this default behavior, you will have to use client side scripting. Most simple and unintrusive way I can think of is to add this on your page:

<script type="text/javascript">
window.onload = function() {
    for (var i = 0; i < document.forms.length; i++) {
        var oForm = document.forms[i];
        oForm.onsubmit = function() {
            for (var j = 0; j < this.elements.length; j++) {
                var element = this.elements[j];
                if (element.type === "text" && element.value === "")
                    element.disabled = true;
            }
        };
    }
};
</script>

This will automatically disable any empty text boxes when submitting a form, causing the browser to not send any value for them.

Live test case.

Empty elements in an input form passed on to URL

2 Answers2