Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form field validation and defaulting select box

    I have a table that can add rows dynamically by clicking the add button. Rows can be deleted by checking the row and clicking the delete button.
    I need to do some validation to these records. Every record contains a dropdown called Product. Based on the product selected, I want to
    enable/disable the Location field and also default a value in the Shipping field for that particular record

    EG;

    Product Location Shipping
    _____________________________

    TV Disable Default: Domestic
    DVD Enable Default: Global

    How can I do this?

    Here is my code:

    Thanks

    <html>
    <head>
    <title>Untitled</title>
    <style>
    .borderTable {
    border: 1 solid;
    border-top-color: #CCCCCC;
    border-left-color: #CCCCCC;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    }
    </style>
    <script language="JavaScript" type="text/javascript">
    var ie = document.all;
    var dom = document.getElementById;
    var tableLength;
    var z;

    var rowsArr = new Array()// **** Added to collect number of rows to delete
    var ctr = 0;// **** Added to count number of rows to delete

    function getTableLength(myTable){
    if(dom) tableLength = document.getElementById(myTable).getElementsByTagName("TR").length;
    return tableLength;
    }

    function addRow(id){
    if(dom){
    //numrows = document.all.myTable.rows.length;
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];

    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.innerHTML = "<input type=checkbox align=center name='"+name+"' id='"+name+"' onclick=\"setRow(this);\">";
    var td2 = document.createElement("TD")
    td2.innerHTML = "<select size=1 name='prd' id='prd'><option>Select a product<option value='TV'>TV<option value='DVD'>DVD<option value='SPEAKERS'>SPEAKERS<option value='COMPUTERS'>COMPUTERS<option value='PRINTERS'>PRINTERS<option value='COPIERS'>COPIERS<option value='SCANNERS'>SCANNERS<option value='DIGITAL CAMERAS'>DIGITAL CAMERAS<option value='ROUTERS'>ROUTERS<option value='COMP PERIPHARALS'>COMP PERIPHARALS</select>";
    var td3 = document.createElement("TD")
    td3.innerHTML = "<input type=text align=center size=15 name='idLoc' id='idLoc'>";
    var td4 = document.createElement("TD")
    td4.innerHTML = "<select size=1 name='Loc' id='Loc'><option selected>Select a Location<option value=1>North East<option value=2>Soth America<option value=3>Canada</select>";
    var td5 = document.createElement("TD")
    td5.innerHTML = "<select size=1 name='"+name+"' id='"+name+"'><option selected>Select a Shipping<option value=1>Domestic<option value=2>Global</select>";
    var td6 = document.createElement("TD")
    td6.innerHTML = " ";
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);
    row.appendChild(td6);
    tbody.appendChild(row);

    } else { return; }
    }

    function getRowNum(){
    if(dom)
    tdCtr = 0;
    var z = document.getElementById('myTable').getElementsByTagName("TR");
    var w = (z[z.length-1]);
    tdCtr-=(w.getElementsByTagName("td").length);
    w.removeNode(true)
    return tdCtr;
    }

    function delRow(myTable){
    for(var x=0;x<rowsArr.length;x++){
    var row = rowsArr[x];
    row.removeNode(true);

    }
    myTable.innerHTML = myTable.innerHTML;
    }

    /**** Function added to add rows to be deleted *****/
    /*
    @param obj checkbox field determining which row to be deleted
    */
    function setRow(obj){
    rowsArr[ctr++] = obj.parentNode.parentNode;
    }
    </script>

    </head>
    <body >
    <br>
    <table class="tblBorder4" height="96%" width="100%">
    <tr>
    <td valign="top">
    <form name=test>
    <br>
    <table width="600" align="center" bgcolor="#efefef" class="borderTable" cellspacing="1"
    cellpadding="1" id="myTable">
    <tbody>
    <tr class="sub-title" >
    <td align="center">
    <input type="button" value="Delete" onclick="delRow('myTable')">
    </td>
    <td >Product</td>
    <td >ID Loc</td>
    <td >Location</td>
    <td>Shipping</td>
    <td width="50" align="left">
    <input type="button" value="Add" onclick="addRow('myTable')">

    </td>
    </tr>
    </tbody>
    </table>
    <br>
    <br>
    <div align="center"><input type="submit" value="submit"></div>
    </form>
    </td>
    </tr>
    </table>
    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You can't have multiple elements with the same id unlike with the name attribute.

    td3.innerHTML = "<input type=text align=center size=15 name='idLoc' id='idLoc'>";

    You should name your fields with a convention like prd1, prd2, ... and loc1, loc2, ... and shp1, shp2, ... so that you can easily associate which fields belong to a product.

    Let's say you have a running counter called "num", the product combobox would look like this:
    Code:
    var num=0; //running counter
    function addRow(id){
    if(dom){
       num++;
       ...
       td2.innerHTML = '<select size="1" name="prd'+num+'" onchange="setFields(this, '+num+')">...</select>';
       //do the same thing with location and shipping fields
       ...
    and the setFields function:
    Code:
    function setFields(objSel, suffix){
       var oLoc = objSel.form.elements['loc'+suffix];
       var oShip = objSel.form.elements['shp'+suffix]; 
       switch (objSel.options[objSel.selectedIndex].value){
           case "TV":
               oLoc.disabled = true;
               oShip.selectedIndex = 0;
               break;
           case "DVD":
               //...
       } 
    }

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Glenn,

    Thanks for your suggestion. I got it to work!


  •  

    Posting Permissions

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