appendChild checkboxes not submitting

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Keith Page

    appendChild checkboxes not submitting

    I have a page that changes a list of checkboxes based on what city you
    select, however when i insert the new nodes the values are not
    submitted when the boxes are checked and form is sent, its like they
    are not hooked to the form properly.

    Any help would be appritiated


    JAVASCRIPT ///


    cities[0] = "ne,nw,se,s w";
    //change the cities quadrent
    function write_quadrent( city_id){
    var quadrents = cities[city_id].split(",");
    var newnode = document.create Element("div");
    newnode.id = "advanced_city_ quadrent";
    for(var i = 0; i < quadrents.lengt h; i++){
    var newnode_input = document.create Element("INPUT" );
    newnode_input.t ype = "checkbox";
    newnode_input.n ame = "quadrent";
    newnode_input.i d = "quadrent";
    newnode_input.v alue = quadrents[i];
    var newnode_text = document.create TextNode(quadre nts[i]);
    newnode.appendC hild(newnode_in put);
    newnode.appendC hild(newnode_te xt);
    }
    //create new node
    var par = document.getEle mentById("advan ced_city_quadre nt_holder");
    var checkboxes = document.getEle mentById("advan ced_city_quadre nt");
    var replaced = par.replaceChil d(newnode,check boxes);
    }

    END JAVASCRIPT ////


    <form id="propertysea rch" name="propertys earch"
    action="/cmn/apps/form_router.php " method="post">

    <div id="advanced_ci ty_quadrent_hol der">
    <div id="advanced_ci ty_quadrent">

    <script type="text/javascript">
    write_quadrent( readCookie('cit y'));
    </script>
    </div>
    </div>
    <input type="submit" value="submit"/>
    </form>


    So in the example given above you can say the cookie city is set to 0,
    it goes through and writes a checkbox for each quadrent given for that
    city, that works fine and the boxes change but when i submit them they
    don't send any values.
  • kaeli

    #2
    Re: appendChild checkboxes not submitting

    In article <ea527ff0.04070 70253.1bcda7a@p osting.google.c om>,
    pagekd@Telus.ne t enlightened us with...[color=blue]
    > I have a page that changes a list of checkboxes based on what city you
    > select, however when i insert the new nodes the values are not
    > submitted when the boxes are checked and form is sent, its like they
    > are not hooked to the form properly.
    >
    > Any help would be appritiated
    >[/color]

    divs are not proper children of a form.

    The following tested successfully in IE.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <script type="text/javascript">
    var cities = new Array();
    cities[0] = "ne,nw,se,s w";

    //change the cities quadrent
    function write_quadrent( city_id){
    var quadrents = cities[city_id].split(",");
    var f = document.forms["propertysearch "];
    var s = f.elements["sub"];
    for(var i = 0; i < quadrents.lengt h; i++){
    var newnode_input = document.create Element("INPUT" );
    newnode_input.s etAttribute("ty pe","checkbox") ;
    newnode_input.s etAttribute("na me","quadrent") ;
    newnode_input.s etAttribute("id ","quadrent ");
    newnode_input.s etAttribute("va lue",quadrents[i]);
    var newnode_text = document.create TextNode(quadre nts[i]);
    f.insertBefore( newnode_input,s );
    f.insertBefore( newnode_text,s) ;
    }
    //create new node
    //var par = document.getEle mentById
    ("advanced_city _quadrent_holde r");
    //var checkboxes = document.getEle mentById
    ("advanced_city _quadrent");
    //var replaced = par.replaceChil d(newnode,check boxes);
    }

    </script>
    </head>

    <body>

    <form id="propertysea rch" name="propertys earch"
    action="" method="get">
    <input type="submit" value="submit" name="sub" id="sub">
    </form>
    <script type="text/javascript">
    write_quadrent( 0);
    </script>
    </body>

    --
    --
    ~kaeli~
    He's your God, they're your rules - you burn in Hell.



    Comment

    • Martin Honnen

      #3
      Re: appendChild checkboxes not submitting



      kaeli wrote:

      [color=blue]
      > divs are not proper children of a form.[/color]

      Why not, the HTML 4 definition is at

      and says
      <!ELEMENT FORM - - (%block;|SCRIPT )+ -(FORM) -- interactive form -->
      where %block is defined as
      <!ENTITY % block
      "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
      which contains DIV so I don't see why divs are not proper children of a
      form.

      Note that I haven't looked at the original posters code but a <div>
      inside of a <form> shouldn't be a problem.

      --

      Martin Honnen


      Comment

      • kaeli

        #4
        Re: appendChild checkboxes not submitting

        In article <40ec017d$1@ola f.komtel.net>, mahotrash@yahoo .de enlightened
        us with...[color=blue]
        > kaeli wrote:
        >[color=green]
        > > divs are not proper children of a form.[/color]
        >
        > Why not, the HTML 4 definition is at
        > http://www.w3.org/TR/html4/interact/...html#edef-FORM
        > and says
        > <!ELEMENT FORM - - (%block;|SCRIPT )+ -(FORM) -- interactive form -->
        > where %block is defined as
        > <!ENTITY % block
        > "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
        > BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
        > which contains DIV so I don't see why divs are not proper children of a
        > form.
        >
        > Note that I haven't looked at the original posters code but a <div>
        > inside of a <form> shouldn't be a problem.
        >
        >[/color]


        The original code appended form elements to a div inside a div that was
        inside the form, not the form itself.
        It didn't work that way. It worked when I appended them to the form
        directly. I changed a couple other things, though, so maybe it was
        really something else that was the problem.

        Check out the original post and compare to mine that worked. Do you see
        what else might have been the problem?


        --
        --
        ~kaeli~
        Experience is something you don't get until just after you
        need it.



        Comment

        • Martin Honnen

          #5
          Re: appendChild checkboxes not submitting



          kaeli wrote:
          [color=blue]
          > In article <40ec017d$1@ola f.komtel.net>, mahotrash@yahoo .de enlightened
          > us with...[/color]
          [color=blue]
          > The original code appended form elements to a div inside a div that was
          > inside the form, not the form itself.
          > It didn't work that way.[/color]

          I don't think the <form>/<div> structure is a problem, I have simply
          removed the function call that was manipulating the document while the
          <div> are loading beneath of the <form> and then I don't have any
          problem with the checkboxes being submitted with IE6:

          <html lang="en">
          <head>
          <title>adding form controls</title>
          <script type="text/javascript">
          var cities = [];
          cities[0] = "ne,nw,se,s w";
          //change the cities quadrent
          function write_quadrent( city_id){
          var quadrents = cities[city_id].split(",");
          var newnode = document.create Element("div");
          newnode.id = "advanced_city_ quadrent";
          for(var i = 0; i < quadrents.lengt h; i++){
          var newnode_input = document.create Element("INPUT" );
          newnode_input.t ype = "checkbox";
          newnode_input.n ame = "quadrent";
          newnode_input.i d = "quadrent";
          newnode_input.v alue = quadrents[i];
          var newnode_text = document.create TextNode(quadre nts[i]);
          newnode.appendC hild(newnode_in put);
          newnode.appendC hild(newnode_te xt);
          }
          //create new node
          var par = document.getEle mentById("advan ced_city_quadre nt_holder");
          var checkboxes = document.getEle mentById("advan ced_city_quadre nt");
          var replaced = par.replaceChil d(newnode,check boxes);
          }
          </script>
          </head>
          <body>


          <form id="propertysea rch" name="propertys earch"
          action="jsInter preter.html" method="get">

          <div id="advanced_ci ty_quadrent_hol der">
          <div id="advanced_ci ty_quadrent">
          </div>
          </div>
          <input type="submit" value="submit"/>
          </form>
          <script type="text/javascript">
          write_quadrent( 0);
          </script>
          </body>
          </html>

          But I think Keith, the original poster needs to tell us which browser he
          has had problems with.

          --

          Martin Honnen


          Comment

          • kaeli

            #6
            Re: appendChild checkboxes not submitting

            In article <40ec1100$1@ola f.komtel.net>, mahotrash@yahoo .de enlightened
            us with...[color=blue]
            >
            >
            > kaeli wrote:
            >[color=green]
            > > In article <40ec017d$1@ola f.komtel.net>, mahotrash@yahoo .de enlightened
            > > us with...[/color]
            >[color=green]
            > > The original code appended form elements to a div inside a div that was
            > > inside the form, not the form itself.
            > > It didn't work that way.[/color]
            >
            > I don't think the <form>/<div> structure is a problem, I have simply
            > removed the function call that was manipulating the document while the
            > <div> are loading beneath of the <form> and then I don't have any
            > problem with the checkboxes being submitted with IE6:
            >[/color]

            Ah, that must have been the problem.
            Makes sense. I moved it just because. Maybe it was my sixth sense. *heh*

            I also changed all the setters to setAttribute instead of using the dot
            notation in the OP. Think that matters, or is the dot notation supported
            by most browsers? I was thinking it was an IE thing, so I switched it.

            --
            --
            ~kaeli~
            Why do they lock gas station bathrooms? Are they afraid
            someone will clean them?



            Comment

            • Martin Honnen

              #7
              Re: appendChild checkboxes not submitting



              kaeli wrote:

              [color=blue]
              > I also changed all the setters to setAttribute instead of using the dot
              > notation in the OP. Think that matters, or is the dot notation supported
              > by most browsers? I was thinking it was an IE thing, so I switched it.[/color]

              In my view as long as you are scripting HTML pages (text/html content)
              in current browsers then scripting
              element.attribu teName
              is better and more consistently supported than
              element.getAttr ibute('attribut ename')
              element.setAttr ibute('attribut ename', 'value')
              For script properties it is clear that the case matters while with
              setAttribute/getAttribute in HTML the casing shouldn't matter but in IE
              it matters. And there are those HTML attributes which collide with
              keywords in programming languages where then the property name is
              slightly changed (e.g. class in HTML, className in DOM, for in HTML,
              htmlFor in DOM) and for the properties I think browsers are consistent e.g.
              element.classNa me
              works consistently while at least IE makes problems with
              element.setAttr ibute('class', '...')
              and wants
              element.setAttr ibute('classNam e', '...')
              which then doesn't work with other browsers.

              And of course scripting HTML attributes as JavaScript object properties
              is well defined in the W3C DOM HTML module, for example for <input>
              element objects at


              --

              Martin Honnen


              Comment

              • Michael Schmitt

                #8
                Re: appendChild checkboxes not submitting

                kaeli wrote:

                [color=blue]
                >
                > divs are not proper children of a form.[/color]
                Wrong, beside form-elements any block-elements (and script-elements) are allowed.
                http://www.w3.org/TR/html401/interac...html#edef-FORM[color=blue]
                >
                > The following tested successfully in IE.[/color]
                But still the page contains an error.[color=blue]
                > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
                > "http://www.w3.org/TR/REC-html40/loose.dtd">
                > <html>
                > <head>
                > <title> New Document </title>
                > <script type="text/javascript">
                > var cities = new Array();
                > cities[0] = "ne,nw,se,s w";
                >
                > //change the cities quadrent
                > function write_quadrent( city_id){
                > var quadrents = cities[city_id].split(",");
                > var f = document.forms["propertysearch "];
                > var s = f.elements["sub"];
                > for(var i = 0; i < quadrents.lengt h; i++){
                > var newnode_input = document.create Element("INPUT" );
                > newnode_input.s etAttribute("ty pe","checkbox") ;
                > newnode_input.s etAttribute("na me","quadrent") ;
                > newnode_input.s etAttribute("id ","quadrent ");[/color]
                In every cycle of this loop the newly generated element gets the same id.
                This is no valid HTML.
                Better do something like this:
                newnode_input.s etAttribute("id ","quadrent"+i) ;[color=blue]
                > newnode_input.s etAttribute("va lue",quadrents[i]);
                > var newnode_text = document.create TextNode(quadre nts[i]);
                > f.insertBefore( newnode_input,s );
                > f.insertBefore( newnode_text,s) ;
                > }
                > //create new node
                > //var par = document.getEle mentById
                > ("advanced_city _quadrent_holde r");
                > //var checkboxes = document.getEle mentById
                > ("advanced_city _quadrent");
                > //var replaced = par.replaceChil d(newnode,check boxes);
                > }
                >
                > </script>
                > </head>
                >
                > <body>
                >
                > <form id="propertysea rch" name="propertys earch"
                > action="" method="get">
                > <input type="submit" value="submit" name="sub" id="sub">
                > </form>
                > <script type="text/javascript">
                > write_quadrent( 0);
                > </script>
                > </body>
                >[/color]
                cu, Michael

                Comment

                • kaeli

                  #9
                  Re: appendChild checkboxes not submitting

                  In article <40ec1fd3$1@ola f.komtel.net>, mahotrash@yahoo .de enlightened
                  us with...[color=blue]
                  >
                  >
                  > kaeli wrote:
                  >
                  >[color=green]
                  > > I also changed all the setters to setAttribute instead of using the dot
                  > > notation in the OP. Think that matters, or is the dot notation supported
                  > > by most browsers? I was thinking it was an IE thing, so I switched it.[/color]
                  >
                  > In my view as long as you are scripting HTML pages (text/html content)
                  > in current browsers then scripting
                  > element.attribu teName
                  > is better and more consistently supported than
                  > element.getAttr ibute('attribut ename')
                  > element.setAttr ibute('attribut ename', 'value')[/color]

                  Really? Good to know. I work mainly with IE and Netscape for my intranet
                  apps.
                  Do you have documentation on that for other browsers? I only checked IE
                  and netscape/mozilla/gecko.
                  [color=blue]
                  > For script properties it is clear that the case matters while with
                  > setAttribute/getAttribute in HTML the casing shouldn't matter but in IE
                  > it matters.[/color]

                  Yeah, I'm used to that. I always use IE-style casing and so far it's
                  always worked in NN7, too. Not that I do overmuch with setAttribute.
                  [color=blue]
                  >
                  > And of course scripting HTML attributes as JavaScript object properties
                  > is well defined in the W3C DOM HTML module, for example for <input>
                  > element objects at
                  > http://www.w3.org/TR/DOM-Level-2-HTM...tml#ID-6043025
                  >
                  >[/color]

                  I have yet to be able to read that documentation very well. But thanks
                  for the link.
                  I don't suppose anyone has considered translating that document into
                  english? ;)

                  --
                  --
                  ~kaeli~
                  Those who jump off a bridge in Paris... are in Seine.



                  Comment

                  • Keith Page

                    #10
                    Re: appendChild checkboxes not submitting

                    kaeli <tiny_one@NOSPA M.comcast.net> wrote in message news:<MPG.1b55c 70bcee0ee12989f 51@nntp.lucent. com>...[color=blue]
                    > In article <40ec017d$1@ola f.komtel.net>, mahotrash@yahoo .de enlightened
                    > us with...[color=green]
                    > > kaeli wrote:
                    > >[color=darkred]
                    > > > divs are not proper children of a form.[/color]
                    > >
                    > > Why not, the HTML 4 definition is at
                    > > http://www.w3.org/TR/html4/interact/...html#edef-FORM
                    > > and says
                    > > <!ELEMENT FORM - - (%block;|SCRIPT )+ -(FORM) -- interactive form -->
                    > > where %block is defined as
                    > > <!ENTITY % block
                    > > "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
                    > > BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
                    > > which contains DIV so I don't see why divs are not proper children of a
                    > > form.
                    > >
                    > > Note that I haven't looked at the original posters code but a <div>
                    > > inside of a <form> shouldn't be a problem.
                    > >
                    > >[/color]
                    >
                    >
                    > The original code appended form elements to a div inside a div that was
                    > inside the form, not the form itself.
                    > It didn't work that way. It worked when I appended them to the form
                    > directly. I changed a couple other things, though, so maybe it was
                    > really something else that was the problem.
                    >
                    > Check out the original post and compare to mine that worked. Do you see
                    > what else might have been the problem?
                    >
                    >
                    > --[/color]

                    This hasn't been tested in ie, the organization is only about 20 users
                    and is firefox throughout, so ie doesn't matter. I guess i should have
                    mentioned that.

                    Comment

                    • kaeli

                      #11
                      Re: appendChild checkboxes not submitting

                      In article <ea527ff0.04070 71141.12f2e41e@ posting.google. com>,
                      pagekd@Telus.ne t enlightened us with...[color=blue]
                      >
                      > This hasn't been tested in ie, the organization is only about 20 users
                      > and is firefox throughout, so ie doesn't matter. I guess i should have
                      > mentioned that.
                      >[/color]

                      Going closer to your original code and incorporating suggestions by
                      others...
                      This worked fine in NN7. AFAIK, that should be okay for Firefox, too.
                      Seems it was just the script being inside the div that gets replaced.
                      Watch for word-wrap.

                      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
                      "http://www.w3.org/TR/REC-html40/loose.dtd">
                      <html>
                      <head>
                      <title> New Document </title>
                      <script type="text/javascript">
                      var cities = new Array();

                      cities[0] = "ne,nw,se,s w";
                      //change the cities quadrent
                      function write_quadrent( city_id){
                      var quadrents = cities[city_id].split(",");
                      var newnode = document.create Element("div");
                      newnode.id = "advanced_city_ quadrent";
                      for(var i = 0; i < quadrents.lengt h; i++){
                      var newnode_input = document.create Element("INPUT" );
                      newnode_input.t ype = "checkbox";
                      newnode_input.n ame = "quadrent"+ i;
                      newnode_input.i d = "quadrent"+ i;
                      newnode_input.v alue = quadrents[i];
                      var newnode_text = document.create TextNode(quadre nts[i]);
                      newnode.appendC hild(newnode_in put);
                      newnode.appendC hild(newnode_te xt);
                      }
                      //create new node
                      var par = document.getEle mentById
                      ("advanced_city _quadrent_holde r");
                      var checkboxes = document.getEle mentById
                      ("advanced_city _quadrent");
                      var replaced = par.replaceChil d(newnode,check boxes);
                      }

                      </script>
                      </head>

                      <body>

                      <form id="propertysea rch" name="propertys earch"
                      action="" method="get">
                      <div id="advanced_ci ty_quadrent_hol der">
                      <div id="advanced_ci ty_quadrent">
                      </div>
                      </div>

                      <input type="submit" value="submit" name="sub" id="sub">
                      </form>
                      <script type="text/javascript">
                      write_quadrent( 0);
                      </script>
                      </body>
                      </html>


                      --
                      --
                      ~kaeli~
                      If God dropped acid, would he see people?



                      Comment

                      • kaeli

                        #12
                        Re: appendChild checkboxes not submitting

                        In article <MPG.1b5614c21a f95c73989f57@nn tp.lucent.com>,
                        tiny_one@NOSPAM .comcast.net enlightened us with...
                        [color=blue]
                        > This worked fine in NN7. AFAIK, that should be okay for Firefox, too.
                        > Seems it was just the script being inside the div that gets replaced.[/color]

                        And I changed to unique names and IDs.


                        --
                        --
                        ~kaeli~
                        If God dropped acid, would he see people?



                        Comment

                        • Thomas 'PointedEars' Lahn

                          #13
                          Re: appendChild checkboxes not submitting

                          Martin Honnen wrote:[color=blue]
                          > kaeli wrote:[color=green]
                          >> divs are not proper children of a form.[/color]
                          >
                          > Why not, the HTML 4 definition is at
                          > http://www.w3.org/TR/html4/interact/...html#edef-FORM
                          > and says
                          > <!ELEMENT FORM - - (%block;|SCRIPT )+ -(FORM) -- interactive form -->
                          > where %block is defined as
                          > <!ENTITY % block
                          > "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
                          > BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
                          > which contains DIV so I don't see why divs are not proper children of a
                          > form.[/color]

                          Exactly. And with HTML 4.01 Strict, "div" is a reasonable element and
                          one of the block elements that *must* be the direct descendant of the
                          "form" element.


                          PointedEars

                          Comment

                          Working...