Make an alternate form to register for nanny taxes and increase state tax revenue

Ah, the nanny tax. Some quick Google searches show a range of 80 to 95% of people who are obligated to pay the nanny tax, simply don’t. (NYTimes, ParentDish.com) That’s a pretty whopping statistic.

As I’ve been finding out, it would certainly be easier to just skip it. This past summer I hired a nanny for about six weeks. And, wanting to do the right thing, I decided I would deal with the paperwork and expense, and just pay her as a household employee and deal with the taxes. And that’s still the right thing to do.

But, wow, do I hate paperwork, and this stuff is over the top.

Thumbnail panels of form 518
Form 518 from the State of Michigan was a bit over the top. I just wanted to pay taxes for hiring a nanny for a few weeks.

For the State of Michigan, I found out I have to fill out form 518, Registration for Michigan Business Taxes. The title of the form alone caused some trepidation. As I proceeded to fill it out, I found myself frequently scratching my head, thinking things like, “Why are they asking me about acquiring a business in the past four years? I just wanted to pay taxes for hiring a nanny.” Or, “But I’m not a business. I’m not buying or selling anything. This is a money losing scenario for me. I just want to pay what I have to for hiring a nanny!”

So, there was form 518, plus two additional forms I had to fill out, just to jump through some hoops to register for Unemployment Insurance taxes.

It’s pretty obvious that those forms are meant for real businesses, not private individuals who want to pay a household employee. I was so close to hiring a lawyer or accountant, but that just seemed unreasonable to me, so out of proportion with the fact that I just wanted to pay a nanny.

Upon having gone through the paperwork, nearly all of it was completely irrelevant. The relevant pieces were mostly my name and address or oddly specific. For instance, I nearly didn’t find the SIC number that applies to my situation. On the second page of SIC codes, about two thirds of the way down the fourth column of codes I found 881: Private Households – Domestic Employees, Cleaning, Baby-sitting, Private Nursing. I’m glad I found it, because I was really close to just leaving that field on the form blank.

Perhaps to the government, paying a nanny is just like owning a business. But, to me that seems like a dandy of a one-size-fits-all blunder. If instead the only form that a private individual had to fill out in order to register for nanny taxes was a quarter-sheet size form with contact information, perhaps more people would actually fill it out.

Maybe it could be a special edition of the 518, called 518-PH, for Private Households. The rest of the pertinent 518 information could be presumed on that form, simply because people filling it out fit that profile. (For instance, it would imply SIC # 881.)

How many people looked at the paperwork, freaked out for a moment, and then just decided to skip it? The current form is quite simply a roadblock to tax revenue and to people who would like to do the right thing.

HTML form fields that, when not selected, do not even send a field name upon submit

Checkboxes and radio buttons that have not been checked and multiple select lists that have no selection submit nothing upon submission of the form. It’s as though they aren’t even there.

At first, this may seem obvious (Well, yeah, you didn’t select them, dummy!), except that it runs counter to every other form field.

If you have a text field named “surname” and you submit the form with no value in “surname”, the submission still includes the variable name “surname” but it has no corresponding value. You have the key with a null value.

It’s the same with textareas, any other type of input element, and select lists (where you are limited to a single selection). Even named buttons submit their values.

So, the stealthy cuplrits:

  • input type=”radio”
  • input type=”checkbox”
  • select multiple=”multiple”

Adam and I learned this in the midst of discussing and testing code this evening.

Revision: Using Javascript to add instructive text for input and textarea form fields

OUTDATED POST: HTML5’s placeholder attribute creates the behavior that this javascript did. Just use the placeholder attribute.

This is a code update to a prior post.

The Javascript I had posted earlier fell short in one important arena: when you submitted the form without entering your own text, the form would send in the instructive text. It should instead have erased that text prior to the form submission.

Further, in retrospect, the code was trying to do too much. It is enough to simply set a class of blurred and then remove it, instead of replacing it with a class of sharpened.

So, with that in mind, here is an updated set of Javascript that can be used to insert instructive or suggested texts into form fields, like text input fields or textareas.

The code

To start with, we need some scripts to add and remove classes values from an element. The one caveat when doing this is to remember that you can have many class names assigned in a single class attribute. So, when adding and removing class names, you have to be sure to leave pre-existing class names alone. Instead of writing these functions, I did a quick Google search for “Javascript addClass” and found these handy Javascript functions, hasClass, addClass, and removeClass, at openjs.com. I’ll let you look there for that code.

With those class manipulation functions in hand, I rewrote the setSuggestedFormText function down to this.


/* setSuggestedFormText takes 2 arguments, mode and field.
/ mode is either set to put in place the suggested text
/ clear is to remove the suggested text
/ the set mode also assigns adds a class of blurred
/ field is the value of the ID attribute of the input or textarea element
/ April 13, 2008, Davin Granroth, granroth@gmail.com.
*/
function setSuggestedFormText(mode, field){
var key = document.getElementById(field);
var defaultText = key.title;
if(mode == 'set'){
if(key.value == '') {
addClass(key, 'blurred');
key.value = defaultText;
}
}
if(mode == 'clear'){
if(key.value == defaultText) {
removeClass(key, 'blurred');
key.value = '';
}
}
}

 

This function takes two arguments: mode and field. The first, mode can be either of set or clear. The one puts in the suggested text from the title attribute of the element, and the other clears it out. Each checks to see if the value of the field has been edited, in which case it respects the user input.

The next step is to set up the function which triggers this function at the appropriate events. There are three events at which the function needs to be called: when the page loads, when focus is put on the field, and when focus is removed from the field. Here is the code for setUpSuggestedFormText.


/*
/ field is the id of input or textarea field
/ parent is the id of the containing form element
*/
function setUpSuggestedFormText(field, parent){
if(document.getElementById(field)){
// This will set the text on page load
setSuggestedFormText('set', field);
// These 2 events will toggle between the set and clear modes
document.getElementById(field).onblur = function(){
setSuggestedFormText('set', field);
}
document.getElementById(field).onfocus = function(){
setSuggestedFormText('clear', field);
}
// Clear the text before sumitting the form.
document.getElementById(parent).onsubmit = function(){
setSuggestedFormText('clear', field);
}
}
}

 

This setUpSuggestedFormText takes two arguments: the id of the field element and the id of its parent form. The id of the parent is used in the trigger for the form submission. I had considered using a parentNode property to find it, but depending on the markup in the form, it may be multiple parentNodes up. So, this is less code. However, if someone wants to write up the function to recursively walk up the parentNode tree to find the parent form’s id, I’d be happy to incorporate it.

The last step is to call the setUpSuggestedFormText once the DOM has loaded in the page. One slightly intrusive means of doing this is to put a Javascript setUp function just before the closing body tag. You can, of course, choose to use something like an addDOMLoadEvent (Google for that) function. Here is what the setUp function looks like in the Javascript.


function setUp(){
setUpSuggestedFormText('to','msgForm');
setUpSuggestedFormText('from','msgForm');
}

 

You can download sample code which uses an illustration of a message form with from, to, and message fields. The download is a ZIP file which contains an XHTML file, a CSS file, and a Javascript file.

Using Javascript to add instructive text for input and textarea form fields

OUTDATED POST: HTML5′s placeholder attribute creates the behavior that this javascript did. Just use the placeholder attribute.

UPDATE 2008-04-13: This code has been refactored. Please view the updated posting.

Over the last year or so, I’ve worked on a number of websites where I wanted to add instructive text to form fields, but didn’t want that text to get in the way when a person actually tries to fill out the form. So, behavior-wise, the page would load with instructive (or suggested) text in the fields. It should have a class attribute that can be used to style it so it doesn’t look like a real value (grey and italic, for instance). When someone clicks on the field, the instructive text should go away and the class should go away so the default styling kicks in. When someone clicks off, the suggested text and class should pop back in, so long as the field is empty. The instructive text should come from the title attribute on the field (that made the most sense to me, given all the options).

So, here are a couple Javascript functions to do so.


function setSuggestedFormText(mode, field) {
/*
mode values must be one of: set, clear, or reset
set is to check the value on page load
clear is to clear the default value when someone clicks on the field
reset is to fill in the default value when someone clicks off the field
field is the value of the ID attribute of the input or textarea element
Use .blurred and .sharpened selectors in your CSS file
*/
var key = document.getElementById(field);
var defaultText = key.title;
switch(mode) {
case 'set':
if(key.value == '') {
key.value = defaultText;
key.setAttribute('class', 'blurred');
}
break;

case ‘clear’:
if(key.value == defaultText) {
key.value = ”;
key.setAttribute(‘class’, ‘sharpened’);
}
break;

case ‘reset’:
if(key.value == ”) {
key.value = defaultText;
key.setAttribute(‘class’, ‘blurred’);
}
break;

default:
break;
}

}
function setUpSuggestedFormText(field){
setSuggestedFormText(‘set’, field);
var node = document.getElementById(field);
node.onblur = function(){
setSuggestedFormText(‘reset’, field);
}
node.onfocus = function(){
setSuggestedFormText(‘clear’, field);
}
}

 

To use these functions, add them to your site’s Javascript library, and then call the following functions when the document is loaded. Google for adddomloadevent or you could probably use jQuery’s document.ready function.

Ok, usage. Let’s say you have an input field for an email address, like so:


<input type="text" name="email"
id="email" title="Your e-mail address" />

 

You would add the following javascript code to trigger the functions.


// Once the DOM is loaded, call this function
setUpSuggestedFormText('email');

 

Feel free to use it. If you make an improvement, please let me know.

To see it in use, try the search form on this page. For now, the Javascript source is at http://davingranroth.com/blog/custom.js