Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1111
  • Last Modified:

Cloning a row - Change onClick of a IMG on doing a clone row

I have a tr which i am cloning. The tr has one txt field....and an image which calls a calendar javascript and passes the "formname.fieldname" , that would be populated with the calendar date.

so if i have a row like this
<form name="myForm">
...
<tr>
<td><input type="text" name="object[0].date"><img src="/calendar.gif" onClick='calendar("myForm.object[0].date");return false;'> </td>
</tr>
..
</form>

now when i clone the row.....
i would like new rows to be like this.....

<tr>
<td><input type="text" name="object[1].date"><img src="/calendar.gif" onClick='calendar("myForm.object[1].date");return false;'> </td>
</tr>
<tr>
<td><input type="text" name="object[2].date"><img src="/calendar.gif" onClick='calendar("myForm.object[2].date");return false;'> </td>
</tr>

As you can see......i am changing the text field names and also the onClick ,

I have tried a lot to implement this........can someone help ???


0
rahulkothari
Asked:
rahulkothari
  • 6
  • 6
  • 2
  • +2
2 Solutions
 
HaydnHCommented:
See the following URL:

    http://javascript.internet.com/miscellaneous/add-a-row.html

If you need more info, please feel free to post back here.

Haydn.
0
 
HaydnHCommented:
Oh, you may need extra info re: adding images, changing the img src, incrememnting the onClick's etc, here's a more specific example to suit your needs - copy and paste in to a new html file:

____________________________________________________________________

<HTML>
  <HEAD>
    <SCRIPT>
      rowCount = 1;
      function addRow(id) {
        var tbody = document.getElementById
        (id).getElementsByTagName("TBODY")[0];
        var row = document.createElement("TR");
        var cell = document.createElement("TD");
        var inp = document.createElement("INPUT");
        inp.type = "text";
        inp.name = "object[" + rowCount + "].date";
        var image = document.createElement("IMG");
        image.src = "./calendar.gif";
        image.onClick = "calendar('myForm.object[" + rowCount + "].date'); return false;";
        row.appendChild(cell);
        cell.appendChild(inp);
        cell.appendChild(image);
        tbody.appendChild(row);
        rowCount++;
      }
    </SCRIPT>
  </HEAD>

  <BODY>
    <A HREF="javascript:addRow('myTable')">Add a row</a>

      <TABLE ID="myTable">
        <TBODY>
        <TR>
          <TD><INPUT TYPE="text" NAME="object[0].date"><IMG SRC="/calendar.gif" onClick='calendar("myForm.object[0].date");return false;'></TD>
        </TR>
        </TBODY>
      </TABLE>
  </BODY>
</HTML>
____________________________________________________________________


Haydn.
0
 
ZvonkoSystems architectCommented:
Here my proposal:

<html>
<head>
<title>Add Row</title>
<script>
function addRow(){
  tBody = document.getElementById("myTab").childNodes[0];
  nRow = tBody.rows.length;
  newRow=tBody.rows[0].cloneNode(true);
  tBody.appendChild(newRow);
  for(i=0;i<newRow.cells.length;i++){
    newRow.cells[i].innerHTML=newRow.cells[i].innerHTML.replace(/object\[0\]\.date/g, "object["+nRow+"].date");
  }
}
function calendar(fldName){
  alert(fldName);
}
</script>
</head>
<body>
<form name="myForm">
<table id="myTab">
<tr>
<td><input type="text" name="object[0].date"><img src="/calendar.gif" onClick='calendar("myForm.object[0].date");return false;'> </td>
</tr>
</table>
<input type=button value="Add" onClick="addRow()">
</form>
</body>
</html>

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
HaydnHCommented:
Sorry - just realised the img.onclick won't work like that, here's a correctiong:

____________________________________________________________________

<HTML>
  <HEAD>
    <SCRIPT>
      rowCount = 1;

      function calendar(myName) {
        alert(myName);
      }

      function addRow(id) {
        var tbody = document.getElementById
        (id).getElementsByTagName("TBODY")[0];
        var row = document.createElement("TR");
        var cell = document.createElement("TD");
        cell.innerHTML = '<INPUT TYPE="text" NAME="object[' + rowCount + '].date" onClick="alert(this.name);">' +
                         '<IMG SRC="./calendar.gif" NAME="myForm.object[' + rowCount + '].date" onClick="calendar(this.name); return false;">';
        row.appendChild(cell);
        tbody.appendChild(row);
        rowCount++;
      }
    </SCRIPT>
  </HEAD>

  <BODY>
    <A HREF="javascript:addRow('myTable')">Add a row</a>

      <TABLE ID="myTable">
        <TBODY>
        <TR>
          <TD><INPUT TYPE="text" NAME="object[0].date" onClick="alert(this.name);"><IMG SRC="./calendar.gif" onClick='calendar("myForm.object[0].date");return false;'></TD>
        </TR>
        </TBODY>
      </TABLE>
  </BODY>
</HTML>
____________________________________________________________________
0
 
ZvonkoSystems architectCommented:
Hello rahulkothari,

did you test your calender() before cloning with you square bracket names?
I think that name cannot work.
The problem is that you can have square brackets in names, but as soon as you pass beside the field name also the form name, then you cannot distinguish wether the square brackets are part of name or some field index, like for radio buttons.

0
 
ZvonkoSystems architectCommented:
Here is a demo:

<html>
<head>
<title>Add Row</title>
<script>
function addRow(){
  tBody = document.getElementById("myTab").childNodes[0];
  nRow = tBody.rows.length;
  newRow=tBody.rows[0].cloneNode(true);
  tBody.appendChild(newRow);
  for(i=0;i<newRow.cells.length;i++){
    newRow.cells[i].innerHTML=newRow.cells[i].innerHTML.replace(/object_0_date/g, "object_"+nRow+"_date");
  }
}
function calendar(fldName){
  alert(eval("document."+fldName+".value"));
}
</script>
</head>
<body>
<form name="myForm">
<table id="myTab">
<tr>
<td><input type="text" name="object_0_date"><img src="/calendar.gif" onClick='calendar("myForm.object_0_date");return false;'> </td>
</tr>
</table>
<input type=button value="Add" onClick="addRow()">
</form>
</body>
</html>

0
 
HaydnHCommented:
Zvonk - FYI:

Neither of your 2 examples work in netscape/mozilla =/

Haydn.
0
 
ZvonkoSystems architectCommented:
And what browsers did your examples work?
0
 
HaydnHCommented:
Mozilla & IE... I don't have any other browsers installed on my work box =/

Haydn.
0
 
ZvonkoSystems architectCommented:
Ok, and you say you can assign event actions as string:
  image.onClick = "calendar('myForm.object[" + rowCount + "].date'); return false;";

And can post text fields without <form> tag with such names:
<INPUT TYPE="text" NAME="object[0].date"

0
 
TheKenmanCommented:
It looks like to me you'd need to change this:

    onClick='calendar("myForm.object[0].date");return false;'

...to:

     onClick='calendar(myForm.object[0].date);return false;'
0
 
devicCommented:
Here my proposal:
=================
tested on:
IE 6.0
mozilla 1.6
firefox 0.8
netscape 7.1
opera 7.21
=================
<html>
<head>
<title>Add Row</title>
<script>
function addRow()
{
      var r=document.getElementById("myTbl").getElementsByTagName("tr");
      with(r[r.length-1])parentNode.appendChild(cloneNode(true));
      with(r[r.length-1].getElementsByTagName("td")[0])innerHTML=
      innerHTML.replace(/\[[\d]{1,2}\]\./g, "["+(r.length-1)+"].");
}
function calendar(fldName){
 alert(fldName);
}
</script>
</head>
<body>
<form name="myForm">
<table id=myTbl>
<tr>
<td><input type="text" name="object[0].date"><img src="/calendar.gif" onClick='calendar("myForm.object[0].date");return false;'> </td>
</tr>
</table>
<input type=button value="Add" onClick="addRow()">
</form>
</body>
</html>
0
 
rahulkothariAuthor Commented:
zvonko....

i actually have text boxes , dropdowns in my row for now......are u saying it might not work ?
0
 
ZvonkoSystems architectCommented:
You have to decide what structure your field names has to have.
Anyway, the name "object[1].date" is a very bad idea; it contains square brackets and dot. Both are bad.
There are situation where you have to use them, like in PHP, but on JavaScipt side you will only have problems with such names, for example with your client side calender function.

Propose new naming structure for the field names contained in the cloned row and I can addapt the row number index in the field names.

Perhaps: object_1_date

0
 
rahulkothariAuthor Commented:
The naming convention cannot be changed.....coz my struts framework uses it.
Let me try and use ur method with the complete row elements and i will get back to you
0
 
HaydnHCommented:
Zvonko,

> Ok, and you say you can assign event actions as string:
>  image.onClick = "calendar('myForm.object[" + rowCount + "].date'); return false;";

As per my second post, I said that using image.onClick wouldn't work in that way please refer to my correction prior to you posting this.

With regards to the variable naming convention, I don't think the []'s will pose a problem although it may depend on the backend language (PHP is certainly ok with []'s)... however the . will probably cause more of a problem as it will be ignored. So object[0].190404 and object[0].200404 would esentially be the same - object[0]

Haydn.

p.s: considering the question was to "clone a row" I don't think the fact that I didn't put the row in a <FORM> tag matters too much - I'm sure the questioner could add this when he needs to pass the form to a script.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 6
  • 6
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now