CloneNode question

hi experts,

Heres my problem:

I have a form where I want to allow the user to add additional work experiences if they have more then one work experience.

I want to use cloneNode (suggest if something is better then this option) so that when the user clicks the "Add additional" button, the fields are duplicated and unique variable names assigned to the form fields.

Also when the new fields are created, I would like to add a Remove Experience button as well.

This is how the form should look:

By default its like this:

<div id="myDiv">
<table width="100%"  border="0" cellpadding="0" id="wphr_we_table1">
              <tr>
                <td colspan="2"> <table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Employer:') ?>
                        <br /> <input name="wphr_we_employer1" type="text" id="wphr_we_employer1" value="<?php echo $wphr_we_employer1; ?>" size="40" />
                      </td>
                      <td width="25%">
                        <?php _e('Title:') ?>
                        <br /> <input name="wphr_we_title1" type="text" id="wphr_we_title1" value="<?php echo $wphr_we_title1; ?>" size="40" /></td>
                      <td width="25%">&nbsp;</td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td colspan="2"><table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Location:') ?>
                        <br /> <input name="wphr_we_location1" type="text" id="wphr_we_location1" value="<?php echo $wphr_we_location1; ?>" size="40" /></td>
                      <td width="25%">
                        <?php _e('Start date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_sd1" type="text" id="wphr_we_sd1" value="<?php echo $wphr_we_sd1; ?>" size="20" /></td>
                      <td width="25%">
                        <?php _e('End date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_ed1" type="text" id="wphr_we_ed1" value="<?php echo $wphr_we_ed1; ?>" size="20" /></td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td width="75%">
                  <?php _e('Description of Position:') ?>
                  <br /> <textarea name="wphr_we_desc1" cols="100" rows="6" id="wphr_we_desc1"><?php echo $wphr_we_desc1; ?></textarea>
                </td>
                <td width="25%" valign="bottom">
                  <p><a href="dont know what will come here">Add additional</a></p></td>
              </tr>
            </table>
                  
</div>

When the user has clicked Add Additional, it looks like this:

<div id="myDiv">
<table width="100%"  border="0" cellpadding="0" id="wphr_we_table1">
              <tr>
                <td colspan="2"> <table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Employer:') ?>
                        <br /> <input name="wphr_we_employer1" type="text" id="wphr_we_employer1" value="<?php echo $wphr_we_employer1; ?>" size="40" />
                      </td>
                      <td width="25%">
                        <?php _e('Title:') ?>
                        <br /> <input name="wphr_we_title1" type="text" id="wphr_we_title1" value="<?php echo $wphr_we_title1; ?>" size="40" /></td>
                      <td width="25%">&nbsp;</td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td colspan="2"><table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Location:') ?>
                        <br /> <input name="wphr_we_location1" type="text" id="wphr_we_location1" value="<?php echo $wphr_we_location1; ?>" size="40" /></td>
                      <td width="25%">
                        <?php _e('Start date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_sd1" type="text" id="wphr_we_sd1" value="<?php echo $wphr_we_sd1; ?>" size="20" /></td>
                      <td width="25%">
                        <?php _e('End date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_ed1" type="text" id="wphr_we_ed1" value="<?php echo $wphr_we_ed1; ?>" size="20" /></td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td width="75%">
                  <?php _e('Description of Position:') ?>
                  <br /> <textarea name="wphr_we_desc1" cols="100" rows="6" id="wphr_we_desc1"><?php echo $wphr_we_desc1; ?></textarea>
                </td>
                <td width="25%" valign="bottom">
                  <p><a href="dont know what will come here">Add additional</a></p></td>
              </tr>
            </table>
                  
                  </div>                  


<div id="myDiv1">
<table width="100%"  border="0" cellpadding="0" id="wphr_we_table2">
              <tr>
                <td colspan="2"> <table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Employer:') ?>
                        <br /> <input name="wphr_we_employer2" type="text" id="wphr_we_employer2" value="<?php echo $wphr_we_employer2; ?>" size="40" />
                      </td>
                      <td width="25%">
                        <?php _e('Title:') ?>
                        <br /> <input name="wphr_we_title2" type="text" id="wphr_we_title2" value="<?php echo $wphr_we_title2; ?>" size="40" /></td>
                      <td width="25%">&nbsp;</td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td colspan="2"><table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Location:') ?>
                        <br /> <input name="wphr_we_location2" type="text" id="wphr_we_location2" value="<?php echo $wphr_we_location2; ?>" size="40" /></td>
                      <td width="25%">
                        <?php _e('Start date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_sd2" type="text" id="wphr_we_sd2" value="<?php echo $wphr_we_sd2; ?>" size="20" /></td>
                      <td width="25%">
                        <?php _e('End date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_ed2" type="text" id="wphr_we_ed2" value="<?php echo $wphr_we_ed2; ?>" size="20" /></td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td width="75%">
                  <?php _e('Description of Position:') ?>
                  <br /> <textarea name="wphr_we_desc2" cols="100" rows="6" id="wphr_we_desc2"><?php echo $wphr_we_desc2; ?></textarea>
                </td>
                <td width="25%" valign="bottom">
                  <p><a href="dont know what will come here">Add additional</a> | <a href="dont know what will come here">Remove Experience</a></p></td>
              </tr>
            </table>
                  
                  </div>

I have done some search on the web and came across this eexample, BUT it has a problem, it does not work in IE and I want to have a cross browser compatible solution:
http://www.quirksmode.org/dom/domform.html


note: Please notice the variables, they have have unique names when adding new fields.

Looking forward to some replies :)
LVL 7
ssdesignAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ssdesignAuthor Commented:
ok, let me make it a little easier :)

I figured out something meanwhile.

Here is the code,

BUT

When I add new fields, the formatting is going for a toss, can anyone figure this out why its behaving like this?

--------------------------------------------------------------------- code starts ----------------------------------------------------------

<script type="text/javascript">
<!--

function addEvent()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "<table width=\"100%\"  border=\"0\" cellpadding=\"0\" id=\"wphr_we_table"+num+"\"><tr><td colspan=\"2\"> ";
newdiv.innerHTML += "<table width=\"100%\"  border=\"0\" cellpadding=\"3\">";
newdiv.innerHTML += "<tr>";
newdiv.innerHTML += "<td width=\"25%\">" ;
newdiv.innerHTML += "Employer:";
newdiv.innerHTML += "<br /> <input name=\"wphr_we_employer"+num+"\" type=\"text\" id=\"wphr_we_employer"+num+"\" value=\"wphr_we_employer"+num+"\" size=\"40\" />";
newdiv.innerHTML += "</td>";
newdiv.innerHTML += "<td width=\"25%\">";
newdiv.innerHTML += "Title:";
newdiv.innerHTML += "<br /> <input name=\"wphr_we_title"+num+"\" type=\"text\" id=\"wphr_we_title"+num+"\" value=\"wphr_we_title"+num+"\" size=\"40\" /></td>";
newdiv.innerHTML += "<td width=\"25%\">&nbsp;</td><td width=\"25%\">&nbsp;</td>";
newdiv.innerHTML += "</tr></table></td></tr><tr>";
newdiv.innerHTML += "<td colspan=\"2\"><table width=\"100%\"  border=\"0\" cellpadding=\"3\"><tr><td width=\"25%\">";
newdiv.innerHTML += "Location:";
newdiv.innerHTML += "<br /> <input name=\"wphr_we_location"+num+"\" type=\"text\" id=\"wphr_we_location"+num+"\" value=\"wphr_we_location"+num+"\" size=\"40\" /></td>";
newdiv.innerHTML += "<td width=\"25%\">";
newdiv.innerHTML += "Start date: (mm/dd/yy)";
newdiv.innerHTML += "<br /> <input name=\"wphr_we_sd"+num+"\" type=\"text\" id=\"wphr_we_sd"+num+"\" value=\"wphr_we_sd"+num+"\" size=\"20\" /></td>";
newdiv.innerHTML += "<td width=\"25%\">";
newdiv.innerHTML += "End date: (mm/dd/yy)";
newdiv.innerHTML += "<br /> <input name=\"wphr_we_ed"+num+"\" type=\"text\" id=\"wphr_we_ed"+num+"\" value=\"wphr_we_ed"+num+"\" size=\"20\" /></td>";
newdiv.innerHTML += "<td width=\"25%\">&nbsp;</td>";
newdiv.innerHTML += "</tr></table></td></tr><tr>";
newdiv.innerHTML += "<td width=\"75%\">";
newdiv.innerHTML += "Description of Position:";
newdiv.innerHTML += "<br /> <textarea name=\"wphr_we_desc"+num+"\" cols=\"100\" rows=\"6\" id=\"wphr_we_desc"+num+"\">wphr_we_desc"+num+"</textarea>";
newdiv.innerHTML += "</td><td width=\"25%\" valign=\"bottom\">";
newdiv.innerHTML += "</td></tr></table>";
//newdiv.innerHTML = "Element Number "+num+" has been added! <a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove the div &quot;"+divIdName+"&quot;</a>";
ni.appendChild(newdiv);
}

function removeEvent(divNum)
{
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

//-->
</script>
<input type="hidden" value="0" id="theValue" />
<div id="myDiv">
<table width="100%"  border="0" cellpadding="0" id="wphr_we_table1">
              <tr>
                <td colspan="2"> <table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Employer:') ?>
                        <br /> <input name="wphr_we_employer1" type="text" id="wphr_we_employer1" value="<?php echo $wphr_we_employer1; ?>" size="40" />
                      </td>
                      <td width="25%">
                        <?php _e('Title:') ?>
                        <br /> <input name="wphr_we_title1" type="text" id="wphr_we_title1" value="<?php echo $wphr_we_title1; ?>" size="40" /></td>
                      <td width="25%">&nbsp;</td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td colspan="2"><table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Location:') ?>
                        <br /> <input name="wphr_we_location1" type="text" id="wphr_we_location1" value="<?php echo $wphr_we_location1; ?>" size="40" /></td>
                      <td width="25%">
                        <?php _e('Start date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_sd1" type="text" id="wphr_we_sd1" value="<?php echo $wphr_we_sd1; ?>" size="20" /></td>
                      <td width="25%">
                        <?php _e('End date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_ed1" type="text" id="wphr_we_ed1" value="<?php echo $wphr_we_ed1; ?>" size="20" /></td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td width="75%">
                  <?php _e('Description of Position:') ?>
                  <br /> <textarea name="wphr_we_desc1" cols="100" rows="6" id="wphr_we_desc1"><?php echo $wphr_we_desc1; ?></textarea>
                </td>
                <td width="25%" valign="bottom">
</td>
              </tr>
            </table>
                  
                  </div>
                  
                  <input type="hidden" value="0" id="theValue" />
                  <p><a href="javascript:;" onclick="addEvent();">Add additional</a></p>

--------------------------------------------------------------------- code ends ----------------------------------------------------------
REA_ANDREWCommented:
Cloning the Nodes are working in IE. I have made this example based on Quirksmode, which contains formatting in CSS too. Only Basic. Why do you need to compile the HTML in the javascript first?

<html>

<head>
<script language="javascript">
var counter = 0;

function moreFields()
{
      counter++;
      var newFields = document.getElementById('readroot').cloneNode(true);
      newFields.id = '';
      newFields.style.display = 'block';
      var newField = newFields.childNodes;
      for (var i=0;i<newField.length;i++)
      {
            var theName = newField[i].name
            if (theName)
                  newField[i].name = theName + counter;
      }
      var insertHere = document.getElementById('writeroot');
      insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;
</script>
<title>New Page 1</title>
<style>
body{
      font-family:verdana;
      font-size:70%;
}
input{
      font-family:verdana;
      font-size:80%;
}
select{
      font-family:verdana;
      font-size:90%;
}
textarea{
      font-family:verdana;
      font-size:90%;
      width:300px;
      height:150px;
}
.ReadNode{
      border:Black 1px Solid;
      background-color:LightBlue;
      margin:1%;
      padding:1%;
}
</style>
</head>

<body>
<div id="readroot" class="ReadNode" style="display: none">
      <p class="hr"> </p>

      <input type="button" value="Remove review" style="font-size: 10px"
            onClick="this.parentNode.parentNode.removeChild(this.parentNode);      "><br><br>

Category
      <select name="rankingsel_1">
            <option>Category</option>
      </select>
Brand
      <select name="rankingsel_1">
            <option>Brand</option>
      </select>
Product
      <select name="rankingsel_1">
            <option>Product</option>
      </select>
<br />
Marketing Text
      <textarea name="review_1">Short review</textarea>
</div>

<form>
<span id="writeroot"></span>

<input type="button" value="Give me more fields!" onClick="moreFields()">
<input type="button" value="Submit All!" onClick="moreFields()">
</form>

</body>

</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ssdesignAuthor Commented:
HI,
Thanks for the help.

I had just about finished the code when I saw that your method saves me a lot ot lines to write.

So i adopted to you code and heres what I have.

The fields are getting added and removed, but the values dont increment, all the new fields get same NAME and VALUE.

Can you help?

Here is my code based on your code:

-------------------------- code start -----------------------------------

<script type="text/javascript">
<!--
var counter = 0;
function moreFields()
{
counter++;
     var newFields = document.getElementById('myDiv').cloneNode(true);
     newFields.id = '';
     newFields.style.display = 'block';
     var newField = newFields.childNodes;
     for (var i=0;i<newField.length;i++)
     {
          var theName = newField[i].name
          if (theName)
               newField[i].name = theName + counter;
     }
     var insertHere = document.getElementById('writeroot');
     insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

//-->
</script>
<input type="hidden" value="0" id="theValue" />
<div id="myDiv" style="display: none">
<table width="100%"  border="0" cellpadding="0" id="wphr_we_table1">
              <tr>
                <td colspan="2"> <table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Employer:') ?>
                        <br /> <input name="wphr_we_employer1" type="text" id="wphr_we_employer1" value="wphr_we_employer1" size="40" />
                      </td>
                      <td width="25%">
                        <?php _e('Title:') ?>
                        <br /> <input name="wphr_we_title1" type="text" id="wphr_we_title1" value="wphr_we_employer1" size="40" /></td>
                      <td width="25%">&nbsp;</td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td colspan="2"><table width="100%"  border="0" cellpadding="3">
                    <tr>
                      <td width="25%">
                        <?php _e('Location:') ?>
                        <br /> <input name="wphr_we_location1" type="text" id="wphr_we_location1" value="wphr_we_employer1" size="40" /></td>
                      <td width="25%">
                        <?php _e('Start date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_sd1" type="text" id="wphr_we_sd1" value="wphr_we_employer1" size="20" /></td>
                      <td width="25%">
                        <?php _e('End date: (mm/dd/yy)') ?>
                        <br /> <input name="wphr_we_ed1" type="text" id="wphr_we_ed1" value="wphr_we_employer1" size="20" /></td>
                      <td width="25%">&nbsp;</td>
                    </tr>
                  </table></td>
              </tr>
              <tr>
                <td width="75%">
                  <?php _e('Description of Position:') ?>
                  <br /> <textarea name="wphr_we_desc1" cols="100" rows="6" id="wphr_we_desc1">wphr_we_employer1</textarea>
                </td>
                <td width="25%" valign="bottom">
</td>
              </tr>
            </table>
                  <input type="button" value="Remove review" style="font-size: 10px"
          onClick="this.parentNode.parentNode.removeChild(this.parentNode);     ">
                  </div>
                  <form>
                  <span id="writeroot"></span>
                  
                  <input type="hidden" value="0" id="theValue" />
                  <p><a href="javascript:;" onclick="moreFields();">Add additional</a><input type="button" value="Give me more fields!" onClick="moreFields()"></p>
                          </form>


----------------------- code end ------------------
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

REA_ANDREWCommented:
     for (var i=0;i<newField.length;i++)
      {
            var theName = newField[i].name
            if (theName)
                  newField[i].name = theName + counter;
      }

increments the name of the values with the counter variable. I tested it with mine and the names do change.  For the value, this goes off the physical set you have first, so what ever values are in the original master set, which you clone, this will then be used in the rest.  You can parse the dom tree to find a child node which is a text area for example and say its value = 0;
ssdesignAuthor Commented:
Hi,
I did crosscheck in IE as well as Firefox.

I used the firefox Developer Tool extension to view the Generated Source and it shows the same NAME for all generated fields.

Maybe I am missing something.

If you notice my code, I have used:

<script type="text/javascript">

If I use:
<script type="javascript">

I get a error saying:

moreFields() in not defined

Does this give you any clue to what might be wrong at my end?

Thanks again for your help.
Michel PlungjanIT ExpertCommented:

<script type="text/javascript"> is correct

<script type="javascript"> is not. perhaps you confuse it with



<script type="text/javascript" language="JavaScript">
ssdesignAuthor Commented:
HI,
I tested it but my code does not work whereas your code works :(

I will try to see where the problem is.

If I fail I will try to configure your file to display the way I want.

Will update you on how it works.

ssdesignAuthor Commented:
Ok, it looks like the HTML structure in my code is giving me the problem.

When I try to put all the fields without any TABLE TD TR etc. Everything works fine, but the layout is spoiled.

Is there a way to traverse through the HTML nodes and get everything inside it?

Is there something like:

hasChildNodes ???

Not sure how to use it within this code.

If you can solve this, I will give a 'A' rating to you :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.