Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Kyle Myers
Kyle Myers
4,107 Points
Posted by Kyle Myers
Kyle Myers
4,107 Points

clone & counter JavaScript

So I have this form that will clone when you hit new, I would like to add a counter to it that will count up when you click new. Can get the clone to work but cant get the counter to. Here's my code.

<head>
<script type="text/javascript" src="script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("form:first").clone(true));
  $("body").append($("button:first").clone(true));
  });

});
</script>
<script>
function modify_qty(val) {
    var qty = document.getElementById('qty').value;
    var new_qty = parseInt(qty,1) + val;

    if (new_qty < 0) {
        new_qty = 1;
    }

    document.getElementById('qty').value = new_qty;
    return new_qty;
}

</script>

 <style>

 h1 {
  text-align: center;
 }

 form {
  max-width: 50%;
  margin: 10px auto;
  padding: 20px 30px;
  border-width: 2px;
 border-style: dotted;
  border-radius: 30px;
 border-color: skyblue;
}

label {
  display: block;
  margin-top: 15px;
}

input,textarea,select {
 background: #DfDfDf;
 width: 100%;
}

textarea {
 height: 100px;
}

#doc {
  max-width: 40px;
}
  </style>
  <title></title>

</head>
<body>
     <form>    
   <h1>Count Up this form!</h1>
   <label for"qty">TICKET#</label>
  <input id="qty" value="0" >
  <label for="NLAPP">NLAPP:</label>
  <input type="text" id="NLAPP" name="user_nlapp">
  <label for="CUPI">CUPI:</label>
  <input type="text" id="CUPI" name="user_cupi">
   <label for="notes">Notes:</label>
  <textarea id="notes" name="user_notes"></textarea>
  <label for="temp">Template:</label>
  <input type="text" id="temp" name="doc_temp">
  <label for="sblah">Sblah:</label>
  <input type="text" id="sblah" name="doc_sblah">
  <label for="group">Group:</label>
  <input type="text" id="group" name="doc_group">
  <label for="doc">Doc#</label>
  <input type="text" id="doc" name="doc_num">
 </form>
 <button type="button" id="num" >NEW</button>

</body>
</html>```

1 Answer

Ali M Malik
Ali M Malik
33,293 Points

Sorry, my computer is about to die, so will keep this short. No need to complicate things. First check the val in the last form that exists. add 1 to it and you have your next index. then assign the next index to the last form after you add a new one.

Check this out

http://codepen.io/jxtposed/full/WbjKGz/

http://codepen.io/jxtposed/pen/WbjKGz

Hope this helps.