Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old February 8th, 2005, 05:01 AM
Authorized User
 
Join Date: Aug 2004
Posts: 58
Thanks: 0
Thanked 0 Times in 0 Posts
Default HTML DOM - clone form element could not be aligned

I have a serious problem in dealing the form elements using HTML DOM.

Please be patient to go through this code.
Code:
<html>
<head>
    <title>Untitled</title>
    <script language="JavaScript">
    function func_insert()
    {        
        var obj_txt_1 = document.getElementById("txt_1");
        var obj_txt_1_new = obj_txt_1.cloneNode(true);
        document.frm_test.appendChild(obj_txt_1_new)

    }

    </script> 
</head>
<body>
    <form name="frm_test">
        <table id="tbl_test" cellspacing="2" cellpadding="2" border="1">
            <tr>
                <td><input type="Text" name="txt_1"></td>                
                <td><a href="javascript:func_insert()">Click</a></td>
            </tr>
            <tr>                
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>                
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </form>
</body>
</html>

What I want is to clone the textbox inside the table in a new row.I know how to add the row and put controls in it.

But when I do this with cloneNode() the form submitted doesn't have the duplicated element.

I did it using the following code.
Code:
<script language="JavaScript">
    function func_insert()
    {
        var tbl_test = document.getElementById("tbl_test");
        var rw_test = tbl_test.insertRow(-1);
        var cl_test = rw_test.insertCell(-1);
        var cl_test1 = rw_test.insertCell(-1);
        var obj_txt_1 = document.getElementById("txt_1");
        var obj_txt_1_new = obj_txt_1.cloneNode(true);
        cl_test.appendChild(obj_txt_1_new);    
    }

    </script>
Please Advise
Thanks in advance.:)



Shibu Narayanan
Software Associates
__________________
Shibu Narayanan
Software Associates
 
Old February 8th, 2005, 05:34 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Firstly two textboxes should not have the same name, secondly you cannot create form elements in IE and then add a name, you need to use something like this (ugly) syntax:
Code:
function getNewElement(Type, Name)
{
  return document.createElement("<input name=\"" + Name + "\" type=\"" + Type + "\">");
}
--

Joe (Microsoft MVP - XML)
 
Old February 8th, 2005, 06:30 AM
Authorized User
 
Join Date: Aug 2004
Posts: 58
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for your reply.

I know that, by calling the method createElement() we can easily create controls in HTML DOM. But what if we have 10-15 lengthy select boxes(Can be city,country etc).
I believe creating this dynamically will relly greatly on the client machines.

So, by now, you might have got the Idea why I tried to use cloneNode.I suppose cloneNode will be a better solution rather than creating each and every element(and its options) one by one.

Got any other better solution???

Thanks


Shibu Narayanan
Software Associates
 
Old February 9th, 2005, 06:05 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

I don't think you will much difference between cloeNode and cretaing each eleemnt separately. As I said, the disadvantage of cloneNode is that you cannot now give the attribute a name, well you can but it won't be part of the form's submission data.

If you're concerned about the client's resources then you really have to resort to doing this server side.


--

Joe (Microsoft MVP - XML)
 
Old February 9th, 2005, 06:22 AM
Authorized User
 
Join Date: Aug 2004
Posts: 58
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Sorry to disturb u again.

But Let me ask something.

Here is a mocking scenario..

Suppose that there is a form meant to add the personal details.
He may require to add his details first which we will provide from the server side as some form inputs.
After that he may require to enter his dependents details(name, relationship,date of birth etc )

can be his wife,children.

No program in this world can get the number of dependents from the server and we can never predict the number of controls for this.

I believe, in these cases, the controls must be created dynamically from the client side.

Please suggest me a better way to deal with this sort of situation.

Thanks

Shibu Narayanan
Software Associates
 
Old November 15th, 2008, 11:24 PM
Registered User
 
Join Date: Nov 2008
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I had similar issue. There is a solution in http://www.quirksmode.org/dom/domform.html, but it wouldn't work properly as it doesn't check for child nodes in every parent, i.e.
<p><input type..../></p> is an scenario that it wouldn't work applying the solution indicated in the link.

Finally, I ended with the following code:

function ChangeNames(newFields)
{
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++)
    {
        ChangeNames(newField[i]);
        if (newField[i].name)
        {
            newField[i].name = newField[i].name + counter;
        }
    }
}

function moreFields()
{
    counterter++;
    var newFields = document.getElementById('readroot').cloneNode(true );
    var insertHere = document.getElementById('writeroot');
    ChangeNames(newFields);
    insertHere.parentNode.insertBefore(newFields,inser tHere);
}





Oscar E.L.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Need to Click Element in DOM document [email protected] C# 2005 1 October 18th, 2007 03:38 AM
How to Click Element in DOM document [email protected] C# 1 October 18th, 2007 03:03 AM
How this HTML DOM established? Crazy4C Javascript 1 April 16th, 2006 02:00 AM
Need help with onchange of DOM element johndubchak BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 2 March 20th, 2006 07:27 PM
put part of html in string DOM Dj Kat Javascript How-To 3 February 22nd, 2006 04:28 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.