We Keep Coding

How ng multi select dropdown work it form dirty

I use a lib in npm Angular Multiselect Dropdown
How I can hide div alert depend on form dirty or not. My problem is when I load page and my selectedAuthors is put into ng multi select dropdown this makes form dirty.
<div class="col-8">
<div class="alert alert-warning" *ngIf="editForm.dirty">
<strong>Every thing not saved will be lost</strong>
</div>
</div>
<form #editForm='ngForm' id='editForm' (ngSubmit)="updateBook()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="title" [(ngModel)]="book.title" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" />
</div>
<div class="form-group row">
<div class="col-sm-2">Authors</div>
<div class="col-sm-6">
<div>
<ng-multiselect-dropdown [placeholder]="'Choose Author'" [settings]="dropdownAuthorSettings"
[data]="listAuthors" [(ngModel)]="selectedAuthors"
name="selectedAuthors"
(onSelect)="onItemSelectAuthor($event)"
(onSelectAll)="onSelectAllAuthor($event)" (onDeSelect)="onItemDeSelectAuthor($event)"
(onDeSelectAll)="onDeSelectAllAuthor($event)">
</ng-multiselect-dropdown>
</div>
</div>
</div>
<button class="btn btn-success" [disabled]=!editForm.dirty>Edit</button>
</form>

Manipulating the DOM of a collection of divs using Jquery

Am working on the frontend part of an application whereby I have
some form inputs (wrapped in divs). Each div has a button called
Add Beneficiary. Basically when the user clicks on the button, the div
below it should be displayed (which is hidden by default) and the
sequence continues (each button on a div clicked the div below it
displays).
On the button of each div I have writen some logic whereby on click event
a function called addBeneficiary is triggered. I parse the id of the
button clicked. Next in the function I manipulate the DOM by reaching
out to the parent div and displaying it but the logic does not
work.
~ Kindly assist?
Markup
<!--Person One-->
<div class="container mg-t-30" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
<!--Person Two-->
<div class="container mg-t-30" style="display:none;" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
Logic
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').last().prop('id');
//console.log(check);
$("check").css("display", "block");
}

Its not working because both parents div id is "beneficiary1". And you can't use same id with multiple tag. It should be unique like beneficiary1, beneficiary2 & so on... And also little bit change into your script.
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').next('div');
//console.log(check);
check.css("display", "block");
}
jsfiddle https://jsfiddle.net/y2mva6es/

Button is working only once when clicking on it in mobile mode

In my site, everything is working well on the desktop version but when I switch to the mobile version a button only works once. It doesn't do anything after 1 click.
If I press enter it works fine, but pressing on the button won't trigger the button again. I specifically don't want my page to reload.
onClick not working on mobile (touch)
This answer involves reloading the page.
$("#quiz").on('touchstart click', 'button', function(e){
e.preventDefault();
});
<h1 class="title">Quote Game!</h1>
<div class="container">
<form id="quiz" name="quiz" autocomplete="off"><br>
<container class="cont1">
<p class="questionp">Which hero does this quote belong to? </p>
<div class="row">
<!--<div class="form-group float-label-control">-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="question" id="questionquote"></p>
</div>
<div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2 ">
<p id = "number_correct" class="green"></p>
</div>
<script class="score">document.getElementById("number_correct").innerHTML = "Your Score: " + correct;</script>
<div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
<!-- <img src="transparent.gif" height="90" width="90" class="pull-right"> penguin picture-->
</div>
<input class="form-control" id="question1" name="question1" placeholder="Hero Name" onclick="IsEmpty();" >
<br> </br>
<!--<input class="answer" id="question1" name="question1"></input><br> </br>-->
<div class="col-6 col-lg-2 col-md-2 col-sm-2 col-xs-2">
<!--<input id="button" class="btn btn-primary" type="submit" value="Check" onclick = "check(); ">-->
<button id ="button" value="Check" class="btn btn-primary " onclick = "check(); ">Check</button>
</div>
</div>
</container>
</form>
<div class="text-center">
<img id="result" class="correct_answer" src="" height="350" width="90%">
</div>
</div>

Tried your code under Chrome 68 for Android and the button is working everytime. However, a few hints:
Use addEventListener (or jQuery.on()) rather than using inline javascript in HTML.
If what you want is to not submit the form after running your code, you can use return false instead of e.preventDefault().
I don't get the point on attaching an event handler to the form only to filter it to the button and adding another inline javascript function to the button itself. If what you want is to call two different functions at once, use one function to call both.

try setting button type to button (instead of submit)
that way the button won't be disabled by browser after a click
<button type="button" id ="button" value="Check" class="btn btn-primary " >Check</button>
also, e.preventDefault is not needed anymore and you'll have to submit this form with js if you wan't to

Bootstrap datetimepicker returning undefined value

I'm trying to get a couple of date time selector widgets working, but whenever I submit my form, the values returned are undefined. I'm still new to Javascript, and haven't worked with jQuery at all.
My code follows the basic example here: http://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup
<form method="post" action="/requser/direct-user">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="directTrainingDate">Training Date</label>
<div class='input-group date' name="directTrainingDate" id='directTrainingDate'>
<input type='text' class="form-control">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<script>
$('#directTrainingDate').datetimepicker({
format: 'YYYY-MM-DD'
});
</script>
</div>
</div>
<div class="row"> <!-- Submit button -->
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-custom">Submit</button>
</div>
</div>
</div> <!-- End Submit button -->
</form>
And then back in my Node/Express route, I'm just logging the value of req.body.directTrainingDate, and it's always undefined.

Just for documentation, from my comment above:
You put the name attribute directTrainingDate on the div instead of the input.

Ajax serialize() method is not reading all data fields of html form

I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.

you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.

Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks

I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr

ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.