I have a checkbox on a form which works fine. When the form s clicked I am trying to change the value to 1, when not clicked the value should be zero. I am filling the field dynamically using JavaScript. The problem is, when I log it in console I get an empty value..
Checkbox field
function checkMark() {
var checkBox = document.getElementById("spouse");
if (checkBox.checked == true){
checkBox.value = '1';
} else {
checkBox.value = 'O';
}
}
var spouse = $('#spouse').val();
console.log(spouse);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="spouse" value="" class="spouse" onclick="checkMark()">
The reason of your issue is that you're logging just when the page is initially loaded. You have to log the result every time you change the checkbox value.
Also, you can use ternary operator in order to simplify the solution.
function checkMark() {
var checkBox = document.getElementById("spouse");
checkBox.value = checkBox.checked ? '1' : '0';
log();
}
function log(){
var spouse = $('#spouse').val();
console.log(spouse);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="spouse" value="" class="spouse" onclick="checkMark()">
Try calling your function over onChange instead of onClick
Related
In my models.py I have
urgency = models.BooleanField(blank=True, default=False, verbose_name="Hitno otklanjanje")
And I wish to run a javascript function to change a text field depending on 'True' or 'False' on that Boolean field. Problem is, I can't get the value. When I use document.getElementById('id_urgency').value; I always get 'on', no matter of clickbox check. Why is that? I guess I'm reading the value wrong? Or?
<script type="text/javascript">
function makeReadOnly()
{
var a = document.getElementById('id_urgency').value;
console.log(a);
if (document.getElementById('id_urgency').value == 'True'){
document.getElementById('id_date_days').readOnly = true;
}else if (document.getElementById('id_urgency').value == 'False'){
document.getElementById('id_date_days').readOnly = false;
}
}
document.getElementById('id_urgency').addEventListener('change', makeReadOnly);
This is a part of django form. If I go to 'inspect' on that page, that Checkbox doesn't even have value, why is that?
input type="checkbox" name="urgency" class="checkboxinput form-check-input" id="id_urgency"
By using .value, you get the value attached to that checkbox, not whether the checkbox is checked or not.
You can check if a checkbox is checked with:
var a = document.getElementById('id_urgency').checked;
or as specified by javascripttutorial.net:
To check if the accept checkbox is checked, you use the following
code:
const cb = document.getElementById('accept');
console.log(cb.checked);
(…)
If you get the value attribute of a checkbox, you always get the 'on' string whether the checkbox is checked or not. For example:
const cb = document.getElementById('accept');
console.log(cb.value); // on
The problem is that I get on value from check box when it's checked and when it's unchecked... what do I miss?
HTML checkbox code :
<input type="checkbox" id="noextracharge" name="noextracharge" >
<label for="noextracharge">no extra charge</label><br>
to get the values from page's inputs I use :
function getInputValues() { //var enabledInputs array of inputs ids
var inputValues = {};
$.each(enabledInputs, function (index, inputId) {
var input = $(inputId);
inputValues[input.attr("name")] = input.val();
});
return inputValues;
};
It will always return the same.
To get if the checkbox is checked or not use .is(":checked")
if you need to check the type before use prop("type") === "checkbox"
I have a simple HTML form with two inputs. One is a radio input and the other is a numeric input.
Using a Javascript function, if the radio option is selected as Insurance - YES(1), then the script must force a numeric value input on the Insurance Value ins_value input. If the radio input is selected as NO, then no input to be entered in the text input.
I have tried to find a similar example but have only found simple examples where an alert is triggered.
I am learning Javascript and have been through tutorials - but also no similar examples.
<script>
function INSURANCE() {
var insurance = document.forms["RegForm"]["optradio"];
var ins_value = document.forms["RegForm"]["ins_value"];
if (insurance.value == 0) {
"";
return false;
} else {
if (ins_value.value == "") {
window.alert("Please insert Insurance value.");
ins_value.focus();
return false;
}
return true;
}
</script>
I expect once the form is submitted, it should either force an insurance value input or not, based on the radio input selection.
First of all, you need a checkbox for you're use case. Radio buttons force a selection of one in many. You only have a "is numeric" flag meaning you're value is either true or false.
Well I guess you can achieve you're goal by changing you're input type according to user selection:
<input id="optcheckbox" type="checkbox" onclick="HandleCheckboxClick();" />
<input id="ins_value" type="text" onclick="HandleCheckboxClick();" />
<script>
function HandleCheckboxClick() {
var type = 'text';
var checkbox = document.getElementById('optcheckbox');
if(checkbox.checked) {
type = 'number';
}
document.getElementById('ins_value').type = type;
}
</script>
I hope that helps.
Best regards
Only seeing the Javascript it's difficult to figure out what's going on, including the HTML would help a lot. Also, this question is a big vague which is makes it hard to answer.
First, when are you trying to trigger the forcing the numeric value? When the user clicks on the radio button? If so, then call that function on the change event. If you're going to change it on the submit, then put the code in the submit function.
I recommend building an array of numeric values and matching that up with the 0, 1, 2, ... values of the radio buttons. When you set the text input, plug that value into your numeric array.
Here's a JS fiddle of using an array in conjunction with the radio button values.
https://jsfiddle.net/Chris_Hayes/coxta1bw/1/
var form = document.querySelector("form");
var numbers = [30, 20, 80];
form.addEventListener("submit", function(event) {
form["textinput"].value = numbers[form["contact"].value]
event.preventDefault();
}, false);
If the user skips the radio buttons, just make that check in the on submit function before filling in the numerical input.
var radio = document.getElementById('optradio');
var input = document.getElementById('ins_value');
radio.addEventListener("click", function(){
if(radio.value == 0){
radio.value = 1;
this.checked = true;
input.removeAttribute('disabled')
input.value = radio.value;
}
else{
radio.value = 0;
input.setAttribute('disabled','disabled');
input.value = '';
this.checked = false;
}
});
<input type="radio" name="optradio" id="optradio" value="0">
<input type="number" name="ins_value" id="ins_value" value="" disabled>
add disabled attribute to your numeric input like so
html:
<input type="radio" name="optradio" id="optradio" value="0">
<input type="number" name="ins_value" id="ins_value" value="" disabled>
javacript:
<script type="text/javascript">
var radio = document.getElementById('optradio');
var input = document.getElementById('ins_value');
radio.addEventListener("click", function(){
if(radio.value == 0){
radio.value = 1;
this.checked = true;
input.removeAttribute('disabled')
input.value = radio.value;
}
else{
radio.value = 0;
input.setAttribute('disabled','disabled');
input.value = '';
this.checked = false;
}
});
</script>
add the script below your html code
I have an input and a checkbox. I have managed to change the value in the input on clicking the checkbox, and un clicking etc which works fine.
I'm looking to auto set the checkbox to be checked on page load only if the input value = yes, as this input value is being loaded dynamically via php and may not be yes.
HTML
<input type="text" value = "yes" id ="inputId">
<input type="checkbox" id = "yourCheckboxId">
JQUERY
$('#yourCheckboxId').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('yes');
}
if (!$('#yourCheckboxId').is(':checked')){
$('#inputId').val('no');
}
});
You'll notice that even though the value in the input is set to yes, on page load, the checkbox isn't checked. This is what I have so far, see jsfiddle here: http://jsfiddle.net/0z9agrw8/1/
Thanks
var input = $('#inputId').val()
if(input === "yes"){
$("#yourCheckboxId").prop('checked', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value = "yes" id ="inputId">
<input type="checkbox" id = "yourCheckboxId">
Do this on page load:
if($('#inputId').val() == 'yes') {
$('#yourCheckboxId').prop('checked', true);
}
If you always want it to be checked on page load, you can simply add the "checked" attribute
eg
<input type="checkbox" id = "yourCheckboxId" checked>
If it's more complicated than that, the other answers will work nicely
I have a checkbox called chkBox1 and i want assign a variable true or false as per the value of selected checkbox.
<input type="checkbox" id="chkBox1">
var chkBox1Val = $('#chkBox1').attr('checked') ? true: false;
The above code is not working. How do i get the value of checkbox checked state and assigned to a variable as true/false?
var chkBox1Val = $('#chkBox1').attr('checked') === 'checked';
Or, if you are using jQuery version greater than 1.6:
var chkBox1Val = $('#chkBox1').prop('checked');
For more info, have a look at the section Attributes vs. Properties of the jQuery .prop() docs.
Use this
var chkBox1Val = $('#chkBox1').is(':checked')
Here's my solution. Hope it helps!
$(document).ready(function(){
var ckbox = $('#chkBox1');
$('input').on('click',function () {
if (ckbox.is(':checked')) {
alert('You have Checked it');
} else {
alert('You Un-Checked it');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input type="checkbox" id="chkBox1">