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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question my children need help, Java code abbreviations.

    Can any one help me in figuring out how to change onclick="zxcAddInput('tst')

    The head is
    function zxcAddInput(zxcid,zxccbid)

    the html that I want to replace the ('tst') with is

    <table style="text-align: left; width: 100px;" border="2"
    cellpadding="2" cellspacing="2">
    <tbody>
    <tr>
    <td
    style="vertical-align: middle; white-space: nowrap; text-align: center;">
    <br>
    </td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle">
    <table style="text-align: left; width: 100px;"
    border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30"
    name="test1" value="test1"></td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30"
    name="test2" value="test2"></td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30"
    name="test3" value="test3"></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr>
    </tr>
    </tbody>
    </table>
    </body>
    </html>



    -----------------------------
    The whole form script is

    <html>
    <head>
    <script language="JavaScript" type="text/javascript">
    <!--
    function zxcAddInput(zxcid,zxccbid){
    var zxcp=document.getElementById(zxcid);
    var zxce=zxcES('P',{},zxcp)
    var zxcip=zxcES('INPUT',{});
    zxcip.type='text';
    zxcip.name='MyName';
    zxcES(zxcip,{},zxce);
    }
    function zxcED(zxccb,zxcnme){
    var zxcels=zxccb.form.elements;
    for (var zxc0=0;zxc0<zxcels.length;zxc0++){
    if (zxcels[zxc0].name&&zxcels[zxc0].name=='MyName'){
    }
    }
    }
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
    if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
    for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    if (zxcp){ zxcp.appendChild(zxcele); }
    if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
    return zxcele;
    }
    //-->
    </script>
    <title></title>
    </head>
    <body>
    <form>
    <div id="tst"><input name="Add" value="Add"
    onclick="zxcAddInput('tst');zxcAddInput('tst');zxcAddInput('tst');"
    type="button"></div>
    </form>

    I need the 3 lines of text in the form but would rather have them in a table like above.
    -ol

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    That script seems to look like that of Vic. Anyway try this:
    Code:
    <style type="text/css">
    .mytable{text-align: left; width: 100px;border:2px solid #ccc;padding:2px;}
    </style>
    <script type="text/javascript">
    <!--
    var i=1;
    function zxcAddInput(zxcid,zxccbid){
    var zxcp=document.getElementById(zxcid);
    var zxce=zxcES('table',{},zxcp);
    zxce.className='mytable';
    var zxcip=zxcES('INPUT',{});
    zxcip.type='text';
    zxcip.name='MyName';
    zxcip.setAttribute('value','test'+i);
    zxcES(zxcip,{},zxce);
    i++;
    }
    function zxcED(zxccb,zxcnme){
    var zxcels=zxccb.form.elements;
    for (var zxc0=0;zxc0<zxcels.length;zxc0++){
    if (zxcels[zxc0].name&&zxcels[zxc0].name=='MyName'){
    }
    }
    }
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
    if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
    for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
    if (zxcp){ zxcp.appendChild(zxcele); }
    if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
    return zxcele;
    }
    //-->
    </script>
    <form>
    <div id="tst"><input name="Add" value="Add"
    onclick="zxcAddInput('tst');zxcAddInput('tst');zxcAddInput('tst');"
    type="button"></div>
    </form>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    olcentum (09-14-2008)

  • #3
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you Rangana, That is perfect!

  • #4
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Is there a way to put the numbers in a separate cell, and have multiple text fields in the table so the group of 3 fields would count as 1 and the next group would count as 2 and so on like I have below?
    -ol


    <html>
    <head>
    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1">
    <title></title>
    </head>
    <body>
    <table style="text-align: left; width: 100px;" border="2"
    cellpadding="2" cellspacing="2">
    <tbody>
    <tr>
    <td
    style="vertical-align: middle; white-space: nowrap; text-align: center;">test1</td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle">
    <table style="text-align: left; width: 100px;"
    border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30" name="a1"></td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30" name="a2"></td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30" name="a3"></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr>
    </tr>
    </tbody>
    </table>
    <br>
    <table style="text-align: left; width: 100px;" border="2"
    cellpadding="2" cellspacing="2">
    <tbody>
    <tr>
    <td
    style="vertical-align: middle; white-space: nowrap; text-align: center;">test2</td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle">
    <table style="text-align: left; width: 100px;"
    border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30" name="b1"></td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30" name="b2"></td>
    </tr>
    <tr>
    <td align="center" nowrap="nowrap"
    valign="middle"><input maxlength="30" name="b3"></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr>
    </tr>
    </tbody>
    </table>
    <br>
    </body>
    </html>

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Try this script instead:
    Code:
    <style type="text/css">
    .mytable{text-align:center;width:100px;border:2px solid #555;padding:2px;margin-top:2px;}
    </style>
    <script type="text/javascript">
    var i=1;
    function add(targ,num){
    // Add function accepts two parameters. The target element and the number of textbox within the table you wish to create
    // targ parameter holds the target element. num holds the total number of textbox you wish to create
    var table=document.createElement('table'), // Create table
    tr=document.createElement('tr'), // Create tr
    td=document.createElement('td'); // Create td
    table.appendChild(tr.appendChild(td.appendChild(document.createTextNode('test'+i))));
    	for(var k=0;k<num;k++)
    	{
    		tr=document.createElement('tr'), // Create tr element
    		td=document.createElement('td') , // Create td element
    		inp=document.createElement('input') ; // Create input element
    		table.className='mytable';
    		if(typeof num!='number'){
    		alert('Second parameter must be a number.');return false;}
    		td.appendChild(inp);
    		tr.appendChild(td);
    		table.appendChild(tr);
    		document.getElementById(targ).appendChild(table);
    	}i++;
    }
    </script>
    <div id="tst"><input type="button" value="Add" onclick="add('tst',3)"></div>
    See comments. Hope it explains the scripts flow.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    olcentum (09-16-2008)

  • #6
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    8
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Genius! So there was no way to get where you got me with my script.
    I was messing with that for days, I think I should go back to 3schools
    Thank you for all your help.
    I bow the the KingCoder
    -ol


  •  

    Posting Permissions

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