Tab key to create rows

[SSG001]

Is it possible to create row on client side when tab key is pressed in the last cell of the first row of the table

table is something like this

cell1| cell2| cell3 |cell4| cell5|
____|____|_____|____|____ |_


in the first cell select box is given second select box and remaining columns text boxes

[gits]

hi ...

it should be possible ... please post how you have your first line created, is it a table-row with textboxes?

kind regards

[SSG001]

[HTML]<table id="tbl">
<tr><thead><th>continent</th><th>country</th> <th>longitude</th>
<th>latitude</th>
<th>time zone</th>
</thead> </tr>
<td><select name="mcontinent" id="mcontinent" tabindex="11">
<option selected>--- Selectcontinenet ---</option>
//shown from continenet master
</select></td>

<tr> <td><select name="mcountrycode" id="mcountrycode" tabindex="1" >
<option selected>--- Selectcountry ---</option>
//option selected from country master table
</select></td>
<td><input type="text" name="mlong" id="mlong"></td>
<td><input type="text" name="mlat" id="mlat" ></td>
<td><input type="text" name="mtime" id="mtime" ></td>
</tr>
</table>[/HTML]

[gits]

hi ...

have a look at the following example:

[HTML]<script type="text/javascript">
function add_row() {
var table = document.getElementById('tbl');
var row = table.getElementsByTagName('tr')[0];
var new_row = row.cloneNode(true);

table.appendChild(new_row);
}

function add_row_event(e) {
var val = typeof window.event != 'undefined' ? window.event.keyCode : e.keyCode;

if (val == 9) {
add_row();
}
}
</script>

<table id="tbl">
<thead>
<th>continent</th>
<th>country</th>
<th>longitude</th>
<th>latitude</th>
<th>time zone</th>
</thead>
<tr>
<td>
<select name="mcontinent" id="mcontinent" tabindex="11">
<option selected>--- Selectcontinenet ---</option>
</select>
</td>
<td>
<select name="mcountrycode" id="mcountrycode" tabindex="1" >
<option selected>--- Selectcountry ---</option>
</select>
</td>
<td>
<input type="text" name="mlong" id="mlong"></td>
<td>
<input type="text" name="mlat" id="mlat" ></td>
<td>
<input type="text" name="mtime" id="mtime" onkeypress="add_row_event(event);">
</td>
</tr>
</table>
[/HTML]
kind regards

[SSG001]

Thanks
this works
prefectly in mozilla bt not in IE 6 it doesnt append any row
and how do i name the rows coulmns created in the array
something like
<input type="text" name="mlong[i]" id="mlong[i]"></td>

[gits]

first ... small adaptation to make it work with IE, it seems that that silly IE don't fire onkeypress with tab-key ... so we use the keydown-event. next we need to use to append to the tbody and we have to use tr with idx 1 instead. here is the script:

<script type="text/javascript">
function add_row(idx) {
    var table   = document.getElementById('tbl');
    var row     = table.getElementsByTagName('tr')[idx];
    var new_row = row.cloneNode(true);
 
    table.getElementsByTagName('tbody')[0].appendChild(new_row);
}
 
function add_row_event(e) {
    var val;
 
    if (typeof window.event != 'undefined') {
        val = window.event.keyCode;
        idx = 1;
    } else {
        val = e.keyCode;
        idx = 0;
    }
 
    if (val == 9) {
        add_row(idx);
    }
}
</script>
 
<table id="tbl">
    <thead>
        <th>continent</th>
        <th>country</th>
        <th>longitude</th>
        <th>latitude</th>
        <th>time zone</th>
    </thead>
    <tr>
        <td>
            <select name="mcontinent" id="mcontinent"  tabindex="11">
                <option selected>--- Selectcontinenet ---</option>
            </select>
        </td>
        <td>
            <select name="mcountrycode" id="mcountrycode" tabindex="1" >
                <option selected>--- Selectcountry ---</option>
            </select>
        </td>
        <td>
            <input type="text" name="mlong" id="mlong"></td>
        <td>
            <input type="text" name="mlat" id="mlat" ></td>
        <td>
            <input type="text" name="mtime" id="mtime" onkeydown="add_row_event(event);">
        </td>
    </tr>
</table>
 

kind regards

[gits]

...
and how do i name the rows coulmns created in the array
something like

<input type="text" name="mlong[i]" id="mlong[i]">
 

therefore you have to loop through the cloned row's child elements and assign your desired id and name to the input before appending it to the table ...

kind regards

[SSG001]

is it somwething like this

     for (i=0;i<=5;i++){
             tdObj = document.createElement("td")[i];
 
    }
 

but how i append it to the row

[SSG001]

    var cells = new_row.childNodes;
    for (var i=0;i<cells.length;i++) {
    var cellName = cells[i].name;
    var cellid=cells[i].id;
        if (cellName){
            cells[i].name =cellName + "["+i+"]";
            cells[i].id=cellName+"["+i+"]";
alert(cells[i].name);
        }
 
    }

//but it not alerting anything to see if the naming is proper

[gits]

hmmm ... do you want something like this?

[HTML]<script type="text/javascript">
function add_row(idx) {
var table = document.getElementById('tbl');
var row = table.getElementsByTagName('tr')[idx];
var new_row = row.cloneNode(true);

apply_names(table, new_row);

table.getElementsByTagName('tbody')[0].appendChild(new_row);
}

function apply_names(table, row) {
var inp = row.getElementsByTagName('input');
var sel = row.getElementsByTagName('select');
var sfx = table.getElementsByTagName('tr').length;
var eles = [];
var ele;

for (var i = 0; i < inp.length; i++) {
eles.push(inp[i]);
}

for (i = 0; i < sel.length; i++) {
eles.push(sel[i]);
}

for (i = 0; i < eles.length; i++) {
ele = eles[i];
ele.setAttribute('name', ele.getAttribute('name') + '_' + sfx);
ele.setAttribute('id', ele.getAttribute('id') + '_' + sfx);
}

alert(row.innerHTML);
}

function add_row_event(e) {
var val;

if (typeof window.event != 'undefined') {
val = window.event.keyCode;
idx = 1;
} else {
val = e.keyCode;
idx = 0;
}

if (val == 9) {
add_row(idx);
}
}
</script>

<table id="tbl">
<thead>
<th>continent</th>
<th>country</th>
<th>longitude</th>
<th>latitude</th>
<th>time zone</th>
</thead>
<tr>
<td>
<select name="mcontinent" id="mcontinent" tabindex="11">
<option selected>--- Selectcontinenet ---</option>
</select>
</td>
<td>
<select name="mcountrycode" id="mcountrycode" tabindex="1" >
<option selected>--- Selectcountry ---</option>
</select>
</td>
<td>
<input type="text" name="mlong" id="mlong"></td>
<td>
<input type="text" name="mlat" id="mlat" ></td>
<td>
<input type="text" name="mtime" id="mtime" onkeydown="add_row_event(event);">
</td>
</tr>
</table>
[/HTML]
kind regards

[SSG001]

looks like it's same


Thanks a lot

[gits]

hi ...

the same as what? :) ... its different because your code tried to set the name/id of table-cells ... the above one sets it for the input-elements ...

kind regards

[SSG001]

Hi
mean to say this is what i wanted

thanks

[gits]

ahhh ... i see ... ;) ... do you want to post the form later on to a serverside script?

[arunj82]

hi ...

I am new to Javascript. Could you please help me how to create a new row by clicking the image or any text link. I tried the above code but the add row message comes after every row. This is my same example code

      <script type="text/javascript">
      function add_row(idx) {
          var table   = document.getElementById('tbl');
          var row     = table.getElementsByTagName('tr')[idx];
          var new_row = row.cloneNode(true);
          table.getElementsByTagName('tbody')[0].appendChild(new_row);
      }
 
      function add_row_event(e) {
      var val;
      if (typeof window.event != 'undefined') {
            val = window.event.keyCode;
            idx = 1;
          } else {
              val = e.keyCode;
              idx = 0;
          }
          if (val == 0) {
              add_row(idx);
          }
      }
      </script>
      <table id="tbl">
          <thead>
              <th>longitude</th>
              <th>latitude</th>
              <th>time zone</th>
         </thead>
          <tr>
              <td>
                  <input type="text" name="mlong" id="mlong"></td>
              <td>
                    <input type="text" name="mlat" id="mlat" ></td>
              <td>    
                 <input type="text" name="mtime" id="mtime">
              </td>
              <td>&nbsp;&nbsp;<a href="#" onClick="add_row_event(event);">Add Row</a> </td>
          </tr>
      </table>

[SSG001]

yes right
have to actually post the data using to server side using php

[gits]

in that case we have to adapt the script ... because think i remember that IE makes problems when setting name attribs during runtime ... could you try to post the form and have a look whether it works for you at the moment or not?

kind regards

[SSG001]

[PHP]//count value shows 1 although i created three rows
<?
if($_POST['submit']){
$ct=count($_POST['mcontinent']);
?> <script>alert('<?=$ct?>');</script> <?
}
?>
<html>
<head>
<script type="text/javascript">
function add_row(idx) {
var table = document.getElementById('tbl');
var row = table.getElementsByTagName('tr')[idx];
var new_row = row.cloneNode(true);

apply_names(table, new_row);

table.getElementsByTagName('tbody')[0].appendChild(new_row);
}

function apply_names(table, row) {
var inp = row.getElementsByTagName('input');
var sel = row.getElementsByTagName('select');
var sfx = table.getElementsByTagName('tr').length;
var eles = [];
var ele;

for (var i = 0; i < inp.length; i++) {
eles.push(inp[i]);
}

for (i = 0; i < sel.length; i++) {
eles.push(sel[i]);
}

for (i = 0; i < eles.length; i++) {
ele = eles[i];
ele.setAttribute('name', ele.getAttribute('name') + '_' + sfx);
ele.setAttribute('id', ele.getAttribute('id') + '_' + sfx);
}

alert(row.innerHTML);
}

function add_row_event(e) {
var val;

if (typeof window.event != 'undefined') {
val = window.event.keyCode;
idx = 1;
} else {
val = e.keyCode;
idx = 0;
}

if (val == 9) {
add_row(idx);
}
}
</script>
</head>
<body>
<form method="post">
<table id="tbl">
<thead>
<th>continent</th>
<th>country</th>
<th>longitude</th>
<th>latitude</th>
<th>time zone</th>
</thead>
<tr>
<td>
<select name="mcontinent" id="mcontinent" tabindex="11">
<option selected>--- Selectcontinenet ---</option>
</select>
</td>
<td>
<select name="mcountrycode" id="mcountrycode" tabindex="1" >
<option selected>--- Selectcountry ---</option>
</select>
</td>
<td>
<input type="text" name="mlong" id="mlong"></td>
<td>
<input type="text" name="mlat" id="mlat" ></td>
<td>
<input type="text" name="mtime" id="mtime" onkeydown="add_row_event(event);">
</td>
</tr>
</table>
<input type="submit" name="submit" value"submit">
</form>
</body>
</html>[/PHP]

[gits]

:) sorry in case i didn't make myself very clear ... we create new rows in the table at the client ... that table contains input-nodes where we set the name dynamically ... after the user filled in some values ... the question is now: should that form be posted back to the server without using ajax? in case it should be simply posted back then we have to consider the following IE-'bug' :) here that means that IE doesn't allow to set the name-attribute at runtime so when posting the form you might miss the variable-names of the posted form-parameters and we may use something like this to work around that problem

kind regards

[SSG001]

As u see there are two select boxes in the row
so evrytime i'll have to refresh page
so i have read somewhere it can be avoided with ajax
also if we do the posting of this data through ajax then how to go about



thanks

[gits]

in that case you may create the querystring for the ajax-request for youself out of the lines or use the node-ids ... so we wouldn't have the name-problem here :) ...

are you familiar with ajax and how it works?

kind regards

[SSG001]

have read lot of theory but no practicals
can u just show me with only one field posting with ajax

[gits]

hi ...

here you find an example

kind regards

[SSG001]

<script>
//set the variables.
function getArticle(id) {
    var cb = function(res) {
        alert(res.responseText);
    };
 
    ajax('getNews.php', id,cb);
}
 
//Make the actual connection.
ajax = function(strURL, sSend) {
    var xmlHttpReq=false;
 
    if (!window.ActiveXObject) ajax.req = new XMLHttpRequest();
    else ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
 
    ajax.req.open('POST',strURL,false);
    ajax.req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
    ajax.req.send(sSend);
    return ajax.req;
}
 
 
//set the query string to be sent
function getquerystring(id) {
    qstr = 'data=' + escape(id);  // NOTE: no '?' before querystring
    return qstr;
}
 
//put the data on the page.
function updatepage(str) {
    document.getElementById("data").innerHTML = str;
}
</script>
<select onchange="getArticle(this.value);">
<option value="1">Train</option>
<option value="2">Airplane Crashes</option>
<option value="3">Mental Health</option>
</select>
<div id="data"></div>

[PHP]<?
news_id = request("id")
$strSQL = "select * from news where news_id = " & new_id
$rsdata=mysql_query($strSQL);
echo $rsdata['news_id'];
?>[/PHP]

//is this example will work with IE,mozilla

[gits]

hi ...

that code should not work ... or is it? the problem is with the cb you don't have it assigned to the onreadystatechange of the XMLHttpRequest-object ...

kind regards

[SSG001]

<script>
//set the variables.
function getArticle(id) {
    var cb = function(res) {
        alert(res.responseText);
    };
 
    ajax('getNews.php', id,cb);
}
 
//Make the actual connection.
ajax = function(strURL, sSend) {
    var xmlHttpReq=false;
 
    if (!window.ActiveXObject) ajax.req = new XMLHttpRequest();
    else ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
 
    ajax.req.open('POST',strURL,false);
    ajax.req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.req.xmlHttpReq.onreadystatechange = function(cb) {
        if (ajax.req.xmlHttpReq.readyState == 4) {
            cb(ajax.req.xmlHttpReq);
        }
 
 
    ajax.req.send(sSend);
    return ajax.req;
}
 
 
//set the query string to be sent
function getquerystring(id) {
    qstr = 'data=' + escape(id);  // NOTE: no '?' before querystring
    return qstr;
}
 
//put the data on the page.
function updatepage(str) {
    document.getElementById("data").innerHTML = str;
}
</script>
<select onchange="getArticle(this.value);">
<option value="1">Train</option>
<option value="2">Airplane Crashes</option>
<option value="3">Mental Health</option>
</select>
<div id="data"></div>

Code: ( php )

<?
news_id = request("id")
$strSQL = "select * from news where news_id = " & new_id
$rsdata=mysql_query($strSQL);
echo $rsdata['news_id'];
?>

will this give me names of the rows properly for posting

[SSG001]

i have used ajax for posting data from tables created using add row button
but not with tab key.
and the creation of rows was also using createElement method and then appending
the naming is also done for each row and each cell
but this tab key method looks more sleek then clicking button for adding row
how do i post the data from the rows created to server using ajax

[gits]

your ajax-request is working? ... i wonder because you should have to receive the cb in your ajax-function like this:

var ajax = function(strURL, sSend, cb) {
    // your code here
    // and later on you simply could use it:
 
    ajax.req.xmlHttpReq.onreadystatechange = cb;
 
    // your further code here :)
}

you could call getArticle it from our add_row-function ... to have it called on tab-press ...

kind regards

[SSG001]

<script>
//set the variables.
function getArticle(id) {
    var cb = function(res) {
        alert(res.responseText);
    };
 
    ajax('getNews.php', id,cb);
}
 
//Make the actual connection.
 
 
 
var ajax = function(strURL, sSend,cb) {
    var xmlHttpReq=false;
 
    if (!window.ActiveXObject) ajax.req = new XMLHttpRequest();
    else ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
 
    ajax.req.open('POST',strURL,false);
    ajax.req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    ajax.req.xmlHttpReq.onreadystatechange = cb;
        if (ajax.req.xmlHttpReq.readyState == 4) {
            cb(ajax.req.xmlHttpReq);
        }
 
 
    ajax.req.send(sSend);
    return ajax.req;
}
 
 
//set the query string to be sent
function getquerystring(id) {
    qstr = 'data=' + escape(id);  // NOTE: no '?' before querystring
    return qstr;
}
 
//put the data on the page.
function updatepage(str) {
    document.getElementById("data").innerHTML = str;
}
</script>
<select onchange="getArticle(this.value);">
<option value="1">Train</option>
<option value="2">Airplane Crashes</option>
<option value="3">Mental Health</option>
</select>
<div id="data"></div>

//here the updatepage is not cakled anywhere which displays the str
also how do i use this in my example
i have used ajax earlier but as i said different way of cross browser creation
and even the rows creation was using button as i have mentioned
not with tab key
can u just show me how to use it in my example
i also have some select box and text box vales above the table which is created dynamically

[gits]

hi ...

the following code should work now ...

<script type="text/javascript">
//set the variables.
function getArticle(id) {
    var cb = function(res) {
        alert(res.responseText);
    };
 
    ajax('getNews.php', id,cb);
}
 
//Make the actual connection.
var ajax = function(strURL, sSend, cb) {
    var xmlHttpReq=false;
 
    if (!window.ActiveXObject) {
        ajax.req = new XMLHttpRequest();
    } else {
        ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    ajax.req.open('POST', strURL, false);
 
    ajax.req.setRequestHeader(
        'Content-Type','application/x-www-form-urlencoded'
    );
 
    ajax.req.xmlHttpReq.onreadystatechange = function() {
        if (ajax.req.xmlHttpReq.readyState == 4) {
            cb(ajax.req.xmlHttpReq);
        }
    };
 
    ajax.req.send(sSend);
    return ajax.req;
}
 
//set the query string to be sent
function getquerystring(id) {
    qstr = 'data=' + escape(id);  // NOTE: no '?' before querystring
    return qstr;
}
 
//put the data on the page.
function updatepage(str) {
    document.getElementById("data").innerHTML = str;
}
</script>
<select onchange="getArticle(this.value);">
<option value="1">Train</option>
<option value="2">Airplane Crashes</option>
<option value="3">Mental Health</option>
</select>
<div id="data"></div>

to your next step: could you summarize what your page looks like and what you want to do now exactly?

kind regards

[SSG001]

Error: ajax.req.xmlHttpReq has no properties

my getNews.php i have tried to alert the but it is not alerting that
also if this works
how do i use it in my dynamic created rows
and post the values


all confused

i have a form wher in i take soem details and then the table creation with one row in which tab key creates required more rows which i have managed with ur code
but now as u said posting part of all the data above the table as well as the table through ajax



my getNews file is
<?
news_id =$_POST("id");
$strSQL = "select * from news where news_id = " & new_id;
$rsdata=mysql_query($strSQL);
echo $rsdata['news_id'];
?>


thanks in advance

[SSG001]

<html>
<head>
<script type="text/javascript">
function add_row(idx) {
    var table   = document.getElementById('tbl');
    var row     = table.getElementsByTagName('tr')[idx];
    var new_row = row.cloneNode(true);
 
    apply_names(table, new_row);
 
    table.getElementsByTagName('tbody')[0].appendChild(new_row);
}
 
function apply_names(table, row) {
    var inp  = row.getElementsByTagName('input');
    var sel  = row.getElementsByTagName('select');
    var sfx  = table.getElementsByTagName('tr').length;
    var eles = [];
    var ele;
 
    for (var i = 0; i < inp.length; i++) {
        eles.push(inp[i]);
    }
 
    for (i = 0; i < sel.length; i++) {
        eles.push(sel[i]);
    }
 
    for (i = 0; i < eles.length; i++) {
        ele = eles[i];
        ele.setAttribute('name', ele.getAttribute('name') + '_' + sfx);
        ele.setAttribute('id', ele.getAttribute('id') + '_' + sfx);
    }
 
    alert(row.innerHTML);
}
 
function add_row_event(e) {
    var val;
 
    if (typeof window.event != 'undefined') {
        val = window.event.keyCode;
        idx = 1;
    } else {
        val = e.keyCode;
        idx = 0;
    }
 
    if (val == 9) {
        add_row(idx);
    }
}
</script>
</head>
 <body>
 <form method="post">
<table>
<tr><td><select name="dept" id="dept">
    <option selected>--- Select depts---</option></select></td></tr>
<tr><td><select name="study" id="study" >
  <option selected>--- Select studies---</option></select></td></tr>
<tr><td><input type="text" name="nos" id="nos"></td></tr>
</table>
<table id="tbl">
    <thead>
        <th>continent</th>
        <th>country</th>
        <th>longitude</th>
        <th>latitude</th>
        <th>time zone</th>
    </thead>
    <tr>
        <td>
            <select name="mcontinent" id="mcontinent"  tabindex="11">
                <option selected>--- Selectcontinenet ---</option>
            </select>
        </td>
        <td>
            <select name="mcountrycode" id="mcountrycode" tabindex="1" >
                <option selected>--- Selectcountry ---</option>
            </select>
        </td>
        <td>
            <input type="text" name="mlong" id="mlong"></td>
        <td>
            <input type="text" name="mlat" id="mlat" ></td>
        <td>
            <input type="text" name="mtime" id="mtime" onkeydown="add_row_event(event);">
        </td>
    </tr>
</table>
<input type="submit" name="submit" value"submit">
</form>
</body>
</html>

//this is my code ofcourse the selct options are filled from database table values
and i want to post this data and save
thanks

[gits]

Error: ajax.req.xmlHttpReq has no properties

sorry i overlooked something ... xmlHttpReq is useless, so try this:

var ajax = function(strURL, sSend, cb) {
    var xmlHttpReq=false;
 
    if (!window.ActiveXObject) {
        ajax.req = new XMLHttpRequest();
    } else {
        ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    ajax.req.open('POST', strURL, false);
 
    ajax.req.setRequestHeader(
        'Content-Type','application/x-www-form-urlencoded'
    );
 
    ajax.req.onreadystatechange = function() {
        if (ajax.req.readyState == 4) {
            cb(ajax.req);
        }
    };
 
    ajax.req.send(sSend);
    return ajax.req;
}
 

[SSG001]

//set the query string to be sent
function getquerystring(id) {
    qstr = 'data=' + escape(id);  // NOTE: no '?' before querystring
    return qstr;
}
 
//put the data on the page.
function updatepage(str) {
    document.getElementById("data").innerHTML = str;
}
 

this is not called anywhere in that function
which actually displays the data
so my program is nt showing any results


where am i going wrong?
and how can i use this in my example

[gits]

var ajax = function(strURL, sSend, cb) {
    var xmlHttpReq=false;
 
    if (!window.ActiveXObject) {
        ajax.req = new XMLHttpRequest();
    } else {
        ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    // here you have to create the right querystring
    var strURL = getquerystring(sSend);
 
    ajax.req.open('POST', strURL, false);
 
    ajax.req.setRequestHeader(
        'Content-Type','application/x-www-form-urlencoded'
    );
 
    ajax.req.onreadystatechange = function() {
        if (ajax.req.readyState == 4) {
            cb(ajax.req);
        }
    };
 
    ajax.req.send(sSend);
    return ajax.req;
}
 

and in your cb you should use:

var cb = function(res) {
    updatepage(res.responseText);
};

[SSG001]

[HTML]<script type="text/javascript">
function GetXmlHttpObject(){
var xmlHttp=null;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e){
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp && typeof XMLHttpRequest!='undefined') {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function getArticle(id){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getNews.php";
url=url+"?&news_id="+id;
url=url+"&sid="+Math.random();
alert(url);
xmlHttp.onreadystatechange=function(){stateChanged ()} ;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("data").innerHTML=xmlHttp. responseText;

}
}
</script>
<form method="GET">
<select name="news_id" id="news_id" onchange="getArticle(this.value);">
<option value="1">-TRain--</option>
<option value="2">-aerolplane--</option>
<option value="3">-Car--</option>
</select>
<div id="data">VALUE is displayed here </div>
</form>[/HTML]


this works fine with me and displays my result also is there any prblem if i use this instead of your code
now can u tell me how do i use this in my example for posting the value odf dynamic rows as well as as data taken before the table creation

[gits]

as i said some time before ... you simply could call getArticle() from the add_row() method ... but since getArticle() actually receives only one id you should adapt it to your needs ... you would have to retrieve all values of select- and textboxes of a row to build the right query-string for your purpose.

kind regards