I wanted to have a checkbox inside a Bootstrap form, which I want to turn green when it's checked. Here is my code:
function test() {
$("#check1").animate({
"background-color": "rgb(209, 231, 221)"
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="input-group mb-3">
<span class="input-group-text"><input type="checkbox" onclick="test()" id="checkbox"></span>
<input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>
When doing this though, I get an error in the console, which states that a color was expected, but it instead recieved NaNrgb.
I tried this with the hex code #d1e7dd as well, but it failed as well.
Why is JavaScript mistaking it for a NaN object? Is there any way to fix it?
Thanks in advance
You can edit your javascript
<script type="text/javascript">
let checkbox = document.querySelector('#check1');
checkbox.addEventListener('click', () => {
checkbox.classList.add('/*Some class you want to add*/')
// or
checkbox.style = '/*Some styling you want*/'
});
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="input-group mb-3">
<span class="input-group-text"><input type="checkbox" id="checkbox"></span>
<input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>
<input class="form-check-input danger" type="checkbox" value="" id="flexCheckDefault">
And please dont use onclick use eventlistern it is better
Thanks
You need to jQuery.Color plugin for background-color support.
function test() {
$("#check1").animate({
"background-color": "rgb(209, 231, 221)"
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="input-group mb-3">
<span class="input-group-text"><input type="checkbox" onclick="test()" id="checkbox"></span>
<input type="text" id="check1" class="form-control" placeholder="This is a checkbox">
</div>
Related
I've been struggling to make this as reusable as possible. I have written it such that if I put the id's of both the target fieldset and the input checkbox it works. However, I have a number of form elements that must all act the same, so this isn't a great way to deal with it.
When a user enables or disables the checkbox switch, then I want the following form field to disable or enable accordingly. I've tried multiple different ways to accomplish this and cleaned up my javascript based on suggestions in other threads, but when I attempt to activate the switch I get the below error. Any help would be amazing!
form_enable.js:2 Uncaught TypeError: Cannot set property 'disabled' of null at enable_disable (form_enable.js:2) at HTMLInputElement.onchange (Trim.htm:11)
My trimmed down HTML:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes" onchange="enable_disable(report_url_disable_fieldset,report_url_active_yes)">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset disabled id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
And my form_enable.js file:
function enable_disable(target_id,check_id) {
document.getElementById(target_id).disabled = !check_id.checked;
}
Try:
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="form-group custom-control custom-switch">
<input class="custom-control-input" type="checkbox" name="report_url_active" id="report_url_active_yes">
<label class="custom-control-label" for="report_url_active_yes">Will you need a report?</label>
</div>
<div class="container">
<fieldset id="report_url_disable_fieldset"> <!-- Enable if report_url_active_yes is checked -->
<div class="form-group form-inline">
<label class="form-control-label" for="report_url">Reports URL</label>
<input class="form-control" type="text" id="report_url">
</div>
</fieldset>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/form_enable.js"></script>
</body>
</html>
And form_enable.js:
document.getElementById("report_url").setAttribute("disabled", "true");
document.getElementById("report_url_active_yes").addEventListener("change", function() {
document.getElementById("report_url_active_yes").checked ? document.getElementById("report_url").removeAttribute("disabled") : document.getElementById("report_url").setAttribute("disabled", "true")
});
I want to use a mask to an input to start with SP and also PT. The PT input works fine, but the SP does not. Note that this is not my real code, it's just an example.
$('#partshort').mask('SP-00000000000');
$('#svpshort').mask('PT-00000000000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Problems with jQuery Mask Plugin?</h3>
<p>Exemplify your problem here :-)</p>
<hr />
<form role="form">
<div class="form-group">
<label for="date-field">Example 1</label>
<input type="text" class="form-control" id="partshort">
</div>
<div class="form-group">
<label for="ip-field">Example 2</label>
<input type="text" class="form-control" id="svpshort">
</div>
</form>
</div>
Here is the example: http://jsfiddle.net/1wjbysnm/
The issue is because the S character in the Mask library has a special meaning:
By default, jQuery Mask Plugin only recognizes the logical digit A (Numbers and Letters) and S (A-Za-z) but you can extend or modify this behaviour
https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#translation
To fix your issue you can simply remove the S character translation so that it behaves as any standard character:
$('#partshort').mask('SP-00000000000', {
translation: { S: null }
});
$('#svpshort').mask('PT-00000000000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Problems with jQuery Mask Plugin?</h3>
<p>Exemplify your problem here :-)</p>
<hr />
<form role="form">
<div class="form-group">
<label for="date-field">Example 1</label>
<input type="text" class="form-control" id="partshort">
</div>
<div class="form-group">
<label for="ip-field">Example 2</label>
<input type="text" class="form-control" id="svpshort">
</div>
</form>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>
I tried to follow the first example here.
It should be outlining the text input in green but it isn't.
Use js function for validate as below,
function check(e) {
if (e.target && e.target.value && +e.target.value === 10) return e.target.style.borderColor = 'green';
return e.target.style.borderColor = 'red';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" ,href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" onkeyup="check(event)">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet",href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>
I guess that you missed css link somehow,, this is correct one, and you do not need jQuery for that, that is only css based coloring
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="form-group has-success">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control form-control-success" id="answer-1" type="text" name="answer-1" value="10">
</div>
</div>
</div>
You can do it this way, using Bootstrap 4 beta 2. I've added the bmd-form-group is-focused classes to the div.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design#4.0.0-beta.4/dist/css/bootstrap-material-design.min.css" integrity="sha384-R80DC0KVBO4GSTw+wZ5x2zn2pu4POSErBkf8/fSFhPXHxvHJydT0CSgAP2Yo2r4I" crossorigin="anonymous">
<div class="bmd-form-group is-focused">
<label class="form-control-label question" for="answer-1">What is 5+5?</label>
<input class="answer form-control is-valid" id="answer-1" type="text" name="answer-1" value="10">
</div>
Next time you check the Bootstrap docs, use the current beta docs at: https://getbootstrap.com/docs/4.0/getting-started/introduction/
I am using jquery-timepicker, and it is not displaying the dropdown when I click on the input box. In my view:
<script type="text/javascript">
$(function(){
$('#StartTime').timepicker();
});
</script>
/* ... */
<div class="col-xs-6 form-group">
<label>Start Time:</label>
<div class="input-group">
<input type="text" class="form-control" id="StartTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
I know it is loading properly, because the ui-timepicker element is being added to the DOM when I click on the input box and it formats time entered in the box when it loses focus. It just isn't displaying the dropdown.
Check that you have all the dependencies. I copied your code to a snippet and added the dependencies from the official site and it worked well. I included the following dependencies: jQuery, jQuery timepicker and Bootstrap timepicker. The last two have CSS and JS files too.
$(function() {
$('#StartTime').timepicker();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script type="text/javascript" src="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://jonthornton.github.io/jquery-timepicker/lib/bootstrap-datepicker.css">
<div class="col-xs-6 form-group">
<label>Start Time:</label>
<div class="input-group">
<input type="text" class="form-control" id="StartTime" />
<span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
</div>
</div>
Make sure there is no css definitions, which may hide this element.
I ma starting with that i am obsiously blind, but i can't find a fail in my own code, please can someone find a minute and tell me what the hell i am doing wrong?
Code looks totaly OK for me but dispite this fact it's not working ofcourse.
Code looks like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="date-form">
<div class="form-horizontal">
<div class="control-group">
<label for="date-picker-2" class="control-label">B</label>
<div class="controls">
<div class="input-group">
<input id="date-picker-2" type="text" class="date-picker form-control" />
<label for="date-picker-2" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
</div>
</div>
<div class="control-group">
<label for="date-picker-3" class="control-label">C</label>
<div class="controls">
<div class="input-group">
<label for="date-picker-3" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
<input id="date-picker-3" type="text" class="date-picker form-control" />
</div>
</div>
</div>
</div>
<hr />
</div>
<script>
$(".date-picker").datepicker();
$(".date-picker").on("change", function () {
var id = $(this).attr("id");
var val = $("label[for='" + id + "']").text();
$("#msg").text(val + " changed");
});
</script>
And fiddle here:
http://jsfiddle.net/bbm035nx/1/
Unfortunately, here we have a problem, datepicker don't even popup, looks it didn't find jquery, but WHY or what happen? I have no clue. Please guys can somebody try to look at it?
Thank you all and again sorry for stupid question.
Please take a look at the right panel. You forgot to include necessary libraries. Add them in order (jQuery > jQueryUI > Bootstrap) and it shoudl all work!
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript">
<link href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
http://jsfiddle.net/bbm035nx/2/