Develop Reference

How to control the disability state of HTML inputs using Javascript

I have been trying to cycle between the disability states of two inputs on my website by using a button attached to some JavaScript. My current code has two buttons in use which both disable one input and enable the other, however this is not very practical. I wanted to know how I can use one button and one script to cycle between the disability states of my inputs, this is my current code:
<script>
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").disabled=false;
document.getElementById("monthlypexpenses").disabled=true;
}
</script>
<script>
function switch_monthlypexpense()
{
document.getElementById("monthlyexpenses").disabled=true;
document.getElementById("monthlypexpenses").disabled=false;
}
</script>
<button class="btn btn-primary" onclick="switch_monthlyexpense()" id="monthlyexpensestoggle">Expenses</button>
<button class="btn btn-primary" onclick="switch_monthlypexpense()" id="monthlypexpensestoggle">P Expenses</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>

<script>
// use a variable to note which one is disabled
let selected = "monthlyexpenses"
function switchDisabled () {
// toggle the from "monthlyexpenses" to "monthlypexpenses" or vice versa
selected = selected === "monthlyexpenses" ? "monthlypexpenses" : "monthlyexpenses"
// check if the DOM disabled state is the same as the selected
document.getElementById("monthlyexpenses").disabled = selected === "monthlyexpenses";
document.getElementById("monthlypexpenses").disabled = selected === "monthlypexpenses";
}
</script>
<button class="btn btn-primary" onclick="switchDisabled()" id="switch-button">Switch</button>
<form id="expenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlyexpenses" id="monthlyexpenseslabel">Monthly Expenses</label>
<input type="number" class="form-control" id="monthlyexpenses" placeholder="0" disabled>
</div>
<span class="input-group-text" id="dsign5">$</span>
</form>
<form id="pexpenses_form" style="visibility:visible;">
<div class="form-group">
<div class="form-group col-md-1">
<label for="monthlypexpenses" id="monthlypexpenseslabel">Monthly P Expenses</label>
<input type="number" class="form-control" id="monthlypexpenses" placeholder="0">
</div>
<span class="input-group-text" id="psign4">%</span>
</form>

disabled is an attribute so you can set it by:
document.getElementById("myId").setAttribute('disabled', '');
And to enable the element:
document.getElementById("myId").removeAttribute('disabled');
Your first function will look like:
function switch_monthlyexpense()
{
document.getElementById("monthlyexpenses").removeAttribute('disabled');
document.getElementById("monthlypexpenses").setAttribute('disabled', '');
}

daterangepicker close parent Bootstrap dropdown

I have a dropdown menu in Bootstrap with a daterangepicker input.
I have this code
$(document).on('click', 'body .dropdown-menu', function (e) {
e.stopPropagation();
});
$('#filter-expired-range').daterangepicker();
and when i click on daterangepicker calendar day input- everything is close (daterangepicker calendar and dropdown menu)
Update 1.
html code :
<div class="btn-group mea-filters-block">
<span style="float: left; padding-top: 12px;" class="mea-info"></span>
<button type="button" class="btn dropdown-toggle btn-filter btn-link" data-toggle="dropdown"
title="Filter">
<i class="fa fa-filter"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<form id="docExportFilter">
<div class="row">
<div class="col-sm-6" style="border-right: 1px solid #ddd">
<p class="filterslabel"><i
class="fa fa-calendar-check-o"></i>
<span>Validation date</span>
</p>
<div class="form-group">
<input type="checkbox" class="" name="validDocuments" id="filter-valid">
<label for="filter-valid">Valid documents</label>
</div>
<div class="form-group">
<input type="checkbox" class="" name="expired" id="filter-expired">
<label for="filter-valid">Expired documents</label>
</div>
<div class="form-group" id="filter_expired_range_container" style="display: none">
<label for="filter-expired">Expired between dates
<input style="width: 100%" readonly placeholder="Any" type="text"
class="form-control" name="expired_range" id="filter-expired-range">
</label>
</div>
</div>
<div class="col-sm-6">
<p class="filterslabel"><i
class="icon-checkmark-circle2"></i> <span>Compliance</span>
</p>
<div class="form-group">
<input type="checkbox" name="compliant" class="" id="filter-compilant">
<label for="filter-compilant">Compliant documents</label>
</div>
<div class="form-group">
<input type="checkbox" name="remedialActionsRequired" class="" id="filter-remedial">
<label for="filter-remedial">Remedial required</label>
</div>
</div>
</div>
<div class="row pt-15" style="border-top: 1px solid #ddd">
<div class="col-sm-12 text-right">
<a class="mea-submit btn btn-primary"><i class="fa fa-check"></i>Apply</a>
<button class="btn btn-default" type="reset"><i class="fa fa-times"></i> Cancel</button>
</div>
</div>
</form>
</ul>
</div>
UPDATE 2.
Here is minimal example - i see problem is requirejs - if i test it without requirejs - it work ...
example with requirejs (don't work - select date close parent dropdown)
https://jsfiddle.net/5wtLqxk9/2/
example without requirejs (work fine)
https://jsfiddle.net/5wtLqxk9/1/

$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
Note: place after daterangepicker()
https://jsfiddle.net/5wtLqxk9/4/
Similar to:
event bubbling in Jquery datepicker

This works for me.
$('#your-id-here').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}).click(function(e) {
$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
});

jQuery click brings me to top of page but I need to stay where I im

I have this code:
$('.bidbutton').on( "click", function() {
$('.addOffer').hide();
$('.preko').show();
var i = $(this).attr('klik');
$('.i'+i).hide();
$('.j'+i).show();
});
Now when I click jquery bring me to the top of page but I need to stay where I am.
I try
$('.bidbutton').on( "click", function() {
$('.addOffer').hide();
$('.preko').show();
var i = $(this).attr('klik');
$('.i'+i).hide();
$('.j'+i).show();
evt.preventDefault();
});
but dont work...
How to solve this problem?
QUestion update:
<div class="row preko i2" index="2" style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: rgb(255, 255, 255); display: none;">
<div class="col-md-2 col-xs-2" style=" background: #f4f4f4; ">
<h3 class="text-center">20.</h3>
<p class="text-center">Apr</p>
</div>
<div class="col-md-8 col-xs-8 text-center">
<h3>$55</h3>
<p>current bid</p>
</div>
<div class="col-md-2 col-xs-2" style=" margin-top: 25px; "> Bid Now </div>
</div>
<div class="row addOffer j2" style="display: block;" index="2">
<div class="col-md-2 col-xs-2" style=" background: #f4f4f4; ">
<h3 class="text-center">20.</h3>
<p class="text-center">Apr</p>
</div>
<div class="col-md-10" style="margin-top:10px;">
<form method="POST" action="http://localhost:8888/offers" id="target" accept-charset="UTF-8">
<input type="hidden" name="_token" value="BWSwRnV8diq3QEF5FKcRa0ThWpBODKSMAlwEWZEH"><input name="article_id" type="hidden" value="8"><input name="start" class="hstart" type="hidden" value="04/20/2016 12:00 am"><input name="provera" class="provera" type="hidden" value="522">
<div class="input-group bootstrap-touchspin" style="padding:10px;">
<span class="input-group-btn"><button class="btn btn-default bootstrap-touchspin-down" type="button">-</button></span><span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span><input id="price" type="text" class="form-control price input-lg" name="price" value="55" style="display: block;"><span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
<div class="input-group-btn"><button class="btn btn-default bootstrap-touchspin-up" type="button">+</button><button type="submit" class="btn btn-info input-lg okvir">PLACE BID</button></div>
</div>
</form>
</div>
</div>
Here is my update to question with html code...

Your event handler function for the click event listener is missing the first argument, which is the jQuery Event Object. You need to change your function to:
$('.bidbutton').on( "click", function(evt) {
evt.preventDefault();
// do stuff
}
Here are the docs on the .click() event listener. Pay attention to the handler function format.
The eventObject argument is optional on a handler function except when you actually need to do something with the event. You can assign the eventObject to any value you want, and you will often see e, evt, or event in code examples. In the case of your particular button, I'm assuming this is the .bidbutton element you're assigning the click handler to:
<button type="submit" class="btn btn-info input-lg okvir">PLACE BID</button>
Since this button has type="submit", it is submitting the form and reloading the page. By adding evt.preventDefault() you are changing this behavior, but this also means you will need to use JavaScript to submit your form to your server. Reference the docs on jQuery.ajax() to do this or MDN's guide to Ajax.

Simply pass evt to the function like so:
function(evt)

Reverse the position of form elements on a mouse click using Jquery

I am working on a hexadecimal to decimal color code converter. I wish to change the positions of the form elements on the click of a button.
i.e when i click hexa to deci button the form that takes hexadecimal code must appear on the left and when i deci to hexa button the form that takes decimal code must appear first.
my work at codepen
HTML CODE :
<!DOCTYPE html>
<head>
<title>my color converter</title>
</head>
<body>
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form>
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1"><p>COLOR IN DECIMAL CODE</p></label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form>
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3"><p>COLOR IN HEXADECIMAL CODE</p></label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>
</body>
CSS CODE :
.form-group {
margin-top: 60px;
width:80%;
margin-left:8.33333333%;
text-align: center;
}
h3 {
text-align:center;
margin-top:40px;
}
.align {
margin-top:40px;
}
JavaScript :
$(document).ready(function(){
$(".button1").on('click',function(){
var form1 = $('.colorcode1').detach();
form1.appendTo('form');
});
});
Note: I am learning Jquery and i have included the CDN.

I added this to your style:
.column1 {
float: right;
}
and then changed the js like this:
$(document).ready(function() {
$(".button1").on('click', function() {
$('.colorcode1').parents('div:first').toggleClass('column1');
$('.colorcode2').parents('div:first').toggleClass('column1');
});
});
I would call the class something else than column1, though.

see working code here. your javascript will be as follows:
codepan
$(document).ready(function() {
$(".button1").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#hax');
jQuery(form2)
.detach()
.appendTo('#dec');
});
$(".button2").on('click', function() {
var form1 = $('.colorcode1');
var form2 = $('.colorcode2');
jQuery(form1)
.detach()
.appendTo('#dec');
jQuery(form2)
.detach()
.appendTo('#hax');
});
});
HTML :
<h3>TOGGLE COLOR REPRESENTATION</h3>
<div class="align text-center">
<button class="btn btn-default button1">HEXA TO DECI</button>
<button class="btn btn-default button2">DECI TO HEXA</button>
</div>
<div class="row">
<div class="col-md-6 column1">
<form id="dec">
<div class="form-group colorcode1">
<label for="hex2decimal" class="class1">
<p>COLOR IN DECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control .class2" id="colorcode1" placeholder="decimal code">
</div>
</form>
</div>
<div class="col-md-6">
<form id="hax">
<div class="form-group colorcode2">
<label for="hex2decimal" class="class3">
<p>COLOR IN HEXADECIMAL CODE</p>
</label>
<input type="colorcode" class="form-control class4" id="colorcode2" placeholder="hex code">
</div>
</form>
</div>
</div>
<div class="align text-center">
<button class="btn btn-default button3">CONVERT</button>
<button class="btn btn-default button4">REFRESH</button>
</div>

Add character count function to foreach loop

I have created a character count function which calculates the length of characters use use and displays them at each key up. it works fine out of a loop but when I add it to the fore each loop for adding new rows it doesn't work.
Code below shows everything within the loop, the notes and description section is the classes which include the character count:
<div class="row">
<div class="span18">
<h2 class="PIMS3">Task Details</h2>
<div id="taskList">
<div class="row">
<div class="span1">Dept</div>
<div class="span1">Skill</div>
<div class="span3">Description</div>
<div class="span3">Notes</div>
<div class="span6">Budget</div>
</div>
<div data-bind="foreach: tasks">
<div class="row">
<div class="span1"><select class="span1" data-bind="options: $parent.departmentList, value: department"></select></div>
<div class="span1"><select class="span1" data-bind="options: skillList, value: skill"></select></div>
<div class="span3"><input class="span3" name = "description" id="textAreaDescriptions" data-bind="value: description" placeholder="Max Character Limit 50" maxlength="50" >
<div id="char_namb2" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:50:0</div>
</div>
<div class="span3"><input class="span3" name = "notes" id="textAreaNote" data-bind="value: notes" placeholder="Max Character Limit 150" maxlength= "150">
<div id="char_namb3" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:150:0</div>
</div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Hours: <input class="span1" placeholder="Hours" data-bind="value: budget_hours"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Cost Rate: <input class="span1" placeholder="Cost Rate" data-bind="value: budget_cost_rate"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Charge Rate: <input class="span1" placeholder="Charge Rate" data-bind="value: budget_charge_rate "</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Cost: <input class="span1" placeholder="Other Cost" data-bind="value: budget_other_cost"</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Charge: <input class="span1" placeholder="Other Charge" data-bind="value: budget_other_charge"</input></div>
</div>
</div>
</div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-success" data-bind="click: addTask"><i class="icon-plus icon-white"></i> Add Task</a>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-primary" data-bind="click: save,visible: isValid() && !isSubmitting() "><i class="icon-ok icon-white"></i> Create Job</a>
<a class="btn btn-info" data-bind="click: save,visible: isSubmitting"><i class="icon-ok icon-white"></i> Saving ... ...</a>
</div>
</div>
</div>
</div>
</div>
this snippet includes the script for character count function which is placed outside the loop.
<script>
$(function(){
$('#textAreaDescriptions').keyup(function(){
var charsno2 = new $(this).val().length;
$('#char_namb2').html("Character Count:50 : " + charsno2);
});
});
<script>
$(function(){
$('#textAreaNote').keyup(function(){
var charsno3 = $(this).val().length;
$('#char_namb3').html("Character Count:150 : " + charsno3);
});
});
Does anybody know how I could get this to work?
Thanks!

In spite of the fact that you are using Javascript instead of PHP, try puting your functions inside a
$( document ).ready()
I think you are binding the event to the inputs before the DOM's load
****Edit****
I think that there are several issues with your code. Check this link https://jsfiddle.net/ivan0013/fmu9bj35/1/ where you have an example working.