disable all your form elements

Courtenay : January 31st, 2006

This code example is a perfect case of engineering overkill. I'm building a CMS that auto-saves drafts, but to keep it simple, the user can only access the most recent draft. However, in the case where they go and edit the document, I need to warn them that there's a more recent draft that they should be editing. Here's how I solved it (read on..) Initially I whipped up a complex javascript so that I could getElementsByTagNames('input', 'textarea'). The code is here for posterity, but it's fairly useless; there's nothing you can't do with CSS classes. This was one of those, spend hours on a problem so you can use the 1-liner later when something much simpler would have done. 

Object.prototype.getElementsByTagNames = function() {
	var ret = $A(new Array());
	var tags = $A((arguments.length == 1 && arguments[0].constructor == Array) ? arguments[0] : arguments)
	tags.each( function(tag,j) {
	  $A(this.getElementsByTagName(tag)).each( 
	    function(iter) { ret.push(iter); }
	  ); 
	}.bind(this));
	return ret;
}
Hah! In actual fact, I ended up with this simple function, which disables all the form elements, disables the onsubmit event (saving it for later), and makes the form kinda transparent. Then I show a nice message, and they can click to re-enable, after recognising that there will be no forking of content ('all drafts will be lost if you continue') First, the JS. I ended up just iterating over the form.elements array. 

function lock_form() {
  var f = $('article_form');
  if (!f) return;
  $A(f.elements).each(function(i,index){
    i.disabled = true;
  });
  Element.setOpacity(f, 0.5);
  f.old_onsubmit = f.onsubmit;
  f.onsubmit = function() { return false; }
  return false;
}

function unlock_form() {
  var f = $('article_form');
  if (!f) return;
  $A(f.elements).each(function(i){
    i.disabled = false;
  });
  Element.setOpacity(f, 1.0);
  if (typeof f.old_onsubmit == 'function') f.onsubmit = f.old_onsubmit;
   return false;
}
..and the form.

Text box:

Select: 





Text box: 


Select:
And finally, the links. Lock form Unlock form 

Lock form
Unlock form
Try clicking the links above.. this is a fully operational battle system. Got a better method?
Posted by Courtenay Filed in javascript, rails, ruby

12 Responses to “disable all your form elements”

  1. rick Says:
    January 31st, 2006 at 11:31 PM Be careful about locking forms. What if something catastrophic happens, there's a javascript error, and they need to salvage what's left of their unsaved content? Try something like: $$('#article_form input[type=submit]') (does $$ even accept that?). $A($('article_form').getElementsByTagName('input')).reject(function(in) { return in.getAttribute('type') != 'submit' });
  2. court3nay Says:
    February 1st, 2006 at 06:08 AM you're right. but I'm not actually allowing people to re-lock the form. I'm pre-locking, then they click 'unlock' to allow edits. That's it.. the 'lock' button is for people to play with on this page :)
  3. rick Says:
    February 1st, 2006 at 06:26 AM Ah. Well at any rate I found this in mephisto: 
    
Form.disable_buttons = function(form_id) {
  $A($(form_id).getElementsByTagName('input')).each(function(input) {
    if(input.getAttribute('type') == 'submit') {
      input.blur();
      input.disabled = true;
    }
  });
}

Form.enable_buttons = function(form_id) {
  $A($(form_id).getElementsByTagName('input')).each(function(input) {
    if(input.getAttribute('type') == 'submit') {
      input.disabled = false;
    }
  });
}
  4. court3nay Says:
    February 3rd, 2006 at 05:12 AM Yeah, but what if they hit ENTER? That's why I re-assigned onsubmit, etc.
  5. Coward Says:
    February 17th, 2006 at 06:08 PM What is $A? Is that Javascript? I've never seen that before...
  6. court3nay Says:
    February 19th, 2006 at 03:31 AM it's a method in the prototype library that allows you to use the many enumerable extensions copied from Ruby, such as "each" in this case.
  7. Bobby Says:
    March 7th, 2007 at 08:47 PM

    hi Mark,

    I need your pro help mate… do you have an e-mail so i can e-mail u my problem…

    thanks in advance

    Bob

  8. læøkæøk Says:
    May 13th, 2007 at 08:26 AM

    ioyu

  9. fmvmqiorxg Says:
    July 31st, 2007 at 06:10 AM

    Hello! Good Site! Thanks you! qxgvcqhrkalmtg

  10. owekckwkxq Says:
    July 31st, 2007 at 07:33 AM

    Thanks for this site! rnepf.fqtpq.cn loh.xlerr.cn fdnx.qzuxl.cn vg.mlubj.cn pq.qsvmk.cn u.zfwek.cn ggb.punwg.cn wp.mywev.cn tyvqk.lqwtm.cn szboi.tsdva.cn q.afsyf.cn csket.sryqx.cn af.fizyn.cn njs.fbnqg.cn uz.omemg.cn bh.mywev.cn pdgby.tsdva.cn zc.zlhmj.cn yj.osqkp.cn mjd.axvbe.cn o.hefeb.cn mnjmi.atvfm.cn apihx.hrzkp.cn cr.ypcoj.cn su.rnhmw.cn

  11. rdpkhrnqka Says:
    July 31st, 2007 at 08:57 AM

    Thanks for this site! vf.wcknd.cn vp.wcknd.cn xxe.hypgr.cn ofb.oemjq.cn vxy.xopvz.cn u.wcknd.cn xnk.dhiam.cn b.avcqq.cn g.ohcxe.cn omlyy.yrhtb.cn o.gmrxs.cn nhiyx.ogpbw.cn tk.bxeci.cn ix.arphl.cn cyuye.jekxc.cn v.sfjld.cn g.bjjaf.cn xlgv.xepqe.cn nsy.jugcm.cn dsumy.piqps.cn

  12. Josh Illian Says:
    June 10th, 2009 at 08:54 AM

    Just used this solution for rendering a quick and dirty read-only view of a form. Very elegant.

    Much appreciated!

    Josh

Leave a Reply

I am a human (check this)

Remember: escape your underscores \_ and indent code at least 4 spaces or incur the wrath of smartypants.