1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

HTML/JS - Referencing a form through Javascript

Discussion in 'Software Development' started by asbo, Jun 13, 2005.

Thread Status:
Not open for further replies.
  1. asbo

    asbo Thread Starter

    Joined:
    Sep 21, 2001
    Messages:
    507
    Hey,

    I'm developing a page that has more than one form on it, and I need to dynamically reference a form through JavaScript in order to add more elements to the form, but I can't seem to get it to work. Can someone give me a hand?
    HTML:
    <STYLE>
    .formTable {border: 2px solid black;}
    .formTableInnard {text-align: center; width: 720;}
    .textEntry {width: 675px; height: 150px; scrolling: auto;}
    .linkURLHeader {text-align: center; width: 175px; background-color: #CCCCCC; border: 1px solid black;}
    .linkDescriptionHeader {text-align: center; width: 500px; background-color: #CCCCCC; border: 1px solid black;}
    .linkURL {width: 175px;}
    .linkDescription {width: 500px;}
    </STYLE>
    <SCRIPT>
    var fieldType = 'text';
    var linkURLName = 'linkURL1';
    var linkDescriptionName = 'linkDescription1';
    var linkURLWidth = 175;
    var linkDescriptionWidth = 500;
    
    function addLink (form, tmpFieldName, tmpFieldWidth) {
      if (this.document.getElementById) {
        var input = this.document.createElement('INPUT');
          if (this.document.all) { // what follows should work with NN6 but doesn't in M14
            input.type = fieldType;
            input.name = tmpFieldName;
            input.width = tmpFieldWidth;
          }
          else if (this.document.getElementById) { // so here is the NN6 workaround
            input.setAttribute('type', fieldType);
            input.setAttribute('name', tmpFieldName);
            input.setAttribute('width', tmpFieldWidth);
          }
        form.appendChild(input);
      }
    }
    
    function getField (form, tmpFieldName) {
      if (!this.document.all)
        return form[tmpFieldName];
      else  // IE has a bug not adding dynamically created field as named properties so we loop through the elements array
        for (var e = 0; e < form.elements.length; e++)
          if (form.elements[e].name == tmpFieldName)
            return form.elements[e];
      return null;
    }
    </SCRIPT>
    <SCRIPT>
    var i = 1;
    </SCRIPT>
    </HEAD>
    <BODY>
    <CENTER>
    
    <TABLE CLASS="formTable"><TR CLASS="formTableInnard"><TD CLASS="formTableInnard">
    <FORM NAME="header" METHOD="post">
    <INPUT TYPE="submit" VALUE="submit" WIDTH="250">
    <BR>
    <BR>
    <TEXTAREA NAME="header" CLASS="textEntry"></TEXTAREA>
    </FORM>
    </TD></TR></TABLE>
    
    <BR><BR>
    
    <TABLE CLASS="formTable"><TR CLASS="formTableInnard"><TD CLASS="formTableInnard">
    <FORM NAME="links" METHOD="post">
    <INPUT TYPE="button" VALUE="add field" WIDTH="250"
           ONCLICK="if (getField(this.document.forms[1], linkURLName))
                      linkURLName = 'linkURL' + ++i;
                    addField(this.document.forms[1], linkURLName, linkURLWidth);
                    if (getField(this.document.forms[1], linkDescriptionName))
                      linkDescriptionName = 'linkDescription' + ++i;
                    addField(this.document.forms[1], linkDescriptionName, linkDescriptionWidth);">
    <BR>
    <INPUT TYPE="submit" VALUE="submit" WIDTH="250">
    <BR>
    <BR>
    <INPUT TYPE="text" VALUE="URL" CLASS="linkURLHeader" onFocus="this.blur()"><INPUT TYPE="text" VALUE="Description" CLASS="linkDescriptionHeader" onFocus="this.blur()">
    <INPUT NAME="linkURL0" TYPE="text" CLASS="linkURL"><INPUT NAME="linkDescription0" TYPE="text" CLASS="linkDescription">
    </FORM>
    </TD></TR></TABLE>
    
    Initially, the JS code used "this.form", which stopped working after I added a second form. I googled it, and found that "document.forms" was supposed to work, and that's what I have now and it's not working. Any gurus out there?


    Thanks,
    asbo
     
  2. asbo

    asbo Thread Starter

    Joined:
    Sep 21, 2001
    Messages:
    507
    Also: I tried giving each form an ID tag (HeaderForm and LinksForm) and then referencing them using "document.getElementByID('[ID]')" to no further success.

    This is getting rather frusterating :/
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/371393

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice