PDA

Click to See Complete Forum and Search --> : concatenating into a string

mili
07-15-2003, 07:07 PM
Dear folks,

Here's a piece of script that Khalid & Jona helped me in getting it to work. Please can someone help me create a string separated by ; for all the values entered by a user?
I have 3 fields type,custName,amt.I want one string for each looping thro all the values entered by a user.I want to assign this string to a hidden input field as a part of my form's save action.
Below is my code:
Thanks!
<html>
<html>
<head><title>Add, delete rows in JavaScript</title>
<script language="JavaScript" type="text/javascript">
var ie = document.all;
var dom = document.getElementById;
var tableLength;
var z;

var rowsArr = new Array()// **** Added to collect number of rows to delete
var ctr = 0;// **** Added to count number of rows to delete

function getTableLength(myTable){
if(dom) tableLength = document.getElementById(myTable).getElementsByTagName("TR").length;
return tableLength;
}

function addRow(id){
if(dom){
//numrows = document.all.myTable.rows.length;
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];

var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.innerHTML = "<input type=checkbox align=center name='"+name+"' id='"+name+"' onclick=\"setRow(this);\">";
var td2 = document.createElement("TD")
td2.innerHTML = "<select size=1 name='type' id='type'><option selected>Select a Type<option value=1>Basis Price<option value=2>Float<option value=3>Integer</select>";
var td3 = document.createElement("TD")
td3.innerHTML = "<input type=text align=center size=25 name='custName' id='custName'>";
//td2.appendChild (document.createTextNode("column 2"))
var td4 = document.createElement("TD")
td4.innerHTML = "<input type=text align=center size=25 name='amt' id='amt'>";
//var td5 = document.createElement("TD")
//td5.innerHTML = "<b>"+numrows+"</b>";
//td3.appendChild (document.createTextNode("column 2"))
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
//row.appendChild(td5);
tbody.appendChild(row);} else { return; }
}

function getRowNum(){
if(dom)
tdCtr = 0;
var z = document.getElementById('myTable').getElementsByTagName("TR");
var w = (z[z.length-1]);
tdCtr-=(w.getElementsByTagName("td").length);
w.removeNode(true)
return tdCtr;
}
function delRow(myTable){
for(var x=0;x<rowsArr.length;x++){
var row = rowsArr[x];
row.removeNode(true);

}
myTable.innerHTML = myTable.innerHTML;
}

/**** Function added to add rows to be deleted *****/
/*
@param obj checkbox field determining which row to be deleted
*/
function setRow(obj){
rowsArr[ctr++] = obj.parentNode.parentNode;
}
</script>
</head>
<body>
<form name="Test">
<table id="myTable" cellspacing="0" width="100%" border="1">
<tbody>
<tr bgcolor="#cfcfcf">
<td width="10%">
<input type="button" value="Delete" onclick="delRow('myTable')">
<input type="button" value="Add Row" onclick="addRow('myTable')"></td>
<td width="30%">Type</td>
<td width="30%">Cust Name</td>
<td width="30%">Amount</td>
</tr>
</tbody>
</table>
<br>
<br>
<div align="center"><input type=button value="save" onclick=" "></div>
</form>
</body></html>
Khalid Ali
07-15-2003, 08:28 PM
Please explain your question a bit more
mili
07-15-2003, 08:40 PM
Khalid,

This is a dynamic table that adds rows when Add button is clicked.The rows can be checked and deleted using delete button (which you helped me solve this problem).
When the user enters values in these fields, I want to store them in a variable as a string, where the values are separated by ;
I have three fields on every row.
The select box is called type.
The two input fields are called custName and amt.
If the user has entered 3 rows , lets say

float custname1 300
integer custname2 400
float custname3 600

I want to store these value in 3 variables like this:

type=float;integer;float;
custName=custname1;custname2;custname3;
price=300;400;600;

Hope this helps.

Thanks,
mili
07-16-2003, 11:18 AM
Alright, I'm getting closer.I was able to concatenate the values in a row separated by ',' and concatenate the rows separated by ';'.
I just have this small bug that I'm not able to fix.
Add a row, enter values.Add another row & enter values.Now click value button.For some reason the 'amt' field is undefined.Pls help me



<html>
<html>
<head><title>Add, delete rows in JavaScript</title>
<script language="JavaScript" type="text/javascript">
var ie = document.all;
var dom = document.getElementById;
var tableLength;
var z;

var rowsArr = new Array()// **** Added to collect number of rows to delete
var ctr = 0;// **** Added to count number of rows to delete

function getTableLength(myTable){
if(dom) tableLength = document.getElementById(myTable).getElementsByTagName("TR").length;
return tableLength;
}

function addRow(id){
if(dom){
var numrows = document.all.myTable.rows.length;
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
document.Test.count.value = numrows;
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.innerHTML = "<input type=checkbox align=center name='"+name+"' id='"+name+"' onclick=\"setRow(this);\">";
name = "type" + numrows;
var td2 = document.createElement("TD")
td2.innerHTML = "<select size=1 name='"+name+"' id='"+name+"'><option selected>-Select a Type<option value=1>Basis Price<option value=2>Float<option value=3>Integer</select>";
name = "custname" + numrows;
var td3 = document.createElement("TD")
td3.innerHTML = "<input type=text align=center size=25 name='"+name+"' id='"+name+"'>";
name = "amt" + numrows;
var td4 = document.createElement("TD")
td4.innerHTML = "<input type=text align=center size=25 name='"+name+"' id='"+name+"'>";
var td5 = document.createElement("TD")
td5.innerHTML = "<b><center>"+numrows+"<center></b>";
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
tbody.appendChild(row);} else { return; }
}

function getRowNum(){
if(dom)
tdCtr = 0;
var z = document.getElementById('myTable').getElementsByTagName("TR");
var w = (z[z.length-1]);
tdCtr-=(w.getElementsByTagName("td").length);

w.removeNode(true)

return tdCtr;
}

function delRow(myTable){
for(var x=0;x<rowsArr.length;x++){
var row = rowsArr[x];

row.removeNode(true);

}
myTable.innerHTML = myTable.innerHTML;
}
/**** Function added to collect rows to be deleted *****/
/*
@param obj checkbox field determining which row to be deleted
*/
function setRow(obj){
rowsArr[ctr++] = obj.parentNode.parentNode;
}
function values()
{
numrows = document.all.myTable.rows.length;
str = "";
// str += "count = " + document.Test.count.value +"\n";
for(i=1;i<numrows;i++)
{
obj_custname = eval("document.Test.custname"+i);
obj_amt = eval("document.Test.amt"+i);
obj_type = eval("document.Test.type"+i);

str += obj_type.options[obj_type.selectedIndex].text+ ',';
str += obj_custname.value+',';
str += obj_amt.value+';';

}
//alert(str);
document.Test.dynamicValues.value = str;
alert(document.Test.dynamicValues.value);
}
</script>
</head>
<body>
<form name="Test">
<input type=hidden name=count>
<input type=hidden name=dynamicValues>
<table id="myTable" cellspacing="0" width="100%" border="1">
<tbody>
<tr bgcolor="#cfcfcf">
<td width="10%">
<input type="button" value="Delete" onclick="delRow('myTable')">
<input type="button" value="Add Row" onclick="addRow('myTable')"></td>
<td width="30%">Price Type</td>
<td width="30%">Customer Name</td>
<td width="30%">Amt</td>
</tr>
</tbody>
</table>
<br>
<br>
<div align="center"><input type="Button" onclick=values() value="Value"></div>
</form>
</body></html>
mili
07-16-2003, 11:32 AM
Never mind..I fixed the problem.It was a silly mistake(like always)

Thanks,
Khalid Ali
07-16-2003, 12:32 PM
:D
great and you are welcome..as always..:p
mili
07-16-2003, 01:14 PM
I need your help again, Khalid.I ran into a different problem this time.
Here is the scenario:
1. Add 4 rows and enter values in all the rows.Now hit value button.The alert looks good
2. check the last row and delete it.Now hit the value button.The alert looks good.
3. check the first row and delete it. Now hit the value button. I get this error:
obj_type.options is null or not an object
Please help me!

Here is my modified code-

Thanks,
Khalid Ali
07-16-2003, 02:50 PM
The problem is that once a row is deleted fromthe middle or beginning of the list your code does not update the names accordingly...that means if you had 4 rows in table..you delete the row 1 now typically rest of the rows should change the names of the all the elements accordingly.which means now row 1 should be row 1 and so on...

I hope this helps you write your code...
mili
07-16-2003, 03:21 PM
Ok..this to me, sounds way too complicated and much beyond my scope :(
Is there another way of looping thro' the values without using different names?

Thanks,
mili
07-17-2003, 08:50 AM
please can someone help me fix this error?

thanks,
mili
07-17-2003, 08:13 PM
Khalid,

I tried fixing this error and I didnt succeed.I would really appreciate if you could look into this problem whenever you get a chance.

Thanks,
Exuro
07-17-2003, 11:15 PM
I didn't really look at Khalid's code, but I'm pretty sure what I came up with will work too. It stores the values into the Text elements at the bottom of the page. You can change them to Hidden elements if you want, but I thought you'd like to see how the values pop up in there separated by the ;'s and all... Anyway, my code's attached.
mili
07-18-2003, 04:53 PM
Thanks a lot for your help.I will try using this.