When a form is submitted on a website, it automatically sends all its input fields even if they’re empty (because the user didn’t fill them in). This is not always a problem—for example, if the form is sent and processed on the server and the user never gets to see what is happening under the hood, it doesn’t really matter.
But consider the case in which the form serves as a data filter and is used to generate special URLs (hooked to your application’s views) which dictate what data is displayed on the front-end. Including the empty input fields in the generated URLs might be undesirable as it makes them unnecessarily long and messy, more difficult to remember, etc. Compare this URL:
http://www.example.com/?keyword=adventure&created=&expiry=&category=games&onsale=true&discount=
With this one:
http://www.example.com/?keyword=adventure&category=games&onsale=true
Sure, you could still validate the submitted form server-side, remove the empty fields and change the way your URLs are generated, but sometimes it’s simply easier not to send the empty fields to the server at all. With pure HTML this is not currently possible, but you can achieve it with a bit of JavaScript.
The following jQuery script does just that:
$(document).ready(function() {
$('.remove-empty-values').submit(function() {
$(this).find(':input').filter(function() { return !this.value; }).attr('disabled', 'disabled');
return true; // make sure that the form is still submitted
});
});
The script disables the empty input fields on form submit and therefore they’re not submitted with the rest of the (filled-in) fields.
Once you’ve included the above script in your page, simply give the ‘remove-empty-values’ class to you form. Like so:
Loading tweets...
Hmm… I can’t seem to get this to work, but this is exactly what I need…
Anything specific you’re having issues with? Maybe I can help.
where would I input?
…
…
Hi Josh,
Come again? I’m afraid I don’t what you’re asking.
If you’re wondering about the ellipses in the form code snippet, that’s just a placeholder for the actual form content. That’s where all your input fields, etc. would go.
Hi,
Is there a way to re-enable after submitting ?
The Form is opening a new tab when submitting, but when you want to come back to the form and adjust some parameters, those that were empty are not disabled (of course). I have to reload the page to get them back which is quite annoying as you lose everything…
I’ve tried with something like “prop( “disabled”, false )” without success.
Hi Jean,
Thanks for stopping by.
It really depends on how your code is structured and working. If the form opens a new tab when you submit it and then you come back to the original tab, you’ll need some sort of an action that triggers the re-enabling of the disabled fields. Maybe something like a ‘Reset’ button would work, though personally to me that would imply resetting the entire form, i.e. including the values the user has filled in.
I think that for forms that do not get sent to the server and do not reload the page upon submission the code in this post is not particularly useful or intuitive. It was mainly intended for not submitting the empty fields when the form does reload the page, so that the disabled fields are automatically re-enabled. If I was dealing with forms without a page reload (e.g. submitted via AJAX or something like that), I would approach it differently.
Anyhow, the code in this post is very old and nowadays the fields should be disabled with the jQuery
.prop()method instead:... $(this).find(':input').filter(function() { return !this.value; } ).prop('disabled', true); ...Then you could re-enable them fields with
.prop('disabled', false)like you suggested.