Solved

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

Posted on 2004-04-16
16
1,066 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Make options hidden and show just option that is on 1 29
Not allowed to load local recource. 4 35
how can i make 2 columns? 4 41
Do alert on select 6 14
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

829 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