SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [RESOLVED] Problem with Cloning Nodes with Inputs

    In the code below, I have three problems and a question.

    1. When I remove a selection from the listbox, it clears all values. I want to
    keep the values for the ones that are still selected.

    2. Tabbing through the inputs does not work. How do I need to handle this?

    3. I also need it to work for two selects. It was originally written for one
    and I think I've butchered it.

    4. How will the entered data be sent in the postdata? I will be using PHP and need to know so
    I can prepare to iterate the values for input into a database.

    Code:
    <html>
      <head>
        <script>
          var Vname               = new Array();            
          var Hname               = new Array();            
          function clonePitchers(HorV)
          {
            if (HorV = 'V') {
              var sel1             = document.getElementById("sel1V");
              var divPV            = document.getElementById("divPV");
              var divPitchersV     = document.getElementById("divPitchersV");
              var cloneCount       = divPitchersV.childNodes.length;
              var selectedCountV   = 0;
            } else {
              var sel1             = document.getElementById("sel1H");
              var sel1             = document.getElementById("sel1");
              var divPV            = document.getElementById("divPH");
              var divPitchersH     = document.getElementById("divPitchersH");
              var cloneCount       = divPitchersH.childNodes.length;
              var selectedCountH   = 0;
            }
            
            var clone              = new Array();
            
            for(var currentOptionIndex=0; currentOptionIndex<sel1.options.length;currentOptionIndex++)
            {
              if(sel1.options[currentOptionIndex].selected)
              {
                if (HorV = 'V') 
                {
                  document.getElementById("Vpitcher").innerHTML = "";
                  Vname[currentOptionIndex] = sel1.options(currentOptionIndex).text;          
                  selectedCountV++;        
                } else {
                  document.getElementById("Hpitcher").innerHTML = "";
                  Hname[currentOptionIndex] = sel1.options(currentOptionIndex).text;          
                  selectedCountH++;    
                }    
              } else {
                if (HorV = 'V') 
                {
                  Vname[currentOptionIndex] = "";
                } else {
                  Hname[currentOptionIndex] = "";
                }
              }
            }
    
            // This removes ALL nodes. I just want to remove the ones
            // that don't have a value in it's corresponding pitchcount
            // field. Is that possible?        
            for(var i=cloneCount;i>0;i--) {
              if (HorV = 'V') {
                divPitchersV.removeChild(divPitchersV.lastChild);
              } else {
                divPitchersH.removeChild(divPitchersH.lastChild);
              }
            }
          
            if (HorV = 'V') {
              for(var i=0;i<6;i++)
              {
                if (name[i] != "")
                {      
                  document.getElementById("Vpitcher").innerHTML = Vname[i] + "<br/>";
                  document.getElementById("Vpitchcount").setAttribute("id", "Vpitchcount" + i);
                  clone[i] = divPV.cloneNode(true);
                  clone[i].removeAttribute("id");
                  if (i < 5)
                  {
                    clone[i].style.display="block";
                    divPitchersV.appendChild(clone[i]);
                  }
                }
              }
            } else {
              for(var i=0;i<6;i++)
              {
                if (name[i] != "")
                {      
                  document.getElementById("Hpitcher").innerHTML = Hname[i] + "<br/>";
                  document.getElementById("Hpitchcount").setAttribute("id", "Hpitchcount" + i);
                  clone[i] = divPV.cloneNode(true);
                  clone[i].removeAttribute("id");
                  if (i < 5)
                  {
                    clone[i].style.display="block";
                    divPitchersH.appendChild(clone[i]);
                  }
                }
              }
              }
          }
          
          
          function Submit()                    
          {
            var cellvalue;
            var element;
            for(var i=0;i<10;i++)
            {      
              if (Vname[i] != "")
              {
                element = "Vpitchcount" + i;
                cellvalue = document.getElementById(element).getAttribute("value");
                alert(document.getElementById(element).getAttribute("id") + " = " + cellvalue);
              }                  
              if (Hname[i] != "")
              {
                element = "Hpitchcount" + i;
                cellvalue = document.getElementById(element).getAttribute("value");
                alert(document.getElementById(element).getAttribute("id") + " = " + cellvalue);
              }                  
            }
          }
        </script>
      </head>
      <body>
        Visitors's Pitchers:<br />
        <!-- This dropdown will be built from the database of Players based on the visitor's TeamID that
             is stored in the game info. When you enter a game to report, the script eill populate the
             combo for Visitor and Home based on the visitorid and homeid field from the games
             table for the game you want to edit.
        -->
        <select id="sel1V" multiple="true" onchange="clonePitchers('V')">
          <option value="0">34 - Nolan Ryan</option>
          <option value="1">21 - Roger Clemens</option>
          <option value="2">22 - Randy Johnson</option>
          <option value="3">42 - Bob Gibson</option>
          <option value="4"> 2 - David Wells</option>
        </select>
        
        <table height="20px" width="60%" id="divPV" style="display:none">
          <tr height="20px">
            <td width="33%" valign="bottom">Pitcher: <span id="Vpitcher">***</span></td>
            <td width="33%"><span><input type="text" name="Vpitchcount" id="Vpitchcount" size="3">&nbsp;</span></td>
          </tr>
        </table>
        <br />
        Home Team's Pitchers:<br />
        <!-- This dropdown will be built from the database of Players based on the visitor's TeamID that
             is stored in the game info. When you enter a game to report, the script eill populate the
             combo for Visitor and Home based on the visitorid and homeid field from the games
             table for the game you want to edit.
        -->
        <select id="sel1H" multiple="true" onchange="clonePitchers('H')">
          <option value="0">34 - Nolan Ryan</option>
          <option value="1">21 - Roger Clemens</option>
          <option value="2">22 - Randy Johnson</option>
          <option value="3">42 - Bob Gibson</option>
          <option value="4"> 2 - David Wells</option>
        </select>
        
        <table height="20px" width="60%" id="divPH" style="display:none">
          <tr height="20px">
            <td width="33%" valign="bottom">Pitcher: <span id="Hpitcher">***</span></td>
            <td width="33%"><span><input type="text" name="Hpitchcount" id="Hpitchcount" size="3">&nbsp;</span></td>
          </tr>
        </table>
        <form name="main" id="main" action="inputtest.html" method="get">
          <input type="hidden" name="clonecount">
          <span id="divPitchersV"></span>
          <span id="divPitchersH"></span>
          <input type="button" value="Submit" onclick="Submit();">
        </form>  
      </body>
    </html>
    Last edited by MrBaseball34; Nov 15, 2007 at 11:08.
    MrBaseball34
    Hook'Em Horns!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I started off fixing one thing here and another there and ended up rewriting the whole thing. The first three problems are solved and as for the fourth one, the problem was that you had set the "method" attribute to "get" in the FORM. Now it's post and you should be able to access the stuff sent to PHP via the $_POST array.

    I'm not entirely sure what the submit() function is meant to do. Is the user supposed to put a number inside the text box that appears next to a pitcher's name? Then submit() adds them all up and puts the value in the hidden field? It would be better to not do that and simply add them all up on the server side, since all the all the pitcher text fields will be submitted as well (I moved everything into the form, as it should be).
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
      <head>
        <script type="text/javascript">
          var pitchers = {}, pitchertemplate = document.createElement('div');
          function init() {
            var sels = getElementsByClass('pitchersselect');
            for (var i = 0; i < sels.length; i++) {
              sels[i].onchange = clonePitchers;
              pitchers[sels[i].id] = {};
            }
            pitchertemplate.appendChild(document.createElement('label'));
            var inp = pitchertemplate.appendChild(document.createElement('input'));
            inp.type = 'text';
            inp.size = '3';
          }
          function clonePitchers() {
            var team = this.id;
            var opts = this.getElementsByTagName('option');
            for(var ind = 0; ind < opts.length; ind++) {
              var opt = opts[ind];
              var optval = opt.value
              if(opt.selected && pitchers[team][optval] !== true) {
                pitchers[team][optval] = true;
                var p = pitchertemplate.cloneNode(true);
                p.id = team + optval;
                p.firstChild.nextSibling.name = team + optval;
                p.firstChild.setAttribute('for', team + optval);
                p.firstChild.appendChild(document.createTextNode('Pitcher: ' + opt.firstChild.nodeValue));
                this.parentNode.appendChild(p);
              }
              else if (!opt.selected && pitchers[team][optval] === true) {
                this.parentNode.removeChild(document.getElementById(this.id + optval));
                pitchers[this.id][optval] = false;
              }
            }
          }
          
          function submit(e) {
            if (!e) window.event.returnValue = false;
            else e.preventDefault;
            var cellvalue;
            var element;
            for(var i=0;i<10;i++)
            {      
              if (Vname[i] != "")
              {
                element = "Vpitchcount" + i;
                cellvalue = document.getElementById(element).getAttribute("value");
                alert(document.getElementById(element).getAttribute("id") + " = " + cellvalue);
              }                  
              if (Hname[i] != "")
              {
                element = "Hpitchcount" + i;
                cellvalue = document.getElementById(element).getAttribute("value");
                alert(document.getElementById(element).getAttribute("id") + " = " + cellvalue);
              }                  
            }
            document.getElementById('main').submit();
          }
          
    function getElementsByClass(c) {
        var children = document.getElementsByTagName('*');
        var els = [];
        for (var i = 0, j = children.length; i < j; i++) if (hasClass(children[i], c)) els.push(children[i]);
        return els;
    }
    function hasClass(el, c) {
    if (!el || !el.className.length) return false;
    var bits = el.className.split(' '), has = false;
    for (var j = 0; j < bits.length; j++) if (bits[j] === c) has = true;
    return has;
    }
    function addClass(el, c) {
    if (!el || hasClass(el, c) === true) return;
    if (el.className.length) el.className += ' '+c;
    else el.className = c;
    }
    function removeClass(el, c) {
      if (!el || !el.className.length || !hasClass(el, c)) return;
      var bits = el.className.split(' ');
      var newClass = '';
      for (var i=0; i < bits.length; i++) if (bits[i] !== c) newClass += bits[i]+' ';
      el.className = newClass;
    }
    
    window.onload = init;
        </script>
      </head>
      <body>
        <form id="pitchers" action="inputtest.html" method="post">
          <fieldset>
            <legend>Visitors's Pitchers</legend>:
            <select id="visitors" class="pitchersselect" multiple="true">
              <option value="0">34 - Nolan Ryan</option>
              <option value="1">21 - Roger Clemens</option>
              <option value="2">22 - Randy Johnson</option>
              <option value="3">42 - Bob Gibson</option>
              <option value="4"> 2 - David Wells</option>
            </select>
          </fieldset>
          <fieldset>
            <legend>Home Team's Pitchers:</legend>
            <select id="home" class="pitchersselect" multiple="true">
              <option value="0">34 - Nolan Ryan</option>
              <option value="1">21 - Roger Clemens</option>
              <option value="2">22 - Randy Johnson</option>
              <option value="3">42 - Bob Gibson</option>
              <option value="4"> 2 - David Wells</option>
            </select>
          </fieldset>
          <div><input type="submit" value="Submit" id="submit"></div>
        </form>  
      </body>
    </html>

  3. #3
    SitePoint Addict MrBaseball34's Avatar
    Join Date
    Sep 2002
    Location
    Round Rock, Texas
    Posts
    277
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the effort.
    MrBaseball34
    Hook'Em Horns!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •