Develop Reference

Error duplicating Div with Select2 library

I am trying to clone a div, which contains some input, and one of those is the Select2 library, when cloning it clones me but the library does not work.
attached bug: "Uncaught TypeError: Cannot set properties of null (setting 'outerHTML')".
This is my html code.
<div class="cloned" style="width: 100%;">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="txtinput0" name="username" placeholder="Enter Full Name" type="text" data-parsley-pattern="^[a-zA-Z\s.]+$" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="txtinput0" name="email" placeholder="Enter VALID EMAIL and check the result" type="email" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="txtinput0" name="phone" placeholder="Enter Phone e.g.: +363012345" type="text" data-parsley-pattern="^\+{1}[0-9]+$"/>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<select class="chosen-select" multiple="multiple" style="width: 100%;" id="select0" data-placeholder="Select a company" >
<div clas="options">
<option value="1">Google</option>
<option value="1">Amazon</option>
<option value="1">Facebook</option>
<option value="1">Airbnb</option>
</div>
</select>
</div>
</div>
</div>
</div>
<div clas="row box" id="clone"></div>
And this is the javascript with which I try to clone the whole div, including the select2
$(document).ready(function() {
$('#select0').select2();
});
var i=1;
var prev =0;
function addRow() {
var clone = $("#row_examenes").clone()
clone.find("#txtinput"+prev).attr("id", "txtinput"+i);
clone.find("#select"+prev).attr("id", "select"+i);
clone.find("#select"+prev+"_chosen").attr("id", "select"+i+"_chosen1");
clone.appendTo($("#clone"));
document.getElementById("select"+i+"_chosen1").outerHTML=""
$myid = $('#select' + i);
$myid.show().select2();
i++;
prev++;
}

There are quite a few problems in the code, but the big issue is:
When you initialise a Select2, it hides the original <select> and adds some extra HTML on the page. If you then clone the block of HTML where that Select2 is, you clone all that extra Select2 stuff. And if you then try an initialise that cloned stuff as a Select2, it won't work.
The fix is described in many duplicate questions here on SO already (try searching for "select2 clone"), here's an example: you need to destroy the original Select2 before cloning it, and then re-initialise it as a Select2 again once it is cloned;
Some of the other issues in the code are:
There is no element with id row_examenes. I added it as a <div> enclosing the <div class="cloned">;
Once you clone that div, the clone will have the same ID (row_examenes), and the code does not change that ... duplicate IDs are invalid HTML. Instead we can clone the <div> nested inside, with class cloned;
All 3x text <input>s have the same ID, txtinput0 - this is invalid, and jQuery will only be able to find the first one. I changed them to name0, email0, and phone0;
The HTML has an unbalanced </div>, the opening <div> I added fixes that too;
After the clone is created, and before the IDs are updated, it includes elements with non-unique IDs. It isn't actually in the DOM yet, and you are using clone.find() to scope your search to find them, so probably that's OK ...? But it seems unnecessarily risky, when we don't have to do it that way - why not play it safe, and search for the inputs instead of the IDs;
<div clas="row box" id="clone"></div> - typo in class;
There was no way to trigger addRow() so I added a simple button, and a click handler for it;
Here's a working, simplified snippet with those issues fixed:
$(document).ready(function () {
$('#select0').select2();
$('button').on('click', addRow);
});
// How many clones on the page?
let clones = 0;
function addRow() {
// We've added a clone
clones++;
// First need to destroy original select2, so the clone does not include
// extra stuff select2 generates.
$('#select0').select2('destroy');
// Now create our clone
let clone = $("#row_examenes .cloned").clone()
clone.find('input[name="username"]').attr("id", "name" + clones);
clone.find('input[name="email"]').attr("id", "email" + clones);
clone.find('input[name="phone"]').attr("id", "phone" + clones);
clone.find("select").attr("id", "select" + clones);
// HTML is updated, add it to the DOM
clone.appendTo($("#clone"));
// Reinitialise the original select2
$('#select0').select2();
// And initialise our new select2
$('#select' + clones).select2();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<button>Create a clone</button>
<div id="row_examenes">
<div class="cloned">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="name0" name="username" placeholder="Enter Full Name" type="text" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="email0" name="email" placeholder="Enter VALID EMAIL and check the result" type="email" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="phone0" name="phone" placeholder="Enter Phone e.g.: +363012345" type="text" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<select class="chosen-select" multiple="multiple" id="select0" >
<div clas="options">
<option value="1">Google</option>
<option value="1">Amazon</option>
<option value="1">Facebook</option>
<option value="1">Airbnb</option>
</div>
</select>
</div>
</div>
</div>
</div>
<div class="row box" id="clone"></div>

Form validation on blur

I have 5 input fields and I want them to validate on blur, and show either an error or success message, but through DOM scripting and not with an alert box. I've tried several different codes, even just small bits and pieces to see if it's correctly interacting with my html but it doesn't seem to work.
So far, I have a small code to test if it even runs, and it's supposed to show an alert box but it does not. I would prefer to not use any innerHTML and use all functions within the javascript only.
My html:
<div id=fNID>
<label for="firstNameID">First Name: </label>
<input id="firstNameID" type="text" name="firstNameA" value="" />
<span> </span>
</div>
<div id=lNID>
<label for="lastNameID">Last Name: </label>
<input id="lastNameID" type="text" name="lastNameA" value="" />
<span> </span>
</div>
My javascript:
firstNameID = document.surveyForm.getElementById("firstNameID");
document.surveyForm.getElementById(fN).addEventListener("blur", validateName);
function validateName() {
var nameRegEx = /[a-zA-Z]+/;
var firstNameID = document.getElementById("firstNameID");
if (fN.matches(nameRegEx)) {
alert("Success!")
} else {
alert("error")
}
}
window.addEventListener("load", setupForm, false);
}

Bootstrap has a nice pattern for input validation. They use divs following the input: one for valid input, one for invalid input, making the appropriate one visible:
<div class="form-group">
<label for="uname">Username:</label>
<input class="form-control" id="uname">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
Bootstrap's CSS classes modify the display based on the input's pseudo-classes :valid and :invalid.
You can set these pseudo-classes in JavaScript with the setCustomValidity() method.
input.setCustomValidity("input is invalid")
will assign the :invalid pseudo-class to the input.
input.setCustomValidity("")
will assign the :valid pseudo class.
A working example:
const input = document.getElementById('uname');
function makeValid() {
input.setCustomValidity('');
}
function makeInvalid() {
input.setCustomValidity('a problem');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<h3 class="m-2">Bootstrap input with validation</h3>
<form class="was-validated mx-2">
<div class="form-group">
<label for="uname">Username (required):</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">This field is invalid.</div>
</div>
</form>
<div class="m-2">
<p>Use setCustomValidity() to change input state:</p>
<button onclick="makeValid();">:valid</button>
<button onclick="makeInvalid();">:invalid</button>
</div>
It's also worth noting that most browsers have native support for displaying validation messages on inputs. Here's an example that doesn't use any Bootstrap features:
const input = document.getElementById('uname');
function makeValid() {
input.setCustomValidity('');
}
function makeInvalid() {
input.setCustomValidity('this is invalid');
}
body {
background-color: #aaa;
}
.m-2 {
margin: .5rem;
}
.mt-5 {
margin-top: 1rem;
}
<body>
<h3 class="m-2">Generic input with validation</h3>
<form class="mt-5">
<label for="uname">Username:</label>
<input type="text" id="uname" placeholder="Enter username" name="uname">
<p>Use setCustomValidity() to change input state:</p>
<button onclick="makeInvalid();">input:invalid</button>
</form>
<div class="m-2">
<button onclick="makeValid();">input:valid</button>
</div>
</body>

How can I listen to all inputs that have a "required" attribute?

EDIT :
I have an input field and a checkbox. Checkbox allow to win "required" on this input field. I want to listen required, i mean if required is true or not. I don't want to listen checkbox.
==> When input win/lose required attribute, it trigger function (without use checkbox).
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
cible_required_on = $(this).closest('.panel').find('.required_on');
if(!cible_required_on.prop('required')){
cible_required_on.attr("required", true);
} else {
cible_required_on.attr("required", false);
}
});
// Here my new function listening required attribute
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default" >
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4 changement_position_champ" id="bottom_left">
<div class="panel">
<label> Raison Sociale</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-use" ></i></span>
<input type="text" class="form-control required_on" placeholder="Raison sociale"
aria-describedby="basic-addon1">
</div>
</div>
<div class="checkbox">
<label><input type="checkbox" ><p>Checkbox trigger required on input field</p></label>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

$('input[required]').change(function(){
alert('required')
});
$('input[required]').change(function(){
alert('required')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required/>
<input type="text" />

Knowing I'm late to the party, here's my contribution:
// ES6 supported - () => {} , arrow-function
$(':input[required]').change((e) => {
alert("Changed: " + e.target.value);
});
// Older compatibility
/*
$(':input[required]').change(function(e) {
alert("Changed: " + e.target.value);
});
*/
input {
width: 200px;
display: block;
margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type something and unfocus from input.</p>
<form action="#">
<input type="text" required />
<input type="text" required />
<input type="checkbox" required />
<input type="text" />
<input type="submit" />
</form>

As mentioned in the question the user requires to select the input with some conditions like it is the checkbox and is required. So instead of running a loop which is more memory eating, we can use the jquery filter selectors to achieve the goal.
Below is the example.
var a = $('input[required][type="checkbox"]');
console.log(a)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' required>

Additional input fields when filling up previous

Im trying to add additional fields in case when my user has filled up one group of inputs. So the idea is that when he finishes filling up the last input in that group, another group of inputs for same kind of items collapses/appears under existing one. One group of items consists of three inputs. After filling up that one, another group of inputs would appear under. I will present my code under. Hope someone can help me!
<div class="new-providers">
<div class="provider-append" id="toggleExtraProvider">
<div class="form-group">
<label>Provider</label>
<input type="text" class="form-control" id="practiceProvider" placeholder="Full provider name with coredentials" />
</div>
<div class="form-group">
<label>NPI</label>
<input type="text" class="form-control" id="providerNPI" placeholder=" NPI" />
</div>
<div class="form-group">
<label>MM #</label>
<input type="text" class="form-control" id="providerM" placeholder="M Provider #" />
</div>
<hr />
</div>
</div>
I tried appending the provider-append class on to the new-providers class
This is my jQuery script:
<script type="text/javascript">
$(document).ready(function() {
$("#toggleExtraProvider div.form-group input").each(function() {
if($(this).val() =! "") {
var target = $("new-providers");
target.append(".provider-append");
}
});
});​
</script>

You need to check for empty input box in a particular div use filter() for that
and use jQuery clone() to clone the parent div (input group) if all input box filled. And you should use change event instead of input, Since input will be overkill here it will run each time when you change a single character in text box on the other hand change event fires when user finish typing and input box loose focus.
$(document).ready(function () {
$(document).on("change",".provider-append input",function(){
var allHaveText;
var parentDiv = $(this).closest("div.provider-append");
emptyInputs=parentDiv.find("input[type=text]").filter(function () {
return !this.value;
});
if(emptyInputs.length==0)
{
newGroup = parentDiv.clone().appendTo(".new-providers");
newGroup.find("input[type=text]").each(function(){
$(this).val("");
});
}
});
});
Here is a working sample
$(document).ready(function () {
$(document).on("change",".provider-append input",function(){
var allHaveText;
var parentDiv = $(this).closest("div.provider-append");
emptyInputs=parentDiv.find("input[type=text]").filter(function () {
return !this.value;
});
if(emptyInputs.length==0)
{
newGroup = parentDiv.clone().appendTo(".new-providers");
newGroup.find("input[type=text]").each(function(){
$(this).val("");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="new-providers">
<div class="provider-append">
<div class="form-group">
<label>Provider</label>
<input type="text" class="form-control" placeholder="Full provider name with coredentials" />
</div>
<div class="form-group">
<label>NPI</label>
<input type="text" class="form-control" placeholder=" NPI" />
</div>
<div class="form-group">
<label>MM #</label>
<input type="text" class="form-control" placeholder="M Provider #" />
</div>
<hr />
</div>
</div>
I hope it will help you.

Input fields (type="number") loose their two-way 'BIND' property of angularjs once their content is changed.

My problem is pretty simple but elusive in nature. When you will load the index.php, (as localhost using xampp) you will be presented with a simple form. Now there are multiple elements on this form, and it's still a work in progress, so the possibility of multiple bugs is plausible. However, there's this one bug that's really annoying.
THE PROBLEM:
On changing the Due Date element, the content of the following input
boxes changes due to the fact that they're bind with it. Now it won't
matter how many times you change the due date, because every time the
value in the fields will change accordingly, Thanks to angularjs.
The BUG creeps in when you change the value of an input field. Say
originally it was 27 and then you changed it to , idk say 10.* NOW
IF YOU CHANGE THE DUE DATE, THE ALTERED INPUT FIELD REMAINS THE SAME
* I.E. WITH VALUE 10, WHEREAS I WANT IT TO CHANGE NEVERTHELESS.
Moreover, if one of you guys is the apotheosis of angularjs coders,
and he got some tips for me, I would just like to say..... "I APPRECIATE
THAT".
index.php
<!-- addService.html -->
<?php
$version = time();
?>
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap and our custon css files) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- JS (load angular, ui-router and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="ctrl-add-service.js"></script>
<script src="services.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="ctrl-add-service">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1 align="center">SERVICE FORM</h1>
<form role="form" ng-submit="createService()">
<div>
<label>Service Name</label>
<input type="text" class="form-control" placeholder="Enter service name here" ng-pattern="/^[a-zA-Z0-9_]*$/" required>
</div>
<div class="row">
<div class="col-md-6">
<label>Due Date</label>
<input type="date" class="form-control" ng-model='dueDate' ng-change="setFields()" required>
</div>
<div class="col-md-6">
<label>Task Date</label>
<input type="date" class="form-control" required>
</div>
</div>
<div style="margin-top: 20px;margin-bottom: 20px;" align="center">
<label>Period</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='12' ng-change="setFields()">Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='6' ng-change="setFields()">Semi-Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='4' ng-change="setFields()">Quarterly</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='1' ng-change="setFields()">Monthly</label>
</div>
<div align="center">
<div>
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[0]' ng-required='!fields[0]'></div>
<div style="display:inline-block;"><label>Feb</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[1]' ng-required='!fields[1]'></div>
<div style="display:inline-block;"><label>Mar</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[2]' ng-required='!fields[2]'></div>
<div style="display:inline-block;"><label>Apr</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[3]' ng-required='!fields[3]'></div>
</div>
<div style="display:inline-block;"><label>May</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[4]' ng-required='!fields[4]'></div>
<div style="display:inline-block;"><label>Jun</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[5]' ng-required='!fields[5]'></div>
<div style="display:inline-block;"><label>Jul</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[6]' ng-required='!fields[6]'></div>
<div style="display:inline-block;"><label>Aug</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[7]' ng-required='!fields[7]'></div>
<div>
<div style="display:inline-block;"><label>Sep</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[8]' ng-required='!fields[8]'></div>
<div style="display:inline-block;"><label>Oct</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[9]' ng-required='!fields[9]'></div>
<div style="display:inline-block;"><label>Nov</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[10]' ng-required='!fields[10]'></div>
<div style="display:inline-block;"><label>Dec</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[11]' ng-required='!fields[11]'></div>
</div>
</div>
<div align="center" style="margin-top: 20px;">
<button type="submit" class="btn btn-primary">Create</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
ctrl-add-service.js (controller)
// ctrl-add-service.js Controller for the add service option in the nav bar of the home screen.
var mainApp = angular.module("mainApp",[]);
mainApp.controller('ctrl-add-service',function($scope, DueDateService){
$scope.value ='1';
$scope.setFields = function() {
$scope.date = DueDateService.date($scope.dueDate);
$scope.fields = DueDateService.fields( DueDateService.month($scope.dueDate), $scope.value); // first parameter passes month in int, second parameter passes period value in int.
};
});
services.js (services for the app)
// services.js services.js of the account direcotry of the project. It is used by the mainApp.
//DueDateService
mainApp.service('DueDateService', function(){
this.month = function(date) {
var temp = new Date(date);
month = temp.getMonth();
console.log(month+1+" is the month");
return (month+1);
};
this.date = function(date) {
var temp = new Date(date);
date = temp.getDate();
console.log(date+" is the date");
return (date);
};
this.fields = function(month,period) {
var lap = parseInt(period); // possible values of lap can be [12,6,4,1]
var iteration = 12/lap; // possible values of iteration can be [1,2,3,12]
var selectedFields = [true,true,true,true,true,true,true,true,true,true,true,true];
for (var i=1; i<=iteration; i++) {
if(month>12) {
month = month - 12;
}
selectedFields[month-1]= false;
month = month + lap;
}
return selectedFields;
};
});

I think you need to change the ng-value to ng-model and create an Array of your dates, like this:
ng-model='dates[0]'
ng-model='dates[1]'
ng-model='dates[2]'
...
And your controller would be like this:
var date = DueDateService.date($scope.dueDate);
$scope.dates = Array(12).fill(date);
See at this plunker: https://plnkr.co/edit/p8O14Y80hCWyNmxnYxbF

In following lines why are you taking ng-value, As far as I think you will have to take ng-model="date" And this will work fine.
see the ng-value usages
https://docs.angularjs.org/api/ng/directive/ngValue
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-model="date" ng-disabled='fields[0]' ng-required='!fields[0]'></div>