By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,895 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

events and forms

P: 55
funny thing....I'm dynamically building forms, well, WAS building forms, but for this project I need some very specific validation and logic handling, so while I was changing my functions to deal with this, I ended up with a "form" that is just a span with form elements inside of it, submit works fine (custom submit too), all my validation fires properly, the only thing that isn't working is setting my events.

When I started I was actually generating a valid html form element, events worked fine when I set them on the fields, however, since I started appending the fields to the span, none of the events I set make it through the creation process..they seem to disappear when I append the form at the end of the function, I had this working once before, and added several things to it, which prolly broke it;)

really just asking if anyone else has run into a similar problem assigning events to form elements
Oct 27 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
Well, a bit of code would help. Could be quite a number of reasons why it doesn't work.
Oct 27 '08 #2

P: 55
I'll see if I can put together a small sample, it's generated from json style notation in a string....it's about 1200 lines of js and a few php files, so I didn't want to try to post the whole thing, I'll see if I can get it on a server with a link....it's a agent tool for a call center, so it's not something that will actually be online.

Mostly I was just curious if there was a known issue....I use firebug and visual studio for debugging and there isn't an error message in either, I've tried changing the parent node back to form with the same result....Like I said, I'll try to get a version online
Oct 27 '08 #3

P: 55
thanks for the thought acoder;) turns out I can't post this particular code online. Apparently large companies don't like proprietary script available for free online:p

anyway, it turned out that the problem was in my 'bind' method, the known issues of dynamic form generation seem to still be mostly relative to ie and radio boxes;)
Oct 28 '08 #4

acoder
Expert Mod 15k+
P: 16,027
So I gather you've solved the problem? If so, well done. Any chance you could post just the relevant part where you were going wrong?
Oct 28 '08 #5

P: 55
yup....this is my tester copy, mostly my stuff with very little relative to the job, so it should be cool to post. There are mosre functions and files that go along with this obviously, but this should give you an idea....the only problem I'm still having is the wierd event when you fire onchange events for a fieldset and it relative radio buttons

the idea is that we have a set of "template" fields:

Expand|Select|Wrap|Line Numbers
  1. GL.FieldItems['EU Email']={
  2.     label:'EU Email',
  3.     type:'text',
  4.     size:15,
  5.     validator:'required'
  6. }
built in a js file (GL.FieldItems) is a reference to these...then we allow them to set up their actual forms using basic html style layout for the test, using "<br>" and the like, but for the forms they type something like

Expand|Select|Wrap|Line Numbers
  1. {{field=EU Email, Label=true}}
I parse the string with:

Expand|Select|Wrap|Line Numbers
  1. buildJsonFields=function(o){
  2.  
  3.     var testReg=new RegExp(/(.*?)\{\{(.*?)\}\}/g)
  4.     var form=o.par
  5.     form.ValiForm={}
  6.     form.Validate=ValidateForm.bindPart({form:form})
  7.     o.str.replace(testReg,function($0,$1,$2){
  8.                                  form.appendChild(document.createElement('span')).innerHTML=$1
  9.                                  JsonFieldProps({Jstr:$2,par:form})
  10.                                  return
  11.                                  })
  12.     return(form)
  13. }
which in turn calls another parser style function per "field"

Expand|Select|Wrap|Line Numbers
  1. JsonFieldProps=function(o){
  2.     var form=o.par || tester
  3.     var Jstr=o.Jstr
  4.     var Label=false
  5.     var vis=true
  6.     var fieldRef=false
  7.     var formRef=false
  8.     var button=false
  9.     //$2 & $3 are, respectively, 'name' = 'value'
  10.     var tmpstr=Jstr.replace(/((.*?)[=]{1}(.*?)(?:, |,|$))/g,function($0,$1,$2,$3){
  11.             switch($2){
  12.                 case 'field':
  13.                     fieldRef=$3;
  14.                     break;
  15.                 case 'label':
  16.                     Label=$3;
  17.                     break;
  18.                 case 'visible':
  19.                     vis=$3;
  20.                     break;
  21.                 case 'form':
  22.                     formRef=$3
  23.                     break;
  24.                 case 'button':
  25.                     button=$3
  26.                     }})
  27.     var field=fieldRef?BuildField({o:fieldRef,form:form}):(formRef?buildJsonForm({str:GL.FormItems[formRef].innerHTML,par:form,name:formRef}):false)
  28.     if(!formRef){buildLabel({field:field,pos:Label})}
  29.     if(field){
  30.         field.style.display=(vis!='false')?'inline':'none'
  31.         if(field.label){field.label.style.display=(vis!='false')?'inline':'none'}
  32.     }
  33.     if(button){
  34.         switch(button){
  35.             case 'copy':
  36.                 var buttVal='Copy Form'
  37.                 var buttFunc=form.Validate
  38.                 break;
  39.             case 'reset':
  40.                 var buttVal='Reset Form'
  41.                 var buttFunc=form.Validate
  42.                 break;
  43.         }
  44.         buildButton(butO={atts:{innerHTML:buttVal},func:buttFunc.bind(form.ValiForm)},form)
  45.     }
  46. }
a few functions are called during this, most notably:

Expand|Select|Wrap|Line Numbers
  1. BuildField=function(args){
  2.     var o=(args.o.constructor == String)?GL.FieldItems[args.o]:args.o;
  3.     if(!o){return}
  4.     //alert(args.o+', '+EvType)
  5.     var prop;
  6.     var style;
  7.     var method;
  8.     var inputs={file:'file',checkbox:'checkbox',password:'password',text:'text',radio:'radio'}
  9.     if(!o.name){o.name=args.form.name+'_'+args.o}
  10.     if(o.options && inputs[o.type]){var tmpType=o.type;o.type='fieldset';o.style=o.style || {};o.style.position='absolute';o.style.display='inline'}
  11.     var type=(inputs[o.type])?(document.all?('<input type="'+o.type+'" name="'+o.name+'" />'):'input'):o.type
  12.     if(((o.type == 'fieldset') || o.ParentNode) && (o.type != 'checkbox')){var EvType='onchange'}
  13.     else if(o.type=='select'){var EvType='onchange'}
  14.     else{var EvType='onblur'}
  15.     var field=document.createElement(type)
  16.     for(att in o){
  17.         if(att=='style'){
  18.             for(style in o.style){
  19.                 field.style[style]=o.style[style]
  20.             }
  21.         }else if(att=='checked'){
  22.             field.setupFunc=function(){setCheckedValue(field.form[o.name], o.value)}
  23.         }else if((att=='type') && (type!='input')){
  24.         }else{
  25.             try{
  26.             field[att]=o[att]
  27.         }catch(e){continue}
  28.         }
  29.     }
  30.     field.logic=window[o.logic] || o.logic || false
  31.     for(i in o.options){
  32.         var thisArg=args
  33.         thisArg.o=o.options[i]
  34.         if(!inputs[tmpType || o.type]){thisArg.o.type='option'}
  35.         else(thisArg.o.type=tmpType || o.type)
  36.         thisArg.o.name=o.name
  37.         thisArg.o.id=o.name+'_'+i
  38.         thisArg.o.options=false
  39.         thisArg.o.ParentNode=field
  40.         BuildField(thisArg)
  41.     }
  42.     var parent=o.ParentNode || args.form
  43.     field.parForm=args.form;
  44.     parent.appendChild(field);
  45.     if(o.type==='option'){field.innerHTML=o.label}
  46.     else{buildLabel({field:field,par:parent})}
  47.     var width=field.offsetWidth
  48.     if(tmpType){field.style.position='relative';field.style.width=width+'px';}
  49.     if(field.validator==='true'){field.validator=GL.Validation[o.type]}
  50.     field.Validate=ValidateFld.bindPart({field:field})
  51.     if(o.logic || (o.ParentNode && o.ParentNode.logic)){field[EvType]=field.ParentNode?field.ParentNode.logic.bind(field):window[o.logic]?window[o.logic].bind(field):o.logic}
  52.     args.form.ValiForm[field.name]=field
  53.     valiForm=args.form.ValiForm
  54.     return(field);
  55. }
my problem was mostly with my bind function that I use to keep the scopes after a call, that and this whole system has to work on ie6 ::shudder:: There are dozens of better ways to handle this type of thing, but they want what they want;)

And also, there is no framework driving this other than mine, every function or function call you see are written entirely by me.
Oct 28 '08 #6

acoder
Expert Mod 15k+
P: 16,027
If you mean onchange on a fieldset, some browsers support it, but I don't think it's part of the standards - W3C. Also see this possibly related thread from the newsgroup archives.
Oct 29 '08 #7

P: 55
yeah, I figured that out as well, I set the onchange event of the fieldset, but it really works more like a custom method at this point, I have it set up so that on focus of the radios the appropriate argument is sent to the onchange method of the fieldset....I had initially set the radios to onchange also, but ran into a problem as ie fires the events differently than firefox...the onchange event seemed to fire BEFORE the appropriate radio was actually checked, so ie was always a step behind;) but like I said the onfocus event works for the radios;)
Oct 29 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.