Solved

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

Posted on 2004-04-16
16
1,048 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
  • 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 250 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 250 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
json with xmlhttprequesr 2 34
Javascript Refresh Parent Page from Popup 3 25
getting id from database 5 24
Problem to page 4 23
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

706 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now