How to dynamically get values from one text box into another textbox in dynamic table ?

Question

0.00/5 (No votes)

See more:

Below is my code. here i am creating a dynamic table using java script.it works fine. the problem is when i try to get value from one textbox into anohter textbox it does not working.

i want to get data from one text box to another textbox dynamically.

What I have tried:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="example.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:100%;
height:99px;
}
.mytable td{

border:1px solid #000000;
height:50px;
}
</style>

<script>
function Createtbl(){
var count = document.getElementById("txtbox").value;
var table = document.createElement('table');
table.className = "mytable";
for (var i = 1; i <= count; i++){
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    td1.setAttribute('colSpan', '5');
    var text1 = document.createTextNode('Header');
    td1.appendChild(text1);
    tr.appendChild(td1);
    table.appendChild(tr);

    var tr1 = document.createElement('tr');
    var td11 = document.createElement('td');
    var td22 = document.createElement('td');
    td22.setAttribute('colSpan', '3');
    var td33 = document.createElement('td');
    var text11 = document.createTextNode('Name');
    var text22 = document.createTextNode('Age');
    var text33 = document.createTextNode('Sex');
    td11.appendChild(text11);
    td22.appendChild(text22);
    td33.appendChild(text33);
    tr1.appendChild(td11);
    tr1.appendChild(td22);
    tr1.appendChild(td33);
    table.appendChild(tr1);

    var tr2 = document.createElement('tr');
    var td111 = document.createElement('td');
    td111.setAttribute('rowSpan', '3');
    var td222 = document.createElement('td');
    var td333 = document.createElement('td');
    var td444 = document.createElement('td');
    var td555 = document.createElement('td');
    td555.setAttribute('rowSpan', '3');
    
    
    
               
        
    var text111 = document.createElement("input");
    text111.id = "txtbox-1";
    text111.className = "tbox1";
    var text222 = document.createTextNode('');                
    var text333 = document.createTextNode('');
    var text444 = document.createTextNode('');
    var text555 = document.createTextNode('');

    td111.appendChild(text111);
    td222.appendChild(text222);
    td333.appendChild(text333);
    td444.appendChild(text444);
    td555.appendChild(text555);
    tr2.appendChild(td111);
    tr2.appendChild(td222);
    tr2.appendChild(td333);
    tr2.appendChild(td444);
    tr2.appendChild(td555);
    table.appendChild(tr2);



    var tr3 = document.createElement('tr');
    var td1111 = document.createElement('td');
    var td2222 = document.createElement('td');
    var td3333 = document.createElement('td');
    var text1111 = document.createTextNode('');
    var text2222 = document.createTextNode('');
    var text3333 = document.createTextNode('');
    td1111.appendChild(text1111);
    td2222.appendChild(text2222);
    td3333.appendChild(text3333);
    tr3.appendChild(td1111);
    tr3.appendChild(td2222);
    tr3.appendChild(td3333);
    table.appendChild(tr3);



    var tr4 = document.createElement('tr');
    var td115 = document.createElement('td');
    var td225 = document.createElement('td');
    var td335 = document.createElement('td');
    var text115 = document.createTextNode('');
    var text225 = document.createTextNode('');
    var text335 = document.createTextNode('');
    td115.appendChild(text115);
    td225.appendChild(text225);
    td335.appendChild(text335);
    tr4.appendChild(td115);
    tr4.appendChild(td225);
    tr4.appendChild(td335);
    table.appendChild(tr4);



    var tr5 = document.createElement('tr');
    var td116 = document.createElement('td');
    var td226 = document.createElement('td');
    td226.setAttribute('colSpan', '4');
    var text116 = document.createTextNode('');
    var text226 = document.createTextNode('');
    td116.appendChild(text116);
    td226.appendChild(text226);
    tr5.appendChild(td116);
    tr5.appendChild(td226);
    table.appendChild(tr5);

    var tr6 = document.createElement('tr');
    var td117 = document.createElement('td');
    td117.setAttribute('colSpan', '5');
    var text117 = document.createTextNode('Footer');
    td117.appendChild(text117);
    tr6.appendChild(td117);
    table.appendChild(tr6);


    var tr7 = document.createElement('tr');
    var td118 = document.createElement('td');
    td118.setAttribute('colSpan', '5');
    var text118 = document.createElement("button");
    text118.innerHTML = "Get Data";
   // text118.onclick = getdata();
    td118.appendChild(text118);
    tr7.appendChild(td118);
    table.appendChild(tr7);


    var tr8 = document.createElement('tr');
    var td119 = document.createElement('td');
    td119.setAttribute('colSpan', '5');
    var text119 = document.createElement("input");
    text119.id = "txtbox-2";
    text119.className = "tbox2";
    td119.appendChild(text119);
    tr8.appendChild(td119);
    table.appendChild(tr8);


}
document.body.appendChild(table);
};


</script>
<script>
    function getdata() {
        for (j=0;j<= i ;j++)
        {
          document.getElementById(id).getElementsByClassName("tbox2")[0].value = document.getElementById(id).getElementsByClassName("tbox1")[0].value;
 
        }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

 <input id="txtbox" type="text"/>
 <input id="Button1" type="button" value="COPY"  onclick="Createtbl()"/>

</div>
</form>
</body>
</html>

Posted 12-Jul-17 0:10am

Member 13296172

Updated 12-Jul-17 4:01am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

deepankarbhatnagar · Answer 1 · 2017-07-12T00:48:00

Solution 1

Instead of using :

document.getElementById(id).getElementsByClassName("tbox2")[0].value = document.getElementById(id).getElementsByClassName("tbox1")[0].value;

Try this:

document.getElementsByClassName("tbox2")[0].value = document.getElementsByClassName("tbox1")[0].value;

Posted 12-Jul-17 0:48am

deepankarbhatnagar

Comments

Member 13296172 12-Jul-17 6:57am

its not working bro..

deepankarbhatnagar 12-Jul-17 7:01am

Try to alert and see if the value coming or not

Member 13296172 12-Jul-17 7:11am

alert is working on copy button click bro

deepankarbhatnagar 12-Jul-17 7:14am

Put a deliberately alert here to see the what value is coming here. This is for testing purpose, after checking you should remove the alert from there.

Member 13296172 12-Jul-17 7:16am

am a beginner bro.will u do it for me. thanks

RAJU Kanumuri · Answer 2 · 2017-07-12T04:01:00

Hi,

Add the following code on after the line

JavaScript

text118.innerHTML = "Get Data";

JavaScript

text118.onclick = function () {
                document.getElementsByClassName("tbox2")[0].value = document.getElementsByClassName("tbox1")[0].value;
            };

we have to assign onclick function for each button

Thanks