Develop Reference

Limit number of javascript automated generated checkbox

kinda worried with following code that should automatically generate checkbox content AND limit up to 3 the number of checked boxes.
Separately both codes work fine, the issue occurs when they are combined:
Fiddle
$('input[type=checkbox]').change(function(e) {
if ($('input[type=checkbox]:checked').length > 3) {
$(this).prop('checked', false);
}
})
var skills = ["centres", "tirs", "dribbles", "passes", "vitesse"]
var skillContainer = $("#skillsContainer");
skills.forEach(skill => skillContainer.append('<li> <input type=\"checkbox\" id=\"' + skill + '\" value=\"' + skill + '\"> <label for=\"' + skill + '\"> ' + skill + ' </label> </li>'));
$("#skillsContainer").append(checkboxElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="competencies" action="algo.php" method="POST">
<div class="container">
<ul class="ks-cboxtags" id="skillsContainer">
<input class="button" type="submit" value="Valider">
</ul>
</div>
</form>

You mean this?
You need to delegate when you create dynamic elements
OR add the event handler after the generation
$('#skillsContainer').on("change", 'input[type=checkbox]', function(e) {
if ($('input[type=checkbox]:checked').length > 3) {
$(this).prop('checked', false);
}
})
var skills = ["centres", "tirs", "dribbles", "passes", "vitesse"]
$("#skillsContainer").html(skills.map(skill => '<li> <input type=\"checkbox\" id=\"' + skill + '\" value=\"' + skill + '\"> <label for=\"' + skill + '\"> ' + skill + ' </label> </li>').join(""));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="competencies" action="algo.php" method="POST">
<div class="container">
<ul class="ks-cboxtags" id="skillsContainer">
<input class="button" type="submit" value="Valider">
</ul>
</div>
</form>

Pure javascript to check checked checkbox length
var eLength = element.length;
var i = 0;
var checkedCheck;
checkbox.forEach(checkBox => {
checkBox.addEventListener('click',function(){
if(this.checked){
i++;
if(i > 3){
checkBox.disabled = true;
alert('Limit reached');
}
}
});
});

generate dynamically a select type with options specified on add button click

i have seen a j query function that generates dynamically on button click an input type = text but how to generate dynamically select with options and get the value everytime.
the j query function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("#TextBoxContainer");
div.append('<div>' + GetDynamicTextBox("") + '</div>');
});
$('form').on('submit', function (e) {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
$("#<%= hdnfldVariable.ClientID %>").val(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<select name="Sexe" id="Sexe" class="field-select"></select>';
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />';
}
the html:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<button id="btnGet" runat="server" onserverclick="Submit_Click">Submit</button>
<asp:HiddenField ID="hdnfldVariable" runat="server" />

Try the below snippet. To grab the values of select on submit you can use:
$('#mySelect').val();
$("#getSelect").click(function(e) {
e.preventDefault();
var select = '<select name = "test" id="mySelect">Select</select>';
if ($('#selectholder').empty()) {
$('#selectholder').append(select);
}
for (i = 0; i < 10; i++) {
$('#mySelect').append('<option value="' + i + '">' + 'Option ' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="getSelect">Display select</div>
<div id="selectholder"></div>

Trouble with some openweathermap API example code

I am trying to run the following code:
var mainWeather = {
init: function() {
$("#submitWeather").click(function() {
return mainWeather.getWeather();
});
},
getWeather: function() {
$.get('http://api.openweathermap.org/data/2.5/weather?q=' + $("#cityInput").val() + "," + $("#countryInput").val() + "&APPID=myweatherkey_removed", function(data) {
var json = {
json: JSON.stringify(data),
delay: 1
};
echo(json);
});
},
// Prints result from the weatherapi, receiving as param an object
createWeatherWidg: function(data) {
return "<div class='pressure'> <p>Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C</p></div>" +
"<div class='description'> <p>Title: " + data.weather[0].main + "</p></div>" +
"<div class='description'> <p>Description: " + data.weather[0].description + "</p></div>" +
"<div class='wind'> <p>Wind Speed: " + data.wind.speed + "</p></div>" +
"<div class='humidity'> <p>Humidity: " + data.main.humidity + "%</p></div>" +
"<div class='pressure'> <p>Pressure: " + data.main.pressure + " hpa</p></div>";
}
};
var echo = function(dataPass) {
$.ajax({
type: "POST",
url: "/echo/json/",
data: dataPass,
cache: false,
success: function(json) {
var wrapper = $("#weatherWrapper");
wrapper.empty();
wrapper.append("<div class='city'> <p>Place: " + json.name + ", " + json.sys.country + "</p></div>");
wrapper.append(mainWeather.createWeatherWidg(json));
}
});
};
mainWeather.init();
and
<!DOCTYPE html>
<html>
<head>
<title>Open Weather API</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="userArea" class="container">
<div id="stateWrapper">
<input type="text" id="cityInput" placeholder="Enter a State" />
</div>
<br/>
<div id="countryWrapper">
<input type="text" id="countryInput" placeholder="Enter a Country" />
</div>
<br/>
<div id="buttonArea">
<input type="submit" id="submitWeather" class="btn btn-primary"/>
<br/>
</div>
<!- USED TO SHOW RESULT -->
<div id="weatherWrapper">
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.slim.js"></script>
<script type="text/javascript" src="mainWeather.js"></script>
</body>
</html>
but it just won't do anything when I hit submit.
The Chrome debugger is saying first that $.get is not a function in line 9, so after searching, I changed it to jquery.get. Now it says that is not a function. I have no idea what I'm doing. Can anybody figure this out?

The slim build of jQuery excludes Ajax. You can read more here.
Just change it out with the normal build and you'll be fine.

ASP.Net barcode reader show data

I am working on a WCF service application that required to get the Barcode reader characters and show data of it on UI for user. My problem is that when I write data on textbox with keyboard is OK but when read from barcode reader overwrite it and show 3 times data in UI.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>سرویس و بارکد خوان</title>
<script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function setFocusToTextBox() {
$(document).ready(function () {
document.getElementById('txtFirst').focus();
});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtFirst").keydown(function (e) {
if (e.which == 17 || e.which == 74) {
e.preventDefault();
} else {
console.log(e.which);
}
})
});
</script>
<script type="text/javascript" language="javascript">
function JqueryAjaxCall(val) {
$("#contentHolder").empty();
$(".form-errors").empty();
if (val != null && val.length === 20) {
document.getElementById("txtFirst").select();
var pageUrl = '<%= ResolveUrl("~/Default.aspx/jqueryAjaxCall") %>';
var parameter = { "myVal": val}
$.ajax({
type: 'POST',
url: pageUrl,
data: JSON.stringify(parameter),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
dateFormat: 'dd/mm/yy',
success: function (data) {
onSuccess(data);
},
error: function (data, success, error) {
var myitems = jQuery.parseJSON(data.responseText);
$(".form-errors").text(myitems.Message).show();
}
});
return false;
}
function onSuccess(data) {
var items = data.d;
var fragment = "<ul>"
var BLNumber = items.BLNumber;
var ContainerNumber = items.ContainerNumber;
var Destination = items.Destination;
var SerialNumberVerification = items.SerialNumberVerification;
var TempPermission = items.TempPermission;
var VehicleNumber = items.VehicleNumber;
var VehicleType = items.VehicleType;
var VoyageID = items.VoyageID;
var value = new Date(parseInt(items.ExitDate.substr(6)));
var ExitDate = value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
var ExitPermissionNumber = items.ExitPermissionNumber;
var myvalue = new Date(parseInt(items.SpecialZoneOrCustomPermissionDate.substr(6)));
var SpecialZoneOrCustomPermissionDate = myvalue.getMonth() + 1 + "/" + myvalue.getDate() + "/" + myvalue.getFullYear();
var SpecialZoneOrCustomPermissionNumber = items.SpecialZoneOrCustomPermissionNumber;
fragment += "<li> " + " شماره بارنامه : " + BLNumber + " <br> "
+ " شماره کانتینر : " + ContainerNumber + " <br> "
+ " مسافت : " + Destination + " <br/> "
+ " شماره تائیدیه : " + SerialNumberVerification + " <br/> "
+ " شماره مجوز موقت : " + TempPermission + " <br/> "
+ " شماره وسیله نقلیه : " + VehicleNumber + " <br/> "
+ " نوع وسیله نقلیه : " + VehicleType + " <br/> "
+ " VoyageID : " + VoyageID + " <br/> "
+ " تاریخ خروج : " + ExitDate + " <br/> "
+ " شماره خروج : " + ExitPermissionNumber + " <br/> "
+ " تاریخ مجوز : " + SpecialZoneOrCustomPermissionDate + " <br/> "
+ " شماره مجوز : " + SpecialZoneOrCustomPermissionNumber + " <br/> "
+ "</li>";
$("#contentHolder").append(fragment);
}
}
</script>
</head>
<body onload="setFocusToTextBox();" bgcolor="#E6E6FA">
<form id="myForm" runat="server" dir="rtl" >
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<div>
<table cellpadding="1" cellspacing="0" style="width: 80%;">
<tr>
<td>
</td>
<td>
<asp:Label ID="lblFirst" runat="server" Text="لطفا شماره سند را وارد نمائید : " Font-Bold="True"></asp:Label>
<input type="text" id="txtFirst" onfocus="setFocusToTextBox" onkeyup="return JqueryAjaxCall(this.value);" class="col-xs-4" style="background-color:#ede0dd"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="contentHolder" >
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
</td>
<td>
<div class="form-errors" style="margin-right:-175%;font-style:oblique" dir="rtl" align="right"></div>
</td>
</tr>
</table>
</div>
</form>
<br />
<br />
<br />
<br />
<br />
<hr />
</body>
</html>

on this line code you call your ajax on every key click
onkeyup="return JqueryAjaxCall(this.value);"
and so on each click you have data output, 3 times and maybe more, on each key press. Redesign your code so only when you are finish typing you make the render.

I Understand it just now. problem was for this line of code
$("#contentHolder").append(fragment);
I add .empty() to that.
$("#contentHolder").empty().append(fragment);
I find it from this link
https://www.joezimjs.com/javascript/jquery-html-youre-doing-it-wrong/

add/remove datepicker dynamically

am just a beginner of php.
When i click a button i need to add more date-picker dynamically.I put the code but when i click the button am getting new textbox not date-picker.plz check my code and tell me where is the mistake and what i have to do.Here is my code,
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/datepicker.css">
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newdatepicker = $(document.createElement('div'))
.attr("id", 'datepicker' + counter);
newdatepicker.after().html('<label> #'+ counter + ' : </label>' +
'<input class= name="date' + counter +
'" id="dateid' + counter + '" value="" >');
newdatepicker.appendTo("#date");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#datepicker" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n date #" + i + " : " + $('#date' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
</script>
<div id='date'>
<div class="hero-unit">
<div class="input-daterange" id="datepicker1" >
<span class="add-on" style="vertical-align: top;height:20px">Select Leave Date:</span>
<input type="text" class="input-small" name="date" id="dateid"/>
</div>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>

When the page loads, you initialize the date picker plugin on the elements found at that time:
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
But then you never initialize it on new elements added later. So when you add a new element:
newdatepicker.appendTo("#date");
It's just the uninitialized element that was created. The plugin was never told about it. You need to run the plugin on it.
Since the code creates the id value, you can simply use that to target the element right after it's been added. Maybe something like this:
newdatepicker.appendTo("#date");
$('#dateid' + counter).datepicker({
todayBtn: "linked"
});