JS form flow control
What I'm looking for is some client-side control over the flow of user input in my forms. Things like enabling/disabling different parts of the form depending on checkboxes, or other options that the user selects.
For instance, say I have a form where the user can input their billing and shipping address. I currently have a checkbox right above the shipping address so the user can check it to indicate that their shipping address is the same as their billing address. What would be cool is if, when the user checked that box, that the values are copied into the shipping fields and then they become un-editable.
Does anybody know of any drop-in style JS libraries that can accomplish this?
beetle's fValidate is pretty amazing; it's about the closest thing you'll find to a really portable, full-featured client-side form processing script around. Don't know if it does the specific behavior you cited (really more of a convenience feature than an input checker) but, if it doesn't, he's probably working on one as we speak. Pretty easy to write, actually:
Problem is, other enabling/disabling/write-preventing/whatever scenarios can become pretty application-specific, necessitating some custom code. Anything can be generalized, of course, if you have the time. Might check here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
var oForm = document.forms;
oForm.elements['bill_name'].value = 'Milton Knish';
oForm.elements['bill_street'].value = '33 Hellish Crescent';
oForm.elements['bill_city'].value = 'Homer';
oForm.elements['bill_state'].value = 'AK';
oForm.elements['bill_zip'].value = '99989';
var oForm = oCheckbox.form;
var bWhich = oCheckbox.checked;
var fields = ['name' , 'street' , 'city' , 'state' , 'zip'];
for (var i = 0; i < fields.length; ++i)
oForm.elements['ship_' + fields[i]].value = (bWhich) ? oForm.elements['bill_' + fields[i]].value : '';
oForm.elements['ship_' + fields[i]].readOnly = (bWhich) ? true : false;
<input type="button" value="do it for me"
onclick="too_lazy_to_populate()"><br /><br />
<input id="bill_name" name="bill_name" value="" type="text">____name<br />
<input id="bill_street" name="bill_street" value="" type="text">____street address<br />
<input id="bill_city" name="bill_city" value="" type="text">____city<br />
<input id="bill_state" name="bill_state" value="" type="text">____state<br />
<input id="bill_zip" name="bill_zip" value="" type="text">____zip code<br />
<h5>Shipping Address / check if same as Billing Address____<input type="checkbox"
<input id="ship_name" name="ship_name" value="" type="text">____name<br />
<input id="ship_street" name="ship_street" value="" type="text">____street address<br />
<input id="ship_city" name="ship_city" value="" type="text">____city<br />
<input id="ship_state" name="ship_state" value="" type="text">____state<br />
<input id="ship_zip" name="ship_zip" value="" type="text">____zip code<br />
Wow, fValidate is very very impressive. I just found my new JS validation tool :)
Thanks for the props, adios.
You may also want to check out qForms. It's a bit more developer-oriented, so it may be harder to use, but it has a lot of other stuff besides form validation, which is the only thing that fValidate handles.