We Keep Coding

How can I upload multiple files in html form without selecting all at once?

Hi I am developing a website where it has form which should be able to submit multiple files. However the requirement is select files one by one so the multiple attribute in file input would not do. I tried to store the files in a array in javascript and then set it to a hidden input but that doesnt work as an array it goes as a object. Please let me know a work around for the problem. TIA.
The code I tried
javascript:
var selectedfiles;
let filetosend=[];
$('#file').change(function(){
var file=this.files[0];
selectedfiles=document.querySelector("#selectedFiles");
selectedfiles.innerHTML +=file.name+'<br>';
filetosend.push(file);
var files=$('#allfiles').val();
$('#allfiles').val(filetosend);
});
html:
<div class="form-group ">
<div class="col-md-4">
<label>Documents:</label><br>
</div>
<div class="col-md-8 upload-file-r">
<input type="file" id="file" name="file" >
<input type="hidden" id="allfiles" name="allfiles[]" >
</div>
</div>

How to dynamically add waypoints in Angular along with auto complete address?

<div [hidden]="!showWaypoint" #waypoint>
<div class="form-group label-floating">
<label class="control-label">Waypoint</label>
<input type="text" class="form-control search-address" name = "waypoint" placeholder=" " [(ngModel)]="wayPointInput" #stop>
</div>
</div>
I want to clone this entire portion, just like appending when i am clicking on add waypoint. I Dont want to use structural directives like *ngFor.
I have also consoled this
#ViewChild('waypoint') wp;
console.log(this.wp.nativeElement);
but I dont know how to append it along with the change in ngModel name so that after submitting I get a set of data in an array.

HTML data parsing from DIV container

As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.

If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.

creating dynamic forms using ng-repeat

Hello everyone I need to create some dynamic forms so users can configure feeds to their specification.
I have used ng-repeat to do the following:
For each feed a user needs to configure a new tab is created
for each property a feed has a label and input textbox is created.
Markup:
<tabset>
<tab ng-repeat="feed in feeds" heading="{{feed.heading}}">
<form role="form">
<div class="row" ng-repeat="property in feed.properties">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<span>{{property.name}}</span>
</span>
<input type="text" class="form-control" value="{{property.value}}">
</div>
</div>
</div>
</form>
</tab></tabset>
This works just fine with the backing json that I have however I am wondering what the accepted way of capturing the data for this kind of use case, obviously I won't know how many feeds or properties each feed has so I suppose I need to bind this to an array in some way.
The question is how?

use ng-model
<input type="text" class="form-control" ng-model="property.value">
This way the textbox is bound to property.value. angular automatically updates property.value when you change the text in the textbox. You can use it in your JS just like any other variable. That's the beauty of angular.

JQuery select on <script></script> elements

I have the following script used in html.twig page:
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/external/jquery/jquery.js')}}"></script>
<script type="text/javascript" src="{{asset('/jquery-ui-1.11.2/jquery-ui.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/jeoquery.js')}}"></script>
<script type="text/html" id="my_prototype">
<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label for="my_date">Date</label>
<input type="text" id="my_date" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>
</script>
My question is: How can I select "my_date" in jquery ? I wrote this, but it doesn't work:
$('#my_date').datepicker();
Thanks for your help,

Can you do the same with a jQuery object rather than a prototype?
e.g.: (I removed the id attributes so you can have more than one)
var $proto = $('<div class="form-horizontal">
<div class="form-group">
// my first textarea
</div>
<div class="form-group">
// my second textarea
</div>
<div class="form-group">
// my first input
<label>Date</label>
<input type="text" class="date_field" name="my_datename" maxlength="10" class="form-control" />
</div>
</div>");
This gives you a DOM structure you can insert where you need to.
Plus you can use
$proto.find('.date_field').datepicker();
...or you may have to insert it first and then call the datepicker extension.

I'm guessing you've put these tags between script tags because you're using it as a template.
Applying jquery-ui datepicker works on actual dom elements.
So you need to first apply your template and generate the "real" elements, then apply the datepicker.
Edit: and watch what happens with the id, when you generate multiple forms, you shouldn't have the same id multiple times. If it's transformed in something like "my_date_1", "my_date_2", maybe you're better off using a dedicated class for identifying the datepicker inputs instead of the id.