Jquery clone not functioning as expected

Question

I am working on a program that is not functioning as I am expecting it. I have a page that allows people to add multiple links to my application, but there is something going on under the hood that is not making logical sense.

The application uses JQUERY to add a new section with HTML inputs for an emoji, title, URL, and visibility. This runs whenever the user starts to type, so theoretically there could be unlimited links added.

On the surface, the script seems to duplicate and add new fields like it should. However, whenever I fill out the form and send the form data through POST method to a PHP page, the data inserted into the last duplicated section does not send at all.

Here is a screenshot of me filling out the form. Below is the output from that form generated through a simple php script of print_r($_POST). This shows where the google link is completely left out despite me typing it in correctly.

Array
(
    [method] => assign
    [assEmoji] => ✏️
    [title] => testing system
    [directions] => 
    [subID] => 1
    [points] => 
    [due] => 
    [attach] => Array
        (
            [1] => Array
                (
                    [linkEmoji] => 📎
                    [linkTitle] => Youtube
                    [linkURL] => https://youtube.com
                    [linkClass] => NULL
                )

            [2] => Array
                (
                    [linkEmoji] => 📎
                    [linkTitle] => 
                    [linkURL] => 
                    [linkClass] => NULL
                )

            [3] => Array
                (
                    [linkEmoji] => 📎
                    [linkTitle] => 
                    [linkURL] => 
                    [linkClass] => NULL
                )

        )

    [submitType] => scan
    [assType] => Assignment
)

Here is the code I am using to create the page.

  // This section handles adding new links to page //
  function appendSection() {
    $(this).off('change');
    const newSection = $(this).closest('section').clone();
    newSection.find('input, select').each((i, el) => {
      el.value = '';
      el.name = el.name.replace(/\[(\d)\]/, (match, p1) => `[${parseInt(p1) + 1}]`);
    });
    newSection.on('change', appendSection);
    $('.attachments').append(newSection);
  }
  $(".attachments section input").change(appendSection);

  // This section handles navigation //
  function nav(arg) {
    var destination = arg.dataset.nav;
    var pages = document.querySelectorAll("[data-page]");
    var nav = document.querySelectorAll("[data-nav]");

    for (i = 0; i < nav.length; i++) { // Remove the class 'active' if it exists
      nav[i].classList.remove('active')
    }
    arg.classList.add('active');

    for (i = 0; i < pages.length; i++) { // Hide/show the correct pages
      if (pages[i].dataset.page != destination) {
        pages[i].style.display = "none";
      } else {
        if (destination == 'basic') {pages[i].style.display = "flex";}
        if (destination != 'basic') {pages[i].style.display = "block";}
      }
    }
  }

  .modal {display: block !Important}

  .modal {
     display: none;
     position: fixed;
     z-index: 20;
     right: 0; top: 0;
     width: 100%; height: 100%;
     overflow: auto;
     background-color: rgba(0,0,0,0.4);
     -webkit-animation-name: fadeIn;
     -webkit-animation-duration: 0.4s;
     animation-name: fadeIn;
     animation-duration: 0.4s}

  .assignment-window{
    display: grid;
    position: fixed;
    overflow: hidden;
    padding: 10px;
    padding-bottom: 16px;
    box-sizing: border-box;
    width: 100vw; height: 70vh;
    bottom: 0; left: 0;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background-color: white;
    grid-template-rows: auto 1fr;
    grid-template-columns: 0.9fr 2.5fr;
    grid-template-areas:
      "asstop asstop"
      "assnav asscontent"}


  /* ----------[ASS TOP]---------- */
  .asstop {
    grid-area: asstop;
    padding: 24px 20px;
    box-sizing: border-box;
    border-bottom: 2px solid #581F98;}

  .asstop .title {
    display: flex;
    align-items: center;}

  .asstop .title input {
    flex: 1 1;
    font-size: 24px;
    border-radius: 8px;
    margin-right: 20px;
    border: 1px solid lightgray}

  .asstop select {
    outline: none;
    -webkit-appearance: none;
    padding: 12px 16px;
    font-size: 24px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid lightgray}

  .asstop button {
    margin-top: -5px;}


  /* ----------[ASS NAV]---------- */
  .assnav {
    grid-area: assnav;
    padding-top: 20px;
    padding-right: 10%;
    border-right: 1px solid lightgray}

  .assnav ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none}

  .assnav li {
    display: block;
    text-decoration: none;
    color: #484848;
    font-size: 20px;
    padding: 14px 20px;
    margin-bottom: 10px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;}
    .assnav li:hover {background-color: #F2F2F2}
    .assnav li.active {background-color: #EEEEEE}


  /* ----------[ASS CONTENT]---------- */
  .asscontent {
    grid-area: asscontent;
    display: flex;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box;
    overflow: scroll}

  .asscontent input, .asscontent select {
    flex: 1;
    outline: none;
    -webkit-appearance: none;
    padding: 8px 16px;
    font-size: 18px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid lightgray}


  /* ==== Basic Styling ==== */
  .asscontent .basic {
    display: flex;
    height: 100%;
    flex-direction: column}

  .asscontent .basic textarea {
    flex: 1;
    font-size: 18px;
    border-radius: 8px;
    box-sizing: border-box;}

  .asscontent .basic .config {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;}
    .asscontent .basic input {text-align: center;}
    .asscontent .basic .points {width: 80px;}


  /* ==== Attachment Styling ==== */
  .asscontent .attachments {display: none}

  .asscontent .attachments section {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid lightgray}


  /* ==== Delete Styling ==== */
  .asscontent .advanced {display: none}


  /* ==== Delete Styling ==== */
  .asscontent .delete {display: none;}

  .asscontent .delete ul {margin-bottom: 30px;}

  .asscontent .delete li {margin-bottom: 10px;}

    <form action='assign.int.php' method="post">
      <input type='hidden' name='method' value='assign'>
      <div class='modal'>
        <div class='assignment-window'>
          <div class='asstop'>
            <div class='title'>
              <select name='assEmoji'>
                <option>✏️</option>
                <option>💻</option>
                <option>📚</option>
                <option>💯</option>
                <option>🧪</option>
              </select>
              <input name='title' type='text' placeholder='Type assignment title..' required>
              <button class='button purple-btn'>Save Changes</button>
            </div>
          </div>
          <div class='assnav'>
            <ul>
              <li data-nav='basic' onclick='nav(this);' class='active'>Basic Setup</li>
              <li data-nav='attachments' onclick='nav(this);'>Attachments</li>
              <li data-nav='advanced' onclick='nav(this);'>Advanced Settings</li>
            </ul>
          </div>
          <div class='asscontent'>
            <div class='basic' data-page='basic'>
              <textarea name='directions' placeholder='Type assignment directions..'></textarea>
              <div class='config'>
                <section>
                  <span>Subject: </span>
                  <select name='subID'>
                    <option value='1'>Reading</option>
                    <option value='2'>Social Studies</option>
                    <option value='3'>Math</option>
                    <option value='4'>Science</option>
                    <option value='5'>Writing</option>
                  </select>
                </section>
                <section>
                  <span>Points:</span>
                  <input name='points' class='points' type='text'>
                </section>
                <section>
                  <span>Due Date:</span>
                  <input name='due' type='datetime-local'>
                </section>
              </div>
            </div>
            <div class='attachments' data-page='attachments'>
              <section>
                <div class='displayName'>
                  <select name='attach[1][linkEmoji]'>
                    <option>📎</option>
                    <option>🎬</option>
                    <option>📖</option>
                  </select>
                  <input name='attach[1][linkTitle]' placeholder='Title of website..' type='text'>
                </div>
                <div class='url'>
                  <input name='attach[1][linkURL]' placeholder='Insert website URL..' type='url'>
                </div>
                <div class='visible'>
                  <span>Visible: <span>
                  <select name='attach[1][linkClass]'>
                    <option value='NULL'>- All Students -</option><option value='1'>🟣 Reading/Social</option><option value='2'>🔴 Reading/Social</option><option value='3'>🔵 Reading/Social</option><option value='4'>🟢 Reading/Social</option>
                  </select>
                </div>
              </section>
            </div>
            <div class='advanced' data-page='advanced'>
              <section>
                <span>Submission: </span>
                <select name='submitType'>
                  <option value='scan'>Require students to scan.</option>
                  <option value='button'>Allow scanning or turn in button.</option>
                </select>
              </section>
              <section>
                <span>Assignment Type: </span>
                <select name='assType'>
                  <option>Assignment</option>
                  <option>Assessment</option>
                  <option>Daily Work</option>
                  <option>Quiz</option>
                  <option>Participation</option>
                  <option>Project</option>
                </select>
              </section>
            </div>
            <div class='delete' data-page='delete'>
              <p>Deleting the assignment? The following will happen: </p>
              <ul>
                <li>All recorded scores will be deleted.</li>
                <li>Student averages will adjust from the deleted scores.</li>
                <li>The assignment will be removed from student view.</li>
                <li>This action cannot be undone.</li>
              </ul>
              <button class='button grey-btn'>Cancel</button>
              <button class='button red-btn'>Permanently Delete</button>
            </div>
          </div>
        </div>
      </div>
    </form>

Any advice is greatly appreciated. What is going on?

Welcome to Stack Overflow. You have a ambiguous reference to this in the line, const newSection = $(this).closest('section').clone(); and the previous line as well. So .clone() would have nothing to act upon and would fail. Please review your Console for errors. — Twisty
– Twisty, Commented Sep 6, 2021 at 21:55
@Twisty Thank you! I'm still learning jquery, someone else on the forum was able to help me get this far. Could you help me understand how I could fix it? What would i need to reference instead? — Mathew
– Mathew, Commented Sep 6, 2021 at 21:59
You will need a subject to act upon. I would advise passing in an Object instead of using this or use the event to help target, like $(event.target). — Twisty
– Twisty, Commented Sep 6, 2021 at 22:01
@Twisty I guess I'm not understanding what I would even change. The script adds on new sections as it should, the information just does not pass correctly. I assume this has something to do with an error in the naming of the duplicated tags. Any examples or resources you could point me towards? — Mathew
– Mathew, Commented Sep 6, 2021 at 22:12

Harry · Accepted Answer · 2021-09-12 17:08:36Z

@Mathew Try this

$('.section-group-js').on('keyup', 'input[type="url"]', function() {

        var section = $(this).closest('section');
        if (section.is(':last-child')) {
            var index = section.data('index');
            var newSection = section.clone();

            newSection.find('input').val('');
            newSection.data('index', index + 1);
            newSection.attr('data-index', index + 1);
            
            updateAttributes(newSection, 'title', index);
            updateAttributes(newSection, 'url', index);
            updateAttributes(newSection, 'visible', index);
            
            newSection.insertAfter(section);
        }
    })

    function updateAttributes( newSection, key, index ) {
        newSection.find(`[name="attach[${index}][${key}]"]`).attr('name', `attach[${index+1}][${key}]`);
    }

.modal {
            display: block !Important
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 20;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            -webkit-animation-name: fadeIn;
            -webkit-animation-duration: 0.4s;
            animation-name: fadeIn;
            animation-duration: 0.4s
        }

        .assignment-window {
            display: grid;
            position: fixed;
            overflow: hidden;
            padding: 10px;
            padding-bottom: 16px;
            box-sizing: border-box;
            width: 100vw;
            height: 85vh;
            bottom: 0;
            left: 0;
            border-top-left-radius: 40px;
            border-top-right-radius: 40px;
            background-color: white;
            grid-template-rows: auto 1fr;
            grid-template-columns: 0.9fr 2.5fr;
            grid-template-areas: "asstop asstop""assnav asscontent"
        }


        /* ----------[ASS TOP]---------- */

        .asstop {
            grid-area: asstop;
            padding: 24px 20px;
            box-sizing: border-box;
            border-bottom: 2px solid #581F98;
        }

        .asstop .title {
            display: flex;
            align-items: center;
        }

        .asstop .title input {
            flex: 1 1;
            font-size: 24px;
            border-radius: 8px;
            margin-right: 20px;
            border: 1px solid lightgray
        }

        .asstop select {
            outline: none;
            -webkit-appearance: none;
            padding: 12px 16px;
            font-size: 24px;
            box-sizing: border-box;
            border-radius: 8px;
            border: 1px solid lightgray
        }

        .asstop button {
            margin-top: -5px;
        }


        /* ----------[ASS NAV]---------- */

        .assnav {
            grid-area: assnav;
            padding-top: 20px;
            padding-right: 10%;
            border-right: 1px solid lightgray
        }

        .assnav ul {
            margin: 0;
            padding: 0;
            overflow: hidden;
            list-style-type: none
        }

        .assnav li {
            display: block;
            text-decoration: none;
            color: #484848;
            font-size: 20px;
            padding: 14px 20px;
            margin-bottom: 10px;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 40px;
        }

        .assnav li:hover {
            background-color: #F2F2F2
        }

        .assnav li.active {
            background-color: #EEEEEE
        }


        /* ----------[ASS CONTENT]---------- */

        .asscontent {
            grid-area: asscontent;
            display: flex;
            flex-direction: column;
            padding: 30px;
            box-sizing: border-box;
        }

        .asscontent input,
        .asscontent select {
            flex: 1;
            outline: none;
            -webkit-appearance: none;
            padding: 8px 16px;
            font-size: 18px;
            box-sizing: border-box;
            border-radius: 8px;
            border: 1px solid lightgray
        }


        /* ==== Basic Styling ==== */

        .asscontent .basic {
            display: none
        }

        .asscontent .basic textarea {
            flex: 1;
            font-size: 18px;
            border-radius: 8px;
            box-sizing: border-box;
        }

        .asscontent .basic .config {
            display: flex;
            justify-content: space-between;
            padding-top: 20px;
        }

        .asscontent .basic input {
            text-align: center;
        }

        .asscontent .basic .points {
            width: 80px;
        }


        /* ==== Attachment Styling ==== */

        .asscontent .attachments section {
            display: flex;
            justify-content: space-between;
            padding-bottom: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid lightgray
        }

<head>
    <link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <nav></nav>
</head>


<div class="modal">
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div class="assignment-window">
        <div class='asstop'>
            <div class='title'>
                <select>
                    <option>✏️</option>
                    <option>💻</option>
                    <option>📚</option>
                    <option>💯</option>
                    <option>🧪</option>
                </select>
                <input type='text' placeholder='Type assignment title..' value=''>
                <button type="submit" class='button purple-btn'>Save Changes</button>
            </div>
        </div>
        <div class='assnav'>
            <ul>
                <li>Basic Setup</li>
                <li>Attachments</li>
                <li>Advanced Settings</li>
                <li>Delete Assignment</li>
            </ul>
        </div>
        <div class='asscontent'>
            <div class='attachments section-group-js'>
                <section data-index="1">
                    <div class='displayName'>
                        <span> Title: </span>
                        <input name='attach[1][title]' type='text'>
                    </div>
                    <div class='url'>
                        <span>URL: <span>
                                <input name='attach[1][url]' type='url'>
                    </div>
                    <div class='visible'>
                        <span>Visible: <span>
                                <select name='attach[1][visible]'>
                                    <option>- All Students -</option>
                                    <option>🟣 Reading/Social</option>
                                </select>
                    </div>
                </section>
            </div>
        </div>
    </div>
    </form>
</div>

    <?php

    if ( isset($_POST['attach']) ) {
        echo "<pre>";
        print_r($_POST);
        echo "</pre>";
        die;
    }
?>

And the output is below

Thank you! Any idea why this would break whenever I combine it with AJAX? Question here: stackoverflow.com/questions/69110183/…

Collectives™ on Stack Overflow

Jquery clone not functioning as expected

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related