Develop Reference

How to make dateTime picker as required field in moment & AngularJs

I have one form that includes jQuery moment.js date-time picker I need to make this field required and disable the submit button until date time is not been picked by the user.
However, the approach that I am following is not working.
Here is my code -
<form name="myForm">
<div ng-show="myData.type==='PHONE'" class="col-md-12">
<div ng-if="myData.condition1 ==='something'" class="position-relative form-group">
<label for="email" class="">First Value</label>
<select name="firstValue"
id="firstValue"
ng-model="Data.firstValue"
class="form-control" required>
<option value="none">None</option>
<option value="done">Done</option>
</select>
</div>
<div ng-if="myData.condition2==='somethingElse'" class="position-relative form-group"><label
for="email"
class="">Second Value</label>
<input name="secondValue"
id="secondValue"
ng-model="Data.secondValue"
class="form-control" required>
</div>
<div ng-show="myData.condition3==='importantCondition'" class="position-relative form-group">
<label class="w-100" for="email">Third Value i.e Date & Time </label>
<div class="input-group date" id="thirdValue">
<input type="text" class="form-control" required placeholder="MM/DD/YYYY HH:MM:SS A"/>
<div class="input-group-addon input-group-append">
<div class="input-group-text">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
</div>
</div>
<div ng-if="myData.type==='EMAIL'" class="col-md-12">
//Other conditions
</div>
<div class="col-md-12">
<input id="btn" class="btn btn-success btn-block" type="submit" ng-disabled="myForm.$invalid" value="Submit" ng-click="submitData(Data)">
</div>
</form>
<script>
$(document).ready(function(){
$('#thirdValue').datetimepicker({
"keepOpen":false,
"format": 'MM/DD/YYYY HH:mm:ss A',
"useCurrent": false,
"sideBySide": false,
"widgetPositioning": {
horizontal: 'right',
vertical: 'bottom'
},
"icons": {
time: "fa fa-clock-o",
date: "fa fa-calendar",
}
}).on("dp.change", function (e) {
var scope = angular.element(document.getElementById("angularController")).scope();
if($('#thirdValue').datetimepicker('date')!==null) {
scope.Data.dateTime = $('#thirdValue').datetimepicker('date').utc()
var temp = $('#thirdValue').datetimepicker('date').utc()
scope.$apply();
}
});
})
</script>
I want submit button to remain disabled until I don't select values for all the required fields.

How to get values from input boxes and save to database with button click angular

I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}

Serialize data in AJax

I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>

Bootstrap validation states with file upload

I used bootstrap to return feedback to user about upload result.
So when the upload go well I use green success feedback, otherwise I return red error feedback.
But if he push browse button I would like to return to no feedback input tag, how can i do it?
This is part of my code:
<form class="input-group col-xs-12" method="post"
enctype="multipart/form-data" th:action="#{/file/excelFileRead}">
<div class="btn btn-primary btn-file col-xs-2">
<!-- Using accept the browse window allows only excel files -->
Browse… <input type="file" name="file"
accept=".xls, .xlsx, .xlsm" />
</div>
<!-- Manage success message -->
<div th:if="${opened == 'true'}">
<div class="form-group has-success has-feedback col-xs-8">
<input type="text" class="form-control" readonly="readonly"
id="inputSuccess2" aria-describedby="inputSuccess2Status"
th:value="${fileName}"> <span
class="glyphicon glyphicon-ok form-control-feedback"
aria-hidden="true"></span> <span id="inputSuccess2Status"
class="sr-only">(success)</span>
<label class="control-label"
for="inputSuccess2" th:text="${successMessage}"></label>
</div>
</div>
<div th:if="${opened == 'false'}">
<div class="form-group has-error has-feedback">
<input type="text" class="form-control" readonly="readonly"
id="inputError2" th:value="${fileName}"
aria-describedby="inputError2Status"> <label
class="control-label" for="inputError2"
th:text="${errorMessage}"></label> <span
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span> <span id="inputError2Status"
class="sr-only">(error)</span>
</div>
</div>
<!-- <div th:if="${opened == null}">
<div class="col-xs-8">
<input type="text" class="form-control" readonly="readonly"
th:value="${fileName}" />
</div>
</div>-->
<div class="col-xs-2">
<input type="submit" class="btn btn-info" value="Open" />
</div>
</form>

How to identify form inputs in mutli forms page with AngularJS

I have got a page with some forms with diffirent types of inputs.
My form are function of a list of events.
<div class="event-group" ng-repeat="event in events">
<b>Event {{ event.id }} </b>
<fieldset>
<!-- Title -->
<label>Title : </label>
<input type="text" name="event.title" class="form-control" ng-model="event.title" required >
<!-- Month -->
<label>Month</label>
<input type="text" name="event.month" class="form-control" ng-model="event.mois" required>
<!-- Date -->
<label>Date</label>
<input type="text" name="event.date" class="form-control" ng-model="event.date" required >
<!-- Hour -->
<label>hour</label>
<input type="text" name="event.hour" class="form-control" ng-model="event.hour" required>
<!-- Description -->
<div id="description-group" class="form-group">
<label>Description</label>
<textarea type="text" name="description" class="form-control" ng-model="event.description" required></textarea>
</div>
</fieldset>
<input type="button" class="btn btn-into btn-lg btn-right" value="Edit"></input>
</div>
The problem is about how to disable or enable one form. I want to let the oportunity to the user to enable inputs in one form, change one value and finally update changes.
To sum up, I have got a list of forms and I want my "Edit" button to enable inpus from only one form. I have got one edit button per form.
I would like to do the same to hide/show some buttons about saving/deleting when the user chose to edit on form.
How can I identify each input or each button from different forms ?

Here is the answer :
<div id="result">
<div class="event-group" ng-repeat="event in events">
<hr />
<b>Evenement {{ event.id }} </b>
<button class="btn btn-default" ng-click="isEditModeEnabled = !isEditModeEnabled">Edit</button>
<fieldset ng-disabled="!isEditModeEnabled">
<label>Title : </label>
<input type="text" name="event.title" class="form-control" ng-model="event.titre" required > <!-- OR disabled="disabled" -->
<!--<span class="help-block"></span>-->
<!-- Month -->
<label>Month</label>
<input type="text" name="event.month" class="form-control" ng-model="event.month" required>
<!-- Date -->
<label>Date</label>
<input type="text" name="event.date" class="form-control" ng-model="event.date" required >
<!-- Hour -->
<label>Heure</label>
<input type="text" name="event.hour" class="form-control" ng-model="event.heure" required>
<!-- Description -->
<div id="description-group" class="form-group">
<label>Description</label>
<textarea type="text" name="description" class="form-control" ng-model="event.description" required></textarea>
</div>
</fieldset>
<div collapse="!isEditModeEnabled">
<input type="button" class="btn btn-into btn-lg btn-right" value="Save" ng-click="updateThis(event.id,event.title,event.month,event.date,event.hour,event.description)"></input>
<input type="button" class="btn btn-into btn-lg btn-right" value="Delete" ng-click="deleteThis(event.id)"></input>
</div>
<hr />
</div>
</div>
I tought that we had to change the variable name isEditModeEnabled to avoid overlaps between different forms.