CODEWITHSUNDEEP
javascriptjquery
CaptObvious42
CaptObvious42

Reputation: 33

Jquery Clone Issue with Cloning Form

Okay, I'm trying to figure out how to duplicate a form. I was looking at the example from Alex from here: Clone form and increment ID. However, when I click the button, nothing happens.

Here's the HTML

<!DOCTYPE html>
<head>
<script src="jquery-1.11.3.js"></script>
<script src="dup.js"></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>
<form id="testForm" name="testForm">
  <input type="button" value="Input Button" id="button"/>
  <input type="checkbox" id="checkbox"/>

  <input type="file" id="file"/>
  <input type="hidden" id="hidden"/>
  <input type="image" id="image"/>

  <input type="password" id="password"/>
  <input type="radio" id="radio"/>
  <input type="reset" id="reset"/>

  <input type="submit" id="submit"/>
  <input type="text" id="text"/>
  <select id="select-one"><option>Option</option></select>

  <textarea id="textarea"></textarea>
  <button id="submit">Button</button>
</form>
<button id="add" name="add">Duplicate</button>
</body>
</html>

And here's the Javascript:

//Dupe form and append number every id attribute
(function() {

    var count = 0;

    $('#add').click(function() {

        var source = $('testForm'),
            clone = source.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + count;
        });

    clone.insertBefore(this);

    count++;
});
})();

Its pretty much copy and pasted from the previous answer. Am I missing something?

[edit] He you go: https://jsfiddle.net/3csjoqb3/. It still doesn't work for some reason, even with the fix.

Upvotes: 0

Views: 74

Answers (1)

chazsolo
chazsolo

Reputation: 8514

You're missing the hash for your id selector

var source = $('testForm'),

should be

var source = $('#testForm'),

Upvotes: 1

Related Questions