[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 435
  • Last Modified:

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 :)
0
ssdesign
Asked:
ssdesign
  • 5
  • 2
1 Solution
 
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 ----------------------------------------------------------
0
 
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>
0
 
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 ------------------
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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;
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.
0
 
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">
0
 
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.

0
 
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 :)
0

Featured Post

Independent Software Vendors: 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!

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now