Stillnet Studios

Here is a little ‘Apply To All’ feature I added to a large form we had. There were many rows of data, each with several columns the user needs to fill out. Most of the time the values they were entering in the top row ended up being what they would set all the subsequent rows to. So I wanted to add an easy way they could set all the later rows to the value of the first.

This was actually very easy to do with jQuery. I added a class to each form element, and links on the first row, so my code ended up looking something like this:

<cfloop query="qryRows">
  <tr>
    <td>
      <input type="checkbox" class="verified" name="verified_#CurrentRow#">
      <cfif CurrentRow EQ 1>&#8595;</cfif>
    </td>
    <td>
      <input type="checkbox"class="reviewed" name="reviewed_#CurrentRow#">
      <cfif CurrentRow EQ 1>&#8595;</cfif>
    </td>
    <td>
      <select class="okToContinue" name="okToContinue_#CurrentRow#">
        <option>Yes</option>
        <option>No</option>
      </select>
      <cfif CurrentRow EQ 1>&#8595;</cfif>
    </td>
  </tr>
</cfloop>

So now each type of form element is grouped together with a class, and the first row has links next to each element. If I played around with this a little more I think I could add the link with jQuery too, instead of having to check the CurrentRow variable and do this manually.

Here is the applyToAll function. Note you have to copy the values a little differently depending on if the element is a checkbox or a select control.

// grabs the first element in a class, then applies its value to all elements with that class
applyToAll = function(classToApplyTo) {

  // need to apply differently depending on if its a select control or a checkbox. We read what kind of element it is by looking at the 'type'
  switch ( $('.' + classToApplyTo + ':first').attr('type') ) {
    case 'select-one':
      var baseValue = $('.' + classToApplyTo + ':first').val();
      $('.' + classToApplyTo).val(baseValue);
      // also call the change method, just in case there was an onchange handler set on the element
      $('.' + classToApplyTo).change();
      break;
    case 'checkbox':
      var baseValue = $('.' + classToApplyTo + ':first').attr('checked');
      $('.' + classToApplyTo).attr('checked', baseValue);
      // also call the change method, just in case there was an onchange handler set on the element
      $('.' + classToApplyTo).change();
      break;
    }
  }

Here is a demo:

Some of the form elements had onchange handlers that made other text show/hide on the screen, so in the applyToAll function I manually call the ‘change’ method so those events fire on the elements.

This change has saved the users time on filling out huge forms.