?
Solved

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

Posted on 2004-04-16
16
Medium Priority
?
1,093 Views
Last Modified: 2008-02-01
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
Comment
Question by:rahulkothari
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
  • +2
16 Comments
 
LVL 8

Expert Comment

by:HaydnH
ID: 10841384
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
 
LVL 8

Assisted Solution

by:HaydnH
HaydnH earned 1000 total points
ID: 10841469
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 1000 total points
ID: 10841579
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.

 
LVL 8

Expert Comment

by:HaydnH
ID: 10841604
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 10841893
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 10841913
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
 
LVL 8

Expert Comment

by:HaydnH
ID: 10841987
Zvonk - FYI:

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

Haydn.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10843590
And what browsers did your examples work?
0
 
LVL 8

Expert Comment

by:HaydnH
ID: 10843670
Mozilla & IE... I don't have any other browsers installed on my work box =/

Haydn.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10843766
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
 
LVL 7

Expert Comment

by:TheKenman
ID: 10847225
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
 
LVL 25

Expert Comment

by:devic
ID: 10847265
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
 

Author Comment

by:rahulkothari
ID: 10847699
zvonko....

i actually have text boxes , dropdowns in my row for now......are u saying it might not work ?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10848204
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
 

Author Comment

by:rahulkothari
ID: 10849417
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
 
LVL 8

Expert Comment

by:HaydnH
ID: 10857596
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question