A nested dynamic checkbox inside my dynamic form.

Discussion in 'Javascript' started by pizzy, Apr 5, 2005.

  1. pizzy

    pizzy Guest

    I am having a problem with the last results. I can't seem to be able to
    get the input2A and input3A to appear. I don't seem to have a problem
    with the show and hide after a number is entered and submitted. If
    anyone can answer my problem I will be greatly appreciated with a
    prize. I actually have submitted it more than once and I haven't had
    anyone been able to answer it yet.


    ________
    enter # of input0A |_______|

    [submit] [reset]


    ------------------------------­­-------------------------
    NOTE:THE RESULTS BELOW IS AFTER 2 IS ENTERED INTO THE input ABOVE


    ________
    input1A |_______| [] "check here to add input2A and input3A"
    ________
    input1B |_______| [] "check here to add input2B and input3B"


    [submit] [reset]


    ------------------------------­­-------------------------
    NOTE: THE RESULTS BELOW WHAT HAPPENS WHEN THE FIRST CHECKBOX ABOVE IS
    CLICKED
    ________ ________ ________
    input1A |_______| [] input2A |_______| input3A |_______|
    ________
    input1B |_______| [] "check here to add input2B and input3B"


    [submit] [reset]
     
    pizzy, Apr 5, 2005
    #1
    1. Advertising

  2. pizzy

    kaeli Guest

    kaeli, Apr 6, 2005
    #2
    1. Advertising

  3. pizzy

    pizzy Guest

    I don't have any that works.
     
    pizzy, Apr 7, 2005
    #3
  4. pizzy

    Fred Oz Guest

    pizzy wrote:
    > I don't have any that works.
    >


    Now you do. Put in any value you like, it will keep adding 'em.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title> Add inputs </title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1">
    </head>
    <body>

    <style type="text/css">
    table { /* border-collapse: collapse; */ border: 1px solid blue;
    padding: 1px 1 1 1;}
    ..tip {font-size: 90%; color: #666633;}
    </style>
    <script type="text/javascript">

    // Create an array of the letters of the alphabet
    var alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

    // Add first set of inputs and checkbox
    function addInputsA(f,t) {
    // Clean and validate input
    var n = t.value.replace(/\s+/g,'');
    if (/\D+/.test(n) || 1 > n || '' == n) {
    alert('Please enter an integer greater than 0');
    if (t.focus) t.focus();
    return;
    }

    // Delete the body containing the first input
    delBody(t);

    // Setup variables
    var bA = document.getElementById('bodyA');
    var i=0, oTr, oTd, oChk, txt, let;

    // Add the inputs and checkboxes
    do {
    oTr = document.createElement('tr');
    let = numToAlpha(i);
    txt = 'Input-1-' + let;
    addToTr(oTr,document.createTextNode(txt));

    oInp = document.createElement('input');
    oInp.name = txt;
    addToTr(oTr,oInp);

    oChk = document.createElement('input');
    oChk.type = 'checkbox'
    oChk.name = 'Check-1-' + let;
    oChk.onclick = function() {addInputsB(this)};
    addToTr(oTr,oChk);

    addToTr(oTr,document.createTextNode(chkTxt(let)));

    bA.appendChild(oTr);

    } while (++i < n)
    }

    // Add second set of inputs
    function addInputsB(y){
    var x = y, oInp, txt;
    var nBit = x.name.split('-');
    // Go up to parent td
    while (!/td/i.test(x.nodeName)) {
    x = x.parentNode;
    }
    // Go to next td
    x = x.nextSibling;
    // Remove its content
    delKids(x);

    // If checkbox checked, put inputs into it
    if (y.checked) {
    for (var j=2; j<4; j++) {
    txt = 'Input-' + j + '-' + nBit[2];
    x.appendChild(document.createTextNode(txt));
    oInp = document.createElement('input');
    oInp.name = txt;
    x.appendChild(oInp);
    }
    // Otherwise, put some text into it
    } else {
    x.appendChild(document.createTextNode(chkTxt(nBit[2])));
    }
    }

    // Returns a string with value of 'a' appended
    function chkTxt(a){
    return 'Click to add inputs 2 & 3 ' + a;
    }

    // Deletes a tbody given any element inside the tbody to delete
    function delBody(t) {
    while ( !/tbody/i.test(t.nodeName)) {t = t.parentNode;}
    t.parentNode.removeChild(t);
    }

    // Removes all child nodes of given element
    function delKids(n) {
    while (n.firstChild) {n.removeChild(n.firstChild)}
    }

    // Given a tr, append b to new cell, append cell to tr
    function addToTr(a,b){
    var oTd = document.createElement('td');
    oTd.appendChild(b);
    a.appendChild(oTd);
    }

    function numToAlpha(n){
    var t='';
    while (n > 0) {
    t = alpha[n%26] + t;
    n = Math.floor(n/26-1);
    }
    return (0 > n)? t : alpha[n] + t;
    }

    </script>

    <form action="">
    <table border="1">
    <tbody>
    <tr>
    <td colspan="2">Enter number of inputs:
    <input type="text" size="5" name="numInputs">
    <input type="button" value="Add inputs" onclick="
    addInputsA(this.form,this.form.numInputs);
    ">
    <br>
    <span class="tip">(Integer greater than 1)</span>
    </td>
    </tr>
    </tbody>
    <tbody id="bodyA">
    </tbody>
    <tbody>
    <tr>
    <td colspan="4">
    <input type="reset">
    <input type="submit">
    </td>
    </tr>
    </tbody>
    </table>
    </form>

    <!-- test harness for the number-to-alpha-index thing -->
    <input type="text" size="10" onblur="
    var o = document.getElementById('xx');
    var n = +this.value, t='', m;
    while (n > 0) {
    t = alpha[n%26] + t;
    n = Math.floor(n/26-1);
    }
    (0 > n)? t=t : t = alpha[n] + t;
    o.innerHTML = t;

    ">
    <span id="xx"></span>

    </body>
    </html>
     
    Fred Oz, Apr 7, 2005
    #4
  5. pizzy

    pizzy Guest

    Thanks man, check your email I sent a personal message.
     
    pizzy, Apr 7, 2005
    #5
  6. pizzy

    pizzy Guest

    Fred,

    Can you put the following into laymens terms?

    while (!/td/i.test(x.nodeName)) {
    x = x.parentNode;
    }
     
    pizzy, Apr 12, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andy Eshtry
    Replies:
    0
    Views:
    628
    Andy Eshtry
    Mar 1, 2004
  2. Andy Eshtry
    Replies:
    0
    Views:
    329
    Andy Eshtry
    Mar 1, 2004
  3. Andy Eshtry
    Replies:
    0
    Views:
    173
    Andy Eshtry
    Mar 1, 2004
  4. pizzy
    Replies:
    4
    Views:
    142
    pizzy
    Mar 18, 2005
  5. pizzy
    Replies:
    0
    Views:
    167
    pizzy
    Mar 23, 2005
Loading...

Share This Page