Get the dropdown value from dynamic row

Question

wuzere.crewzz 0 Newbie Poster

11 Years Ago

I found this script in internet. Is it possible using this script to get the value of dropdown for each row and put it in the textfield.

For example, after add row clicked, and dropdown clicked, the value of the dropdown appears in the textfield. Here is the code:

<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

            for(var i=0; i<colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>
</HEAD>
<BODY>

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD><INPUT type="text" name="txt"/></TD>
            <TD>
                <SELECT name="country">
                    <OPTION value="in">India</OPTION>
                    <OPTION value="de">Germany</OPTION>
                    <OPTION value="fr">France</OPTION>
                    <OPTION value="us">United States</OPTION>
                    <OPTION value="ch">Switzerland</OPTION>
                </SELECT>
            </TD>
        </TR>
    </TABLE>

</BODY>
</HTML>

javascript

5 Contributors
12 Replies
8K Views
5 Years Discussion Span
Latest Post 6 Years Ago Latest Post by Phoenix_2

radhakrishna.p 29 Posting Whiz in Training

11 Years Ago

for achieving your task we should consider one thing like as delete operation

in your case , for deleting a row you took the support of checkbox

similarly for setting text into corresponding textbox when the selection is made in respective dropdownbox we should consider the same thing otherwise there is no way to put text into textbox

i think you got my point

i made some changes in your code to insert value into textbox when the selection is done in DropDownBox as well as the appropriate check box is enabled

make changes accrodingly if you interested to change

<SELECT name="country" onchange="insertVal(this.options[this.selectedIndex].innerHTML)">
              ...... your option values 

</SELECT>

and add the following script yo your script

function insertVal(rtn_val) {
            try {
            var table = document.getElementById("dataTable");
            var rowCount = table.rows.length;
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        //  remove this logic if you dont need
                    }
                    row.cells[1].childNodes[0].value = rtn_val;                    

                }
            }
            }catch(e) {
                alert(e);
            }
}

check it once

Edited 11 Years Ago by radhakrishna.p because: giving some clarity

code739 17 Posting Whiz in Training

11 Years Ago

copy and paste this

    <HTML>
    <HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
    function addRow(tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
            case "text":
            newcell.childNodes[0].value = "";
            newcell.childNodes[0].id = "txt"+rowCount;
            break;
            case "checkbox":
            newcell.childNodes[0].checked = false;
            break;
            case "select-one":
            newcell.childNodes[0].selectedIndex = 0;
            break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
            alert("Cannot delete all the rows.");
            break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
            }
            }
        }catch(e) {
        alert(e);
        }
    }
    function addVal(obj,ob){
        var suf = ob.parentNode.parentNode.rowIndex;
        var txt = document.getElementById('txt'+suf);
        txt.value = obj;
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <TABLE id="dataTable" width="350px" border="1">
    <TR>
    <TD><INPUT type="checkbox" name="chk"/></TD>
    <TD><INPUT type="text" id="txt0" name="txt"/></TD>
    <TD>
    <SELECT name="country" onchange="addVal(this.options[this.selectedIndex].innerHTML,this)">
    <OPTION value="in">India</OPTION>
    <OPTION value="de">Germany</OPTION>
    <OPTION value="fr">France</OPTION>
    <OPTION value="us">United States</OPTION>
    <OPTION value="ch">Switzerland</OPTION>
    </SELECT>
    </TD>
    </TR>
    </TABLE>
    </BODY>
    </HTML>

code739 17 Posting Whiz in Training

11 Years Ago

yah Taywin got a point.... but anyway in addition for his answer..
put this line var index=0; before

for(var i=0; i<colCount; i++) {

@ line 10
then be sure to increment var index put this insert this line index++ after case "text": @ line 15.
then @ line 17 replace newcell.childNodes[0].id = "txt"+rowCount; to newcell.childNodes[0].id = (index==1)?"txt"+rowCount:"txtt"+rowCount;

then @ the addVal function insert this lines

var txtt = document.getElementById('txtt'+suf);
txtt.value = obj;

before the declaration of var suf

then insert this html element <TD><INPUT type="text" id="txtt0" name="txtt"/></TD> after line 62 <TD><INPUT type="text" id="txt0" name="txt"/></TD>

hope it will help.. =)

follow the instructions and try to read those code in order for you to understand how it runs for, for me copying is not really just worst as other sees as long as you really understand it.. then you got it right.

Edited 11 Years Ago by code739

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

wuzere.crewzz 0 Newbie Poster · Answer 1 · 2013-01-07T04:53:49+00:00

wuzere.crewzz 0 Newbie Poster

11 Years Ago

u can see it here http://jsfiddle.net/rMFMy/

wuzere.crewzz 0 Newbie Poster · Answer 2 · 2013-01-07T09:41:22+00:00

Thank you very much...

1 more question is..
if i have 2 textfield,

How if i want get the value of the dropdown AND the value of text, and put it in the both textfield.. hope you can help...

radhakrishna.p 29 Posting Whiz in Training · Answer 3 · 2013-01-07T10:22:15+00:00

hai code739,

your code is not working properly once i delete a row

if you dont mind ,can you check your answer once by deleting one row?

wuzere.crewzz 0 Newbie Poster · Answer 4 · 2013-01-07T10:43:44+00:00

radhakrishna.p, you must 'checked' first, than the delete will work..

wuzere.crewzz 0 Newbie Poster · Answer 5 · 2013-01-07T11:23:43+00:00

hai code739,

how if i have
<INPUT type="text" id="txt0" name="txt"/>
<INPUT type="text" id="txtt0" name="txt"/>

i want the dropdown value and text put into both field...

Taywin 312 Posting Virtuoso · Answer 6 · 2013-01-07T12:31:55+00:00

Look at line 51, copy that line and insert it right below the line 51. Then change the value from 'txt'+suf to 'txtt'+suf. Assumming that you have created the expected input field in your HTML.

I hope you learn how to do it from his/her script (JavaScript is not a code). Please do not simply copy-and-paste because you will learn nothing. At least, you need to be able to read and understand what is going on in each line.

wuzere.crewzz 0 Newbie Poster · Answer 7 · 2013-01-07T12:38:01+00:00

Taywin..

your answer work if only i get 1 row...
if i add another row, the value is null

Taywin 312 Posting Virtuoso · Answer 8 · 2013-01-07T14:30:11+00:00

Assumming that you have created the expected input field in your HTML.

That's what I said...

Please do not simply copy-and-paste because you will learn nothing. At least, you need to be able to read and understand what is going on in each line.

And that's also what I said...

If you look at the script again, there is a line that the value you want is being assigned to the element (line 52). You still need another copy for that line. Also, don't forget to add a new element whenever you add a new row...

Phoenix_2 0 Newbie Poster · Answer 9 · 2018-06-26T18:47:41+00:00

What part if this code needs to be adjusted to put the VALUE of the select drpodown into the textbox instead of the country? For example, the value for United States is "us". What would I change to make the value "us" tranfered to the textbox instead of "United States"?