Javascript/add_remove.html at master · mattmonsen/Javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){

    var counter = 1;

    $("#addButton").click(function () {

        if(counter>3){
            alert("Only 3 uploads allowed.");
            return false;
        }

        var newFormDiv = $(document.createElement('div'))
         .attr("id", 'FormDiv' + counter);

        newFormDiv.append().html(
  '<p><strong>File Description: </strong><em style="color: red;">(REQUIRED)</em></p>' +
  '<textarea rows="2" cols="60" name="desc_' + counter + '"></textarea>' +
  '<p> Select a Document Permission: </p>' +
  '<select name="permissions_' + counter + '">' +
  '  <option value="tos">ToS/Legal</option>' +
  '  <option value="billing">Billing</option>' +
  '  <option value="verifiers">Verification</option>' +
  '  <option value="other" selected="selected">Unrestricted</option>' +
  '</select>' +
  '<p> Select a file: </p>' +
  '<input size="30" type="file" name="file_' + counter + '" /><br/>'
        );

        newFormDiv.appendTo("#FormGroup");

        counter++;
     });

     $("#removeButton").click(function () {
    if(counter==2){
          alert("Cannot remove any more.");
          return false;
       }

    counter--;

        $("#FormDiv" + counter).remove();

     });

    $("#addButton").trigger('click');

  });

</script>

</head>
<body>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<div id='FormGroup'>

</div>
</body>
</html>