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?

Answer 1

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.