SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    copy div class and change input name value (was "noob question")

    How do i copy a div class with forms and change the name value in the inputs?


    Trying to pick up a little bit of the javascript magic.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi lajkonik86,

    Please be more specific about what you want to do. Show us the html that you want to work with.

  3. #3
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this

    PHP Code:
    <form>
    <
    input name=first>
    <
    input name=second>
    <
    div class="pictures"> (Something which we could need multiple times)
    <
    input name=third[1]>
    <
    input name=fourth[1]>
    </
    div>
    <
    a href="Javascript:increaseformclass('pictures')">Add another</a>

    <
    div class="links"> (Something which we could need multiple times)
    <
    input name=fifth[1]>
    <
    input name=sixth[1]>
    </
    div>
    <
    a href="Javascript:increaseformclass('links')">Add another</a>

    </
    form
    Now i would like the increaseformclass function to take for instance the links class, increase the number in the input fields' name and insert it before the link or after the last div class links


    Thanks,

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can the first DIV of each type have an ID?

    Do you have to have names like 'first', 'second', etc?

    Have you tried to do it yet?

  5. #5
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im trying to understand how to best write this function.
    I don't understand javascript so its hard to see what would be the best way to write the function.

    Where do i store the number (javascript var, read it from html class, count from classes)
    How do i store the html to be inserted (use a getelementbyid something, store the html in the javascript)

    Im generally confused how to set it up.


    Reality is a bit different than above actually. Im using tables for the form.

  6. #6
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My life is getting a bit simpler since i don't really need the numbers

    if i just put the name to postal[] it will be just as good as without the numbers.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reality is a bit different than above actually. Im using tables for the form.
    Then I can take some liberties with what you've posted...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Javascript Demo From Cross-Browser.com</title>
    <style type='text/css'>
    #picCon, #lnkCon {
      width:50&#37;;
      margin:.5em;
      padding:.5em;
      border:1px dotted #900;
    }
    .picCls {
      margin:.5em;
      padding:.5em;
      border:1px dotted #090;
    }
    .lnkCls {
      margin:.5em;
      padding:.5em;
      border:1px dotted #009;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      document.getElementById('picBtn').onclick = addFormClass;
      document.getElementById('lnkBtn').onclick = addFormClass;
    }
    function addFormClass()
    {
      var n = 'pic';
      if (this.id == 'lnkBtn') {
        n = 'lnk';
      }
      var d = document.createElement('div');
      d.className = n + 'Cls';
      var i = document.createElement('input');
      i.name = 'postal[]';
      d.appendChild(i);
      i = document.createElement('input');
      i.name = 'postal[]';
      d.appendChild(i);
      document.getElementById(n + 'Con').appendChild(d);
    }
    </script>
    </head>
    <body>
    
    <form>
    
    <div id='picCon'>
    <div class='picCls'><input name='postal[]'><input name='postal[]'></div>
    </div> <!-- end picCon -->
    <p><input id='picBtn' type='button' value='Add another Pic'></p>
    
    <div id='lnkCon'>
    <div class='lnkCls'><input name='postal[]'><input name='postal[]'></div>
    </div> <!-- end lnkCon -->
    <p><input id='lnkBtn' type='button' value='Add another Lnk'></p>
    
    </form>
    
    </body>
    </html>

  8. #8
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whow that's nice. For me studying your code was a very nice javascript tutorial

    How would i do the inserting part in a table.
    Since a table has tbody as a child and tbody has a huge number of <tr> as childs. The links are halfway in the table and the pictures at the bottom. How do I get it to insert behind the last link? can i use the insertBefore function or a customer insertAfter which i've seen on the web?

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whow that's nice. For me studying your code was a very nice javascript tutorial
    I consider that a great compliment! Thank you very much!

    I'm taking a look at your question - but to be honest, you should have posted "relevant" html to begin with.

  10. #10
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So...

    Show us the html that you want to work with.


  12. #12
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, Here we go:

    Html for the locations:
    PHP Code:
      <tr><td></td><td><b>Vestiging 1</b></td></tr>
      <
    tr class="locationtr1">
        <
    td>Straat: <br><span class="subtext"></span></td>
        <
    td><input type="text" name="street[]" size="20"></td>
        <
    td colspan="2"><input type="text" name="number[]" size="5"></td>
      </
    tr>
      <
    tr class="locationtr2">
        <
    td id="postcode">Postcode: <br><span class="subtext"></span></td>
        <
    td><input type="text" name="postal[]" size="4" maxlength="4"> <input type="text" name="postal2[]" size="2" maxlength="2"></td>
        <
    td>Stad: </td>
        <
    td><input type="text" name="city[]" size="15"></td>
      </
    tr>
      <
    tr class="locationtr3">
        <
    td>Telefoon: <br><span class="subtext"></span></td>
        <
    td colspan="3"><input type="text" name="tel[]" size="15"></td>
      </
    tr
    Html for the pictures:
    PHP Code:
    <tr class="foto"><td></td><td><input type="file" name="foto[]" size="15"></td></tr
    i didn't specify tbody
    and the table id=register


    Thanks

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please be specific about what you want. I assume...

    The form starts with the initial 4 rows (Html for locations) and when the user does something (what?) then we will duplicate those 4 rows and insert them somewhere (where?). Now how does the Html for pictures fit into this?

    Am I right? Please clarify.

  14. #14
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok the use clicks a link `add one more location`
    or `add one more picture`

    for the location the html for the location needs to be inserted after where it is right now.

    For the pictures the html for the pictures needs to be inserted after where it is right now.

    Instead of saying insertAfter the current location you could also use insertBefore the link stating to increase it. The html of the link to increase it is as follows:

    <tr id="addlocation"><td></td><td><br>
    <a href="javascript:addlocation()">+ Voeg nog een locatie toe.</a>
    </td></tr>

    or

    <tr id="addpicture"><td></td><td><br>
    <a href="javascript:addpicture()">+ Voeg nog een foto toe.</a>
    </td></tr>


    thanks for the help!

  15. #15
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I only used innerHTML because I just wanted to finish this proof of concept. If it was mine I would use 'createElement' instead.

    Everything is not finished. I've left the remainder for you to do.

    Look closely at my changes to your html (which is invalid).

    There are form-submission issues with dynamically created form controls (esp. IE). Be sure to test well.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Javascript Demo From Cross-Browser.com</title>
    <style type='text/css'>
    table#register {
      border:1px solid #900;
    }
    table#register td {
      border:1px dotted #009;
    }
    table#register td.vestiging {
      font-weight:bold;
    }
    </style>
    <script type='text/javascript'>
    
    var vestiging = 1;
    
    window.onload = function()
    {
      document.getElementById('btnAddLoc').onclick = addLoc;
      document.getElementById('btnAddPic').onclick = addPic;
    }
    
    function addLoc()
    {
      var tbl, trAddLoc, tr, td, idx;
      tbl = document.getElementById('register');
      trAddLoc = document.getElementById('trAddLoc');
      idx = trAddLoc.rowIndex - 3;
    
      // Vestiging TR
      ++vestiging;
      tr = tbl.insertRow(trAddLoc.rowIndex);
      td = tr.insertCell(-1);
      td = tr.insertCell(-1);
      td.className = 'vestiging';
      td.appendChild(document.createTextNode('Vestiging ' + vestiging));
      td.colSpan = 3;
    
      // locationtr1 TR
      tr = tbl.insertRow(trAddLoc.rowIndex);
      tr.className = 'locationtr1';
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[0].innerHTML;
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[1].innerHTML;
      td = tr.insertCell(-1);
      td.colSpan = 2;
      td.innerHTML = tbl.rows[idx].cells[2].innerHTML;
    
      // locationtr2 TR
      ++idx;
      tr = tbl.insertRow(trAddLoc.rowIndex);
      tr.className = 'locationtr2';
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[0].innerHTML;
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[1].innerHTML;
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[2].innerHTML;
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[3].innerHTML;
    
      // locationtr3 TR
      ++idx;
      tr = tbl.insertRow(trAddLoc.rowIndex);
      tr.className = 'locationtr3';
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[0].innerHTML;
      td = tr.insertCell(-1);
      td.innerHTML = tbl.rows[idx].cells[1].innerHTML;
      td.colSpan = 3;
    }
    
    function addPic()
    {
    }
    </script>
    </head>
    <body>
    
    <form>
    
    <table id='register'>
    <tr><td></td><td colspan='3' class='vestiging'>Vestiging 1</td></tr>
    <tr class="locationtr1">
      <td>Straat: <br><span class="subtext"></span></td>
      <td><input type="text" name="street[]" size="20"></td>
      <td colspan="2"><input type="text" name="number[]" size="5"></td>
    </tr>
    <tr class="locationtr2">
      <td id="postcode">Postcode: <br><span class="subtext"></span></td>
      <td><input type="text" name="postal[]" size="4" maxlength="4"> <input type="text" name="postal2[]" size="2" maxlength="2"></td>
      <td>Stad: </td>
      <td><input type="text" name="city[]" size="15"></td>
    </tr>
    <tr class="locationtr3">
      <td>Telefoon: <br><span class="subtext"></span></td>
      <td colspan="3"><input type="text" name="tel[]" size="15"></td>
    </tr>
    
    <tr id="trAddLoc"><td></td><td colspan='3'><input id='btnAddLoc' type='button' value='+ Voeg nog een locatie toe'></td></tr>
    
    <tr class="foto"><td></td><td colspan='3'><input type="file" name="foto[]" size="15"></td></tr>
    
    <tr id="trAddPic"><td></td><td colspan='3'><input id='btnAddPic' type='button' value='+ Voeg nog een foto toe'></td></tr>
    
    </table>
    
    </form>
    
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •