Jump to content

Form Page: select field validation and controlling hidden fields


Recommended Posts

Hi, I am using websitebaker 2.8.3 CMS and this is my first time with Javascript. I have a form and want the extra info text boxes to be hidden until needed ie, when the select field=yesThis js hides them ok but will not display the fields when needed. Then for the select fields that still are on the default "Please Select" I want them to be treated as empty. The last part of the code should do this but it doesnt. I was given the code to use and have modified it. The logic looks ok to me but obviously something is wrong as it doesnt do the right thing. Firebug detects no errors. I would really appreciate a little help with this. This is a sidetrack but the only part i have no idea about in the code below is, ...onchange = function() what is "function()"? (tried searching on web for an explanation with no luck although i see it used in examples) for info: field34 = select field, field71=extra text field for itAlso: Select field values are 'Please Select','Yes','No'

<tr><td> </td><td><input type="submit" name="submit" onclick="onSend()" value="{SUBMIT_FORM}" /></td></tr></table><script type="text/javascript">var selectFields  = new Array('field34', 'field35', 'field36', 'field32', 'field37', 'field38', 'field41', 'field42', 'field43', 'field65');var specialFields = new Array('field71', 'field72', 'field74', 'field73', 'field75', 'field76', 'field77', 'field78', 'field79', 'field80');function hidefield(i){document.getElementById(specialFields[i]).parentNode.parentNode.setAttribute("style","visibility:collapse");}for (i = 0; i < selectFields.length; i++){hidefield(i);}for (i = 0; i < selectFields.length; i++){document.getElementById(selectFields[i]).onchange = function()    {    if (document.getElementById(selectFields[i]).selectedIndex == 1)	    {	    document.getElementById(specialFields[i]).parentNode.parentNode.setAttribute("style","visibility:visible");	    }    else	   {	   hidefield(i);	   }    }    function onSend()   {    if (document.getElementById(selectFields[i]).selectedIndex == 0)	   {	   document.getElementById(selectFields[i]).name = "empty";	   }    }}</script>

After i get this working then as not all my select fields need additional information but i still want them to be validated as empty when not set by the user, such asGender Please Select/Male/Femalethen maybe for the times where there is no extra hidden field I could still use a correct value in the select array but use a known id in the special array such as 'fieldnull' (or similar) and skip hidefield processing during the loop.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...