We Keep Coding

how enable the check box after disable?

i wrote code this i want to disable the input after check box has checked .it's OK i did that.another function is about when i click the input after that the check box has to disable .
my problem is if i want to click on check box then the check box enable after that .
this my code ;
function clickcity() {
var checkBox = document.getElementById("city-new-ad");
var myinput = document.getElementById("select-city-ad");
if (document.getElementById("city-new-ad").disabled == true) {
document.getElementById("select-city-ad").disabled == true;
}
if (document.getElementById("city-new-ad").disabled == false) {
if (checkBox.checked == true) {
document.getElementById("select-city-ad").disabled == true;
} else {
document.getElementById("select-city-ad").disabled == false;
}
}
}
function clickphone() {
var checkBox = document.getElementById("phone-ad");
if (checkBox.checked == true) {
document.getElementById("another-phone").disabled = true;
} else {
document.getElementById("another-phone").disabled = false;
}
}
function clickcity_option() {
document.getElementById("city-new-ad").disabled = true;
}
function clickphone_option() {
document.getElementById("phone-ad").disabled = true;
}
<div class="form-group">
<label for="exampleInputPassword1">phone number:</label>
<span>my phone number</span>
<input type="checkbox" id="phone-ad" onclick="clickphone()">
<br>
<span class="my-phone-ne">another phone : </span>
<input type="text" class="form-control input-register"
onclick="clickphone_option()" id="another-phone"
style="border: 1px solid #370DFF; display: inline-block; width: 30% !important; margin-right: 5px !important;">
</div>
<div class="form-group">
<label for="exampleInputPassword1">address: </label>
<span>my town</span>
<input type="checkbox" id="city-new-ad" onclick="clickcity()">
<select class="custom-select select-search select-width"
onclick="clickcity_option()" id="select-city-ad"
style=" border: 1px solid #370DFF; width: 20%;">
<option selected
style="overflow-wrap: break-word !important; text-align: center !important;">
choose city</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

made changes in HTML added onkeyup instead of onclick
<input type="text" class="form-control input-register" onkeyup="clickphone_option(this)" id="another-phone" style=" border:1px solid #370DFF; display: inline-block; width: 30% !important ;margin-right: 5px !important;">
In js clickphone_option function added a if condition, which checks if input vale is > 0 if its > 0 it will disable checkbox and if you backspace all value of checkbox it will enable checkbox again.
function clickphone_option(a) {
if(a.value.lenght>0){
document.getElementById("phone-ad").disabled = true;
}else{
document.getElementById("phone-ad").disabled = false;
}
}

How Clear form fields with jQuery?

I use clone() and remove() with div elements. witch make div element clone .
In this div element i have filed
$('.wrapper').on('click', '.remove', function() {
$(this).closest('.wrapper').find('.element:not(:first):last').remove();
setCloneButtonVisibility();
});
var cloneLimit = 12;
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
$(this).closest('.wrapper').find('.element:first').clone().appendTo('.results');
}
setCloneButtonVisibility();
});
function setCloneButtonVisibility() {
$('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}
$('.2').val('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text" type="text" />
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
when i click clone it clones text filed.
But if i have typed text in filed and then i make clone in clone filed is same text witch i have in first filed. how make that every new clone field was cleard

Find input elements and set their value to empty.
$('.wrapper').on('click', '.remove', function() {
$(this).closest('.wrapper').find('.element:not(:first):last').remove();
setCloneButtonVisibility();
});
var cloneLimit = 12;
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
$(this).closest('.wrapper').find('.element:first').clone()
// end() reverts last filtering operation
.find(':input').val('').end().appendTo('.results');
}
setCloneButtonVisibility();
});
function setCloneButtonVisibility() {
$('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text[]" type="text" />
<!-- For demonstration of the :input pseudoselector -->
<select name="sel[]">
<option value="" />
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
References:
.end()
:input

how about set the value to null?
$('.wrapper').on('click', '.clone', function() {
if ($('.results .element').length <= cloneLimit) { // just to make testing easier
var input = $(this).closest('.wrapper').find('.element:first').clone().find("input").val("");
input.appendTo('.results');
}
setCloneButtonVisibility();
});

var cloneLimit = 10;
var inputName = function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 5; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
// handle click and add class
$('.remove').on("click", function(){
$(this).parents('.wrapper').find('.results .element:eq(-1)').remove();
});
$('.clone').on("click", function(){
var $clone = $(this).parents('.wrapper').find('.element:first').clone();
$clone.find('input').attr('name',inputName());
$clone.appendTo('.results');
});
$('.wrapper button').on('click', function(){
if( $('.results .element').length < cloneLimit) {
$('.clone').show();
}
else {
$('.clone').hide();
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
input {
margin-bottom: 20px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="element">
<input name="text" type="text" />
</div>
<div class="results"></div>
<div class="buttons">
<button class="clone">clone</button>
<button class="remove">remove</button>
</div>
</div>
i have made clone and remove button may be this is what you need..

Editor controls for iText on double-click

How would I achieve displaying text editing controls on-click, like here for example (see: Add Text)? I've managed to incorporate some menu text editing controls before but would like to give this a go. I tried posting the code here but the JS/HTML/CSS snippet tool was breaking for me.
Thanks in advance!
Edited with answer:
// Add image from local
var canvas = new fabric.Canvas('c');
// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
if (canvas.findTarget(e)) {
let objType = canvas.findTarget(e).type;
if (objType === 'i-text') {
document.getElementById('textControls').hidden = false;
}
}
});
canvas.on('before:selection:cleared', function(e) {
document.getElementById('trash').hidden = true;
document.getElementById('forward').hidden = true;
document.getElementById('back').hidden = true;
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = true;
}
});
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
stroke: '#F0F0F0', //<-- set this
strokeWidth: 40 //<-- set this
}).scale(0.2);
canvas.add(oImg).renderAll();
//var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
canvas.getActiveObject().remove();
}
// Refresh page
function refresh() {
setTimeout(function() {
location.reload()
}, 100);
}
// Add text
function Addtext() {
canvas.add(new fabric.IText('Tap and Type', {
left: 50,
top: 100,
fontFamily: 'helvetica neue',
fill: '#333',
stroke: '#F0F0F0',
strokeWidth: 1,
fontSize: 45
}));
}
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
canvas.getActiveObject().setBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
canvas.getActiveObject().setTextBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
canvas.getActiveObject().setStroke(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
canvas.getActiveObject().setStrokeWidth(this.value);
canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
canvas.getActiveObject().setFontFamily(this.value);
canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
canvas.getActiveObject().setFontSize(this.value);
canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
canvas.getActiveObject().setLineHeight(this.value);
canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
canvas.getActiveObject().setTextAlign(this.value);
canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
radios5[i].onclick = function() {
if (document.getElementById(this.id).checked == true) {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "bold");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "italic");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "underline");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "line-through");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "overline");
}
} else {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "");
}
}
canvas.renderAll();
}
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
canvas.bringToFront(selectedObject);
}
body {
padding: 10px 10px 10px 10px;
font-family: "HelveticaNeue";
}
canvas {
border: 1px solid grey;
margin: 10px 0px 0px 0px;
}
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 30px;
filter: alpha(opacity=0);
}
.footerheader {
margin-top: 10px;
font-weight: bold;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
Testing
<br>
<br>
<label class="myFile">
<button>+ Photo</button>
<input type="file" id="file" />
</label>
<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>
<div id="textControls" hidden>
<h2>Test Text Controls</h2>
<div id="text-wrapper" style="margin-top: 10px" ng-show="getText()">
<div id="text-controls">
<input type="color" id="text-color" size="10">
<label for="font-family" style="display:inline-block">Font family:</label>
<select id="font-family">
<option value="arial">Arial</option>
<option value="helvetica" selected>Helvetica</option>
<option value="myriad pro">Myriad Pro</option>
<option value="delicious">Delicious</option>
<option value="verdana">Verdana</option>
<option value="georgia">Georgia</option>
<option value="courier">Courier</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="impact">Impact</option>
<option value="monaco">Monaco</option>
<option value="optima">Optima</option>
<option value="hoefler text">Hoefler Text</option>
<option value="plaster">Plaster</option>
<option value="engagement">Engagement</option>
</select>
<br>
<label for="text-align" style="display:inline-block">Text align:</label>
<select id="text-align">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
<div>
<label for="text-bg-color">Background color:</label>
<input type="color" id="text-bg-color" size="10">
</div>
<div>
<label for="text-lines-bg-color">Background text color:</label>
<input type="color" id="text-lines-bg-color" size="10">
</div>
<div>
<label for="text-stroke-color">Stroke color:</label>
<input type="color" id="text-stroke-color">
</div>
<div>
<label for="text-stroke-width">Stroke width:</label>
<input type="range" value="1" min="1" max="5" id="text-stroke-width">
</div>
<div>
<label for="text-font-size">Font size:</label>
<input type="range" min="1" max="120" step="1" id="text-font-size">
</div>
<div>
<label for="text-line-height">Line height:</label>
<input type="range" min="0" max="10" step="0.1" id="text-line-height">
</div>
</div>
<div id="text-controls-additional">
<input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
<input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
<input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
<input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
<input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
</div>
<div class="footer">
<div class="footerheader">asdasd</div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</div>

You could use fabric.util.addListener method to detect double click event on fabricjs canvas and upon double click you'd have to check whether you clicked on a text object (iText) or not, henceforth display the text editing controls accordingly.
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
if (canvas.findTarget(e)) {
let objType = canvas.findTarget(e).type;
if (objType === 'i-text') {
document.getElementById('textControls').hidden = false; //show controls
}
}
});
ᴅᴇᴍᴏ ⧩
// Add image from local
var canvas = new fabric.Canvas('c');
// display/hide controls on double click
fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function(e) {
if (canvas.findTarget(e)) {
let objType = canvas.findTarget(e).type;
if (objType === 'i-text') {
document.getElementById('textControls').hidden = false;
}
}
});
canvas.on('before:selection:cleared', function(e) {
document.getElementById('trash').hidden = true;
document.getElementById('forward').hidden = true;
document.getElementById('back').hidden = true;
if (e.target.type === 'i-text') {
document.getElementById('textControls').hidden = true;
}
});
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
var oImg = img.set({
left: 0,
top: 0,
angle: 00,
stroke: '#F0F0F0', //<-- set this
strokeWidth: 40 //<-- set this
}).scale(0.2);
canvas.add(oImg).renderAll();
//var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
// Delete selected object
window.deleteObject = function() {
canvas.getActiveObject().remove();
}
// Refresh page
function refresh() {
setTimeout(function() {
location.reload()
}, 100);
}
// Add text
function Addtext() {
canvas.add(new fabric.IText('Tap and Type', {
left: 50,
top: 100,
fontFamily: 'helvetica neue',
fill: '#333',
stroke: '#F0F0F0',
strokeWidth: 1,
fontSize: 45
}));
}
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-color').onchange = function() {
canvas.getActiveObject().setFill(this.value);
canvas.renderAll();
};
document.getElementById('text-bg-color').onchange = function() {
canvas.getActiveObject().setBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-lines-bg-color').onchange = function() {
canvas.getActiveObject().setTextBackgroundColor(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-color').onchange = function() {
canvas.getActiveObject().setStroke(this.value);
canvas.renderAll();
};
document.getElementById('text-stroke-width').onchange = function() {
canvas.getActiveObject().setStrokeWidth(this.value);
canvas.renderAll();
};
document.getElementById('font-family').onchange = function() {
canvas.getActiveObject().setFontFamily(this.value);
canvas.renderAll();
};
document.getElementById('text-font-size').onchange = function() {
canvas.getActiveObject().setFontSize(this.value);
canvas.renderAll();
};
document.getElementById('text-line-height').onchange = function() {
canvas.getActiveObject().setLineHeight(this.value);
canvas.renderAll();
};
document.getElementById('text-align').onchange = function() {
canvas.getActiveObject().setTextAlign(this.value);
canvas.renderAll();
};
radios5 = document.getElementsByName("fonttype"); // wijzig naar button
for (var i = 0, max = radios5.length; i < max; i++) {
radios5[i].onclick = function() {
if (document.getElementById(this.id).checked == true) {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "bold");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "italic");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "underline");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "line-through");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "overline");
}
} else {
if (this.id == "text-cmd-bold") {
canvas.getActiveObject().set("fontWeight", "");
}
if (this.id == "text-cmd-italic") {
canvas.getActiveObject().set("fontStyle", "");
}
if (this.id == "text-cmd-underline") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-linethrough") {
canvas.getActiveObject().set("textDecoration", "");
}
if (this.id == "text-cmd-overline") {
canvas.getActiveObject().set("textDecoration", "");
}
}
canvas.renderAll();
}
}
// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
selectedObject = event.target;
});
var sendSelectedObjectBack = function() {
canvas.sendToBack(selectedObject);
}
var sendSelectedObjectToFront = function() {
canvas.bringToFront(selectedObject);
}
body {
padding: 10px 10px 10px 10px;
font-family: "HelveticaNeue";
}
canvas {
border: 1px solid grey;
margin: 10px 0px 0px 0px;
}
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 30px;
filter: alpha(opacity=0);
}
.footerheader {
margin-top: 10px;
font-weight: bold;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
Testing
<br>
<br>
<label class="myFile">
<button>+ Photo</button>
<input type="file" id="file" />
</label>
<button onclick="Addtext()">+ Text</button> / Selected Object:
<button id="trash" onClick="deleteObject()">Trash</button>
<button id="forward" onclick="sendSelectedObjectToFront()">Forward</button>
<button id="back" onclick="sendSelectedObjectBack()">Back</button> /
<button onclick="refresh()">Clear All</button>
<canvas id="c" width="800" height="600"></canvas>
<div id="textControls" hidden>
<h2>Test Text Controls</h2>
<div id="text-wrapper" style="margin-top: 10px" ng-show="getText()">
<div id="text-controls">
<input type="color" id="text-color" size="10">
<label for="font-family" style="display:inline-block">Font family:</label>
<select id="font-family">
<option value="arial">Arial</option>
<option value="helvetica" selected>Helvetica</option>
<option value="myriad pro">Myriad Pro</option>
<option value="delicious">Delicious</option>
<option value="verdana">Verdana</option>
<option value="georgia">Georgia</option>
<option value="courier">Courier</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="impact">Impact</option>
<option value="monaco">Monaco</option>
<option value="optima">Optima</option>
<option value="hoefler text">Hoefler Text</option>
<option value="plaster">Plaster</option>
<option value="engagement">Engagement</option>
</select>
<br>
<label for="text-align" style="display:inline-block">Text align:</label>
<select id="text-align">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justify">Justify</option>
</select>
<div>
<label for="text-bg-color">Background color:</label>
<input type="color" id="text-bg-color" size="10">
</div>
<div>
<label for="text-lines-bg-color">Background text color:</label>
<input type="color" id="text-lines-bg-color" size="10">
</div>
<div>
<label for="text-stroke-color">Stroke color:</label>
<input type="color" id="text-stroke-color">
</div>
<div>
<label for="text-stroke-width">Stroke width:</label>
<input type="range" value="1" min="1" max="5" id="text-stroke-width">
</div>
<div>
<label for="text-font-size">Font size:</label>
<input type="range" min="1" max="120" step="1" id="text-font-size">
</div>
<div>
<label for="text-line-height">Line height:</label>
<input type="range" min="0" max="10" step="0.1" id="text-line-height">
</div>
</div>
<div id="text-controls-additional">
<input type='checkbox' name='fonttype' id="text-cmd-bold"> Bold
<input type='checkbox' name='fonttype' id="text-cmd-italic"> Italic
<input type='checkbox' name='fonttype' id="text-cmd-underline"> Underline
<input type='checkbox' name='fonttype' id="text-cmd-linethrough"> Linethrough
<input type='checkbox' name='fonttype' id="text-cmd-overline"> Overline
</div>
<div class="footer">
<div class="footerheader">asdasd</div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</div>

Javascript function working in JSFiddle, but not working when I copy it on my local page

This is working on [http://jsfiddle.net/4zxgshpq/ ] (I have Edited) but when I copy the whole code and run it on my page did not work. I have searched for answers like moving a javascript at the end or adding $(function(){ at the beginning but it still does not work and I couldn't find any solutions. Can some one please help. Thank you.
This is my Script
$(function(){
$("#Units").on("change", function() {
if ($(this).val() == "Marketing") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 1){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
if ($(this).val() == "Finance") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 2){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
if ($(this).val() == "Operations") {
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
$(":checkbox[name='4[]']").change(function(){
if ($(":checkbox[name='4[]']:checked").length == 3){
$(':checkbox:not(:checked)').prop('disabled', true);
}else{
$(':checkbox:not(:checked)').prop('disabled', false);
}
});
}
$("p").click(function(){
$('input:checkbox').removeAttr('checked');
$(':checkbox:not(:checked)').prop('disabled', false);
});
}).trigger('change');
});
-- While my index page looks like this
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Checkbox inside a Dropdown based on another Dropdown Option Menu</title>
<script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>
</head>
<body>
<style>
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px gold solid;
}
#checkboxes label {
display: flex;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
</style>
<select id="Units">
<option value="Marketing"> Marketing </option>
<option value="Finance"> Finance </option>
<option value="Operations"> Operations </option>
</select>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<p style = "cursor:pointer">
Uncheck All</p>
<label for="one">
<input type="checkbox" id = "1" class="dissable" name="4[]" onclick="check();" value="1" /> chbx1</label>
<label for="two">
<input type="checkbox" id = "2" class="dissable" name="4[]" onclick="check();" value="2" /> chbx2</label>
<label for="three">
<input type="checkbox" id = "3" class="dissable" name="4[]" onclick="check();" value="3" /> chbx3</label>
<label for="four">
<input type="checkbox" id = "4" class="dissable" name="4[]" onclick="check();" value="4" /> chbx4</label>
<label for="five">
<input type="checkbox" id = "5" class="dissable" name="4[]" onclick="check();" value="5" /> chbx5</label>
<label for="six">
<input type="checkbox" id = "6" class="dissable" name="4[]" onclick="check();" value="6" /> chbx6</label>
</div>
</div>
<script type="text/javascript">
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
</script>
</body>
</html>
Thanks for having time for this. Have a good day to you .

You are using jQuery, but not loading it.
Add the following before your script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
It works on jsfiddle because it is adding the jQuery script for you as seen in the following screenshot
If you don't want to use a cdn, you may obtain a local copy of jquery via jquery.com and put it in your source "js" directory.

You have only included the dropdown.js file, not jquery.js so your browser has no idea what the dollar symbol is. You probably see at least one TypeError in the console. Remember with jsfiddle it's as easy as selecting your desired version from a dropdown menu but in your project you need to either download the latest jquery version or include it via a Content Delivery Network:
Check this: http://jquery.com/download/ and find the method that suits your project more

My javascript stops working after ajax response

For some reason my javascript stops working after I have submitted a POST request.
Here is what is happening. I load my webpage, fill out the form and click 'Click me' :
Next I click ok in the alert popup and the expected result appears:
I fill out the form, but when I try to click the button nothing happens!
Not even my alert popup.
Here are the files I am using.
My CSS, simple2.css :
body, html {
margin:0;
padding;
height:100%
}
a {
font-size:1.25em;
}
#content {
padding:25px;
}
#fade {
display: none;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ababab;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .70;
filter: alpha(opacity=80);
}
#modal {
display: none;
position: absolute;
top: 45%;
left: 45%;
width: 64px;
height: 64px;
padding:30px 15px 0px;
border: 3px solid #ababab;
box-shadow:1px 1px 10px #ababab;
border-radius:20px;
background-color: white;
z-index: 1002;
text-align:center;
overflow: auto;
}
#results {
font-size:1.25em;
color:red
}
My HTML, simple2.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="simple2.css">
<title>simple II</title>
</head>
<body>
<div id="fade"></div>
<div id="modal"> <img id="loader" src="images/loading.gif" /> </div>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter thing1: <input type="text" id="thing1" name="thing1" size="10" /></p>
<p>Enter thing2: <input type="text" id="thing2" name="thing2" size="10" /></p>
<p>Enter thing3: <input type="text" id="thing3" name="thing3" size="10" /></p>
<p>Check thing4: <input type="checkbox" id="thing4" name="thing4" value=1>
<input type="hidden" id="state" name="state" value="one" /></p>
</form>
<button id='clickme' name='clickme'>Click me</button>
<script src="simple2.js?0000000000015"></script>
</div>
</body>
</html>
My javascript, simple2.js :
function openModal() {
document.getElementById('modal').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
document.getElementById('fade').style.display = 'none';
}
function loadAjax(url,data, app, epoch, state) {
console.log ("loadAjax urls is [" + url + "] data is [" + data + "]" );
// document.getElementById('results').innerHTML = '';
console.log ("line 14");
openModal();
console.log ("line 16");
var xhr = false;
console.log ("line 18");
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
closeModal();
console.log ("line 28");
document.getElementById("results").innerHTML = xhr.responseText;
}
}
console.log ("line 32");
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
console.log ("line 35");
}
}
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
var inputs = document.querySelectorAll("input");
var params = inputs[0].name + "=" + inputs[0].value;
for( var i = 1; i < inputs.length; i++ ) {
var input = inputs[i];
var name = input.name;
var value = input.value;
params += "&" + name + "=" + value;
}
alert( params );
loadAjax( "/cgi-bin/simple2.py", encodeURI(params));
});
... and finally my cgi script, simple2.py :
#!/usr/bin/env python
import cgi
import os
#import cgitb
import cgitb; cgitb.enable() # for troubleshooting
import time
import calendar
def goto_state_two( a, b, c, d ):
print """
Thank you!<br>
<li>thing1 is [%s]
<li>thing2 is [%s]
<li>thing3 is [%s]
<li>thing4 is [%s]
<hr>
<form method="post" name="start" target="_blank">
<p>Enter thing5: <input type="text" id="thing5" name="thing5" size="10" /></p>
<p>Enter thing6: <input type="text" id="thing6" name="thing6" size="10" /></p>
<p>Enter thing7: <input type="text" id="thing7" name="thing7" size="10" /></p>
<p>Check thing8: <input type="checkbox" id="thing8" name="thing8" value=1>
<input type="hidden" id="state" name="state" value="two" /></p>
</form>
<button id='clickme' name='clickme'>Click me</button>
<script src="simple2.js?%d"></script>
""" % (a,b,c,d,calendar.timegm(time.gmtime()))
def goto_done( a, b, c, d ):
print """
Thank you!<br>
<li>thing1 is [%s]
<li>thing2 is [%s]
<li>thing3 is [%s]
<li>thing4 is [%s]
<hr>
<form method="post" name="start" target="_blank">
<input type="hidden" id="state" name="state" value="done" /></p>
</form>
<button id='clickme' name='clickme'>Click me</button>
<script src="simple2.js?%d"></script>
""" % (a,b,c,d,calendar.timegm(time.gmtime()))
form = cgi.FieldStorage()
state = form.getvalue("state")
if state == 'one' :
thing1 = form.getvalue("thing1", "")
thing2 = form.getvalue("thing2", "")
thing3 = form.getvalue("thing3", "")
thing4 = form.getvalue("thing4", "")
goto_state_two( thing1, thing2, thing3, thing4 )
elif state == 'two' :
thing5 = form.getvalue("thing5", "")
thing6 = form.getvalue("thing6", "")
thing7 = form.getvalue("thing7", "")
thing8 = form.getvalue("thing8", "")
goto_done( thing5, thing6, thing7, thing8 )
elif state == 'done' :
print """
Hurray you did it!<br>
"""
else:
print """
unknown state [%s]
<hr>
""" % ( state )

document.getElementById("results").addEventListener("click", function(e) {
if(e.target && e.target.nodeName == "BUTTON") {
// Move Prevent Default into condition to allow
// other events to bubble.
e.preventDefault();
// This is a Button click we have captured
var inputs = document.querySelectorAll("input");
var params = inputs[0].name + "=" + inputs[0].value;
for( var i = 1; i < inputs.length; i++ ) {
var input = inputs[i];
var name = input.name;
var value = input.value;
params += "&" + name + "=" + value;
}
alert( params );
loadAjax( "/cgi-bin/simple2.py", encodeURI(params));
}
});