0

Take this code for example: 

var add = function() {
  var added = document.createElement("div");
  document.getElementById("ID").appendChild(added);
  added.setAttribute("id", "Task " + document.getElementById("ID").childElementCount);
  added.appendChild(document.createElement("input"));
  added.appendChild(document.createElement("br"));
};
<form id="ID">
  Name:
  <br>
  <input type="text" name="name">
  <br>
</form>
<button onclick="add()">Add</button>

Every time you click the button, a new input is created for the form. Is this the best way of making the number of form elements dynamic?

I looked into using HTML templates, but it didn't seem like there was a way to edit the ID of each individual additional element, which would be necessary for my applications.

Also, a subquestion: I'm using AngularJS and can't figure out how to add the bs-datepicker directive to my elements with JavaScript. How can I do that?

Here's an example of bs-datepicker which I know works:

<input type="text" class="form-control"
                                                                ng-model="options.fromDate"
                                                                max-date="{{options.toDate}}"
                                                                start-date="{{options.currentDateValue.toString()}}"
                                                                start-week="1" placeholder="From" bs-datepicker>
William Will
  • 47
  • 8
  • By dynamic do you mean you want the users to be able to add as many form inputs as they would like or do you want the page to show a certain amount of inputs based on a certain condition? – Timothy Fisher Aug 05 '16 at 17:58
  • 1
    Your code seems fine, depending on your context. Are you having a specific problem with that method? – showdev Aug 05 '16 at 17:59
  • 2
    What you showed as your code doesn't look like you are using Angular. In a real Angular app, you wouldn't really do it this way because you need Angular to understand any directives that you put on those fields (even a plan input type="text" is actually a directive). So you would need to use Angular's $compile service to attach the inputs to a scope and then process any directives on them. If you aren't using Angular for this, then as @showdev said, the way you are doing it is fine for vanilla javascript. – mcgraphix Aug 05 '16 at 18:03
  • @Timothy Fisher: Yessir. @showdev/mcgraphix: It just seems a little tedious. I made my example simple, but in my actual program, each of the additional fields represents an event, so they have a name, to/from date/time, people attending, etc. I was just wondering if there is a better way to do that. I am using AngularJS though, and everything works fine except the date. Originally, I was using bs-datepicker directive to select dates, but I'm not sure how to add that to a DOM element because it doesn't have a value. – William Will Aug 05 '16 at 18:13
  • Will your form be submitted through traditional HTML form submission? Of will the field values be read through JavaScript and submitted through AJAX? If the former, each input element must have a unique name attribute so it can be read on the server. The code shown above does not assign a "name" attribute to any of the input elements that are added dynamically. Also, your "id" attribute value contains a space character which is not permitted (http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) – Syntax Junkie Aug 05 '16 at 18:42
  • @RandallStewart I won't be using HTML form submission or AJAX, but I will be using REST services. Thank you for pointing out the flaws in my form! – William Will Aug 05 '16 at 18:51

0 Answers0