Loading ...
Sorry, an error occurred while loading the content.

Re: [JavaScript] difficulty handling form element

Expand Messages
  • mda51
    Thanks for that. The pgForm.elements[fieldName] gave exactly what I need. It had occured to me to use the document.getElementById(fieldName) as you mentioned
    Message 1 of 2 , Jun 6, 2007
    • 0 Attachment
      Thanks for that. The pgForm.elements[fieldName] gave exactly what I
      need. It had occured to me to use the
      document.getElementById(fieldName) as you mentioned but I wanted what
      I think is a cleaner method of accessing it. This function handles
      input from several different forms some with quite a few elements.
      The method you described works and in my Newbie shorts it appears to
      me that it directly accesses the object in question rather than
      searching for it.

      You mentioned possible cross-browser issues. I've got enough of 'em
      already. I develop on a linux/FF platform, then end up chasing IE
      idiosyncrasies in CSS and now; JavaScript. This is my first real
      JavaScript application. I am beginning to like the capabilities but my
      dislike for IE continues to grow...

      Thanks again. It works a treat.

      --- In JavaScript_Official@yahoogroups.com, "David Smart"
      <smartware.consulting@...> wrote:
      >
      > I think
      >
      > pgForm.fieldName.style.background
      >
      > will be looking for a field of name "fieldName", not forming a name
      from the
      > contents of fieldName.
      >
      > It's a while since I needed to do this, but I think that
      >
      > pgForm.elements[fieldName].style.background
      >
      > should work. I.e. an alpha subscript into the elements collection.
      >
      > If the names are unique in the page, then
      >
      > getElementById (fieldName)
      >
      > is another possibility, although I suspect this only finds field names
      > (rather than IDs) in IE. You might need to give the fields ID tags
      as well
      > as name tags for this one to work.
      >
      > Regards, Dave S
      >
      > ----- Original Message -----
      > From: "mda51" <no_reply@yahoogroups.com>
      > To: <JavaScript_Official@yahoogroups.com>
      > Sent: Wednesday, June 06, 2007 5:48 AM
      > Subject: [JavaScript] difficulty handling form element
      >
      >
      > > The following code is called onsubmit of a form in my page. The
      > > entire fucntions works well except the error handling portion.
      > > I iterate through all form elements and check for the name attribute
      > > if it exists then check if the field has been filled out, if it has I
      > > add it to the query string, if not a push into an array. If the array
      > > is not empty the dat a si then forwarded via xmlhttp to the serverside
      > > script for further processing. This all works.
      > >
      > > If there is an error I send a message to, and display a span and want
      > > to highlight the form field in a color to highlight the missing data.
      > > This is where the problem lies.
      > >
      > > The error handler iterate through the array of filed names assigns
      > > them to a variable I then try to alter that field accessing via the
      > > form.name syntax. "pgForm" is the form "fieldName" is the name of the
      > > field.
      > >
      > > With Alert debugging I get [ObjectHTMLFormElement] when I
      alert(pgForm);
      > > I get the right name of the missing filed(s) if I try
      alert(fieldName).
      > > When I try alert(pgForm.fieldName) it returns undefined.
      > > When actually running the code the error is pgForm.fieldName has no
      > > properties.
      > > What am I doing wrong?
      > >
      > > I have truncated the function. the vars handed to the fucntion are
      > > all correct, when disabling the error handler teh form fileds are
      > > correctly posted ot he server and the server-side debugger shows all
      > > form fields & data correctly.
      > >
      > > New to Javascript. Not new to coding.
      > >
      > > /////////Code////////////
      > >
      > > function submitPgData(serverScript, objId, pgForm)
      > > {
      > > var obj = $(objId);
      > > pgDataReq = new xmlRequest();
      > > var errMsgs = new Array();
      > > var formSubmit = null;
      > > for(var i = 0; i < pgForm.elements.length; i++)
      > > {
      > > if(pgForm.elements[i].name)
      > > {
      > > if(!formSubmit)
      > > {
      > > formSubmit = pgForm.elements[i].name+'='+pgForm.elements[i].value;
      > > if(pgForm.elements[i].value == '')
      > > {
      > > errMsgs.push(pgForm.elements[i].name);
      > > }
      > >
      > > }else{
      > > formSubmit +=
      > > '&'+pgForm.elements[i].name+'='+pgForm.elements[i].value;
      > > if(pgForm.elements[i].value == '')
      > > {
      > > errMsgs.push(pgForm.elements[i].name);
      > > }
      > > }
      > > }
      > > }
      > >
      > > if(errMsgs.length > 0)
      > > {
      > > var errSpan = $('error');
      > > errSpan.innerHTML = "<b>ERROR: </b>All fileds are required";
      > > errSpan.style.display = '';
      > > for(var i = 0; i < errMsgs.length; i++)
      > > {
      > > var fieldName = errMsgs[i];
      > > //followng line is problematic
      > > pgForm.fieldName.style.background = '#fff59d';
      > >
      > > alert(fieldName);
      > > }
      > > return false;
      > > }
      > > }
      > >
      > >
      > >
      > >
      > > Visit http://aiaiai.com for more groups to join
      > > Yahoo! Groups Links
      > >
      > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.