clone & counter JavaScript

Question

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>```

Answer 1 · 2015-01-21T07:40:23Z

January 21, 2015 7:40am

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.

Welcome to the Treehouse Community

Looking to learn something new?

Kyle Myers

Kyle Myers

clone & counter JavaScript

1 Answer

Ali M Malik

Ali M Malik

Kyle Myers

Kyle Myers