Trying to have a checkbox automatically check 2 other checkboxes - javascript

I'm very new to coding in java... So I apologize for the seemingly simple question.
However, In an Adobe PDF Form, I have a list of seven checkboxes, and when I select checkbox 2,3,or 4 I would like two other checkboxes to either be highlighted or selected.
So if Box B "r2w_att_B" is checked
then
"r2w_min_cond1" and "r2w_min_cond2" should both be checked. and if the form filler decides to check those boxes before selecting B,C or D then nothing should change. basically it is to ensure that you can't select B,C or D and "forget" to select the 2 minimum conditions.
and the same would be true for box C and D, so in theory the code should be the same with the exception of name of the initial box, I've used this line from another part of the form and it worked. so I could use that again. [if (event.target.value == "Yes")]
I have no idea how to write this... and the other code snippets I came across, I don't quite understand and cant make them work.
I did piece together a clip of functional code, that on "mouse up" a checkbox triggers a textbox to copy "value" to another text box.
I appreciate anyone and everyone's guidance as I start learning a Java

You can do something like this:
var checkbox1 = document.getElementById("ck1");
var checkbox2 = document.getElementById("ck2");
var checkbox3 = document.getElementById("ck3");
checkbox1.addEventListener('change', function() {
checkbox2.checked = this.checked;
checkbox3.checked = this.checked;
});
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="ck1" name="ck1" value="Checkbox1">
<label for="vehicle1"> Checkbox 1</label><br>
<input type="checkbox" id="ck2" name="ck2" value="Checkbox2">
<label for="vehicle2"> Checkbox 2</label><br>
<input type="checkbox" id="ck3" name="ck3" value="Checkbox3">
<label for="vehicle3"> Checkbox 3</label><br><br>
<input type="checkbox" id="ck4" name="ck4" value="Checkbox4">
<label for="vehicle3"> Checkbox 4</label><br><br>
</body>
</html>

if (event.target.value!="Yes")
{getField("firstchkbox").value = "Yes";
getField("secondchkbox").value = "Yes"; }
This is ultimately how I got it to work in Adobe.
on mouse down, it executes a Javascript, and checks the two boxes.

Related

django auto check if i save it to database

Here is my html:
<input type="checkbox" value="1" name="Visual" id="visual">
<input type="checkbox" value="1" name="Tuberculosis" id="Tuberculosis">
<input type="checkbox" value="1" name="Skin" id="Skin">
<script type="text/javascript">
$('#checkbox-value').text($('#checkbox1').val());
$("#checkbox1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
} else {
$(this).attr('value', 'false');
}
$('#checkbox-value').text($('#checkbox1').val());
});
</script>
Here is my view:
Visual = request.POST['Visual']
Tuberculosis = request.POST['Tuberculosis']
Skin = request.POST['Skin']
V_insert_data = StudentUserMedicalRecord(
Visual=Visual,
Tuberculosis=Tuberculosis,
Skin=Skin
)
V_insert_data.save(
Why is it every time I save the data to my database, the Visual, Tuberculosis and Skin are automatically checked even though I didn't check it when I was saving it? Or I think my javascript is wrong?
You don't need $('#checkbox-value').text($('#checkbox1').val());, unless you have such element on the page
which you haven't shown us.
You can't define more than one element on the same page with the same id.
(Same goes for the name attribute).
Use different ids as shown in my code and match the chekboxes by class/name.
Don't put value="1" inside your checkboxes.
Put your jQuery code inside a $(function() { }); which is an alias for $( document ).ready().
More info here.
Don't use bare request.POST values, use the sanitized self.cleaned_data['var_name'] instead.
I don't think it's a good idea to have param names with capital letters (this is just a note, it will not impact the functionality). According
to Python's PEP 8, only classes should start with a capital letter.
Frontend:
<input type="checkbox" name="Visual" id="checkbox1" class="checkbox-js-trigger-class">
<input type="checkbox" name="Tuberculosis" id="checkbox2" class="checkbox-js-trigger-class">
<input type="checkbox" name="Skin" id="checkbox3" class="checkbox-js-trigger-class">
<script type="text/javascript">
$(function() {
$(".checkbox-js-trigger-class").on("change", function(){
var new_val = $(this).is(':checked') ? 1 : 0;
$(this).val(new_val);
});
});
</script>
Backend:
It's best to use Model Form:
class StudentUserMedicalRecordForm(ModelForm):
class Meta:
model = StudentUserMedicalRecord
fields = ['Visual', 'Tuberculosis', 'Skin']
Because you have default value given as "1" here
<input type="checkbox" value="1" name="Visual" id="visual">
And also there is no element with id = "checkbox1" or id = "checkbox-value" which are referenced in your script.
Checkbox inputs are actually a little strange and work differently than how you think they work.
You don't need jQuery to handle the case when a checkbox has been changed. The browser and HTML handle that for you. (Sort of like how you don't need to listen for keys being pressed while the user is focused on a input type="text" to make letters show up in the text box.)
Instead, what happens is if the user checks the checkbox, the input will have an attribute called checked. It can look something like this .
The checkbox input tag also has two other attributes name and value. These are what get sent to the server when the form is submitted. BUT it only sends the name and value pair for the checkboxes that are checked! For the checkboxes that are not checked, it sends nothing. So if every checkbox has a name and value you can think of it as a key-value pair. If the check box is checked, it will send key=value to the server. You are allowed to have more than one value for a single key if you designate the name as being the name of an array.
So imagine you have a form like this:
<input type="checkbox" name="disease[]" value="tuberculosis" checked>
<input type="checkbox" name="disease[]" value="chickenpox" checked>
<input type="checkbox" name="disease[]" value="smallpox">
<input type="checkbox" name="needs_medicine" value="true" checked>
<input type="checkbox" name="recovered" value="whatevervalue">
When that form is submitted, the server will receive something that looks like "disease=[tuberculosis,chickenpox]&needs_medicine=true"
Notice that smallpox and recovered are not mentioned because they are not checked. Also notice that it's not super important what you put as the value of a checkbox that is not a multiple choice checkbox (in this example, needs_medicine) because the value that gets sent to the server will always either be the value of the checkbox (in this case, the string "true").

only show first n checkboxes/elements in javascript

I have a website and I have a search form with some options. You can view it here: https://www.travelstuff.be/search/. Because it's in Dutch, I will guide you through.
When you look at the left side of the page, you see 2 lists with blue squares ('Type' en 'Merk' ('Merk' is dutch for 'Brand').
The problem is with the 'Merk'-list. It will get quite long. For now, only 12 checkboxes are shown, but when I add more brands, the list will get longer (obviously).
I want to create a little snippet in JavaScript, that only shows the first 5 (or 10) checkboxes + a button below. When the button is clicked on, all the checkboxes are shown.
I use Twig to render the layout, and it renders it like this:
<div class="filter">
<div class="title">Merk</div>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
<label><input type="checkbox" name="..." class="..." />...</label>
...
</div>
It's technically impossible to wrap the first 5 labels in another div (due to the limitations of Twig). Is there another way to do this? I really have no clue how to search for a problem like this, I think a solution is on here somewhere, but I have no idea where to look for it. English is not my native language.
Thanks in advance!
Edit
This is my 'solution'.
$('.filter').each(function(){
var self = $(this);
var labels = self.find('label');
var labelsSelected = self.find('label[data-selected="true"]').length;
if(labelsSelected == 0){
self.find('label:gt(4)').hide();
var $a = $('<a href="#" />').html('Meer').appendTo(self);
$a.on('click', function(e){
e.preventDefault();
self.find('label').show();
$(this).remove();
});
};
});
First of all, I loop over each filter. I get all the labels in it, and I check if any checkboxes are selected. If so, all the labels must be shown. If not, only the 5 first labels must be shown.

Make checkboxes required

I already looked to similar questions but I still can't figure out how to fix it. On my webpage, I have some radio checkboxes which I would like to be required before going to the next question.
I have the following partial code:
<p>
Select the option that fits most to you<br><br>
<label>
<input type="radio" name="typesport" value="teamsport" >
I prefer a teamsport</label><br>
<label>
<input type="radio" name="typesport" value="individual">
I prefer an individual sport</label><br>
</p>
Next question
Can someone help me with getting a javascript code, that actually works for all radio-boxes, where you could only go to the next question when 1 radio-box is selected?
Cheers,
Max
Edit: What I've tried so far is the following:
I added "required" to the label, so it looked like this:
<label><input type="radio" name="typesport" value="teamsport" required> I prefer a teamsport</label><br>
I also added the ID to the button:
Next question
Furthermore, I used this JS script:
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=radio]:checked").length;
if(!checked) {
alert("You must check at least one radio.");
return false;
}
});
});
However, this works fine for only one question. When I add this to all the other questions, I still can go to the following question when I click on the button Next question, and that is not what I want.
Radio boxes are fairly simple in nature in that you should always have at least one option in a radio-group checked by default. Preferably a N/A or 'Please Select' option.
In which case you would want to validate against the 'Please Select' option instead:
//when user clicks <a> element
$(".next-button").click(function() {
//group on radio button name and test if checked
if ($("input[name='typesport']:checked").val() == 'select') {
alert('Nothing is checked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Select the option that fits most to you<br><br>
<label><input type="radio" name="typesport" value="select" checked="true" > Please Select </label><br>
<label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
<label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
Next question
However
If you really want to validate that an option has been checked:
This should work:
//when user clicks <a> element
$(".next-button").click(function()
{
//group on radio button name and test if checked
if (!$("input[name='typesport']:checked").val()) {
alert('Nothing is checked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Select the option that fits most to you<br><br>
<label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
<label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
Next question
HTML5 supports the required attribute for radio buttons. I did some searching and HTML5: How to use the "required" attribute with a "radio" input field has more detailed information about this attribute.
You can set a radio button checked by default by using the checked attribute.
To check if it's checked or not, use this code :
if ($('input[name=typesport]').attr('value') != undefined) {
//execute code when it is checked
} else {
//execute code when it's not checked
}

Two Checkboxes Being Checked at the Same Time

I have two checkboxes. What I need is when someone checks one of the boxes, it will automatically check the other one as well. And vice versa, if someone unchecks one of the boxes, it unchecks both. This is a bundle package on the form and they can not get one without the other.
<input type="checkbox" id="chk1" name="chk1" value="100">Voicemail<br />
<input type="checkbox" id="chk2" name="chk2" value="50">VM Support
Any help is greatly appreciated!
Why not this?
<input type="checkbox" id="chk1" name="chk1" value="100">
<label for="chk1">Voicemail and VM Support</label>
Assuming you want to only test these two checkboxes (and not every one on the page), you can use a jQuery Multiple Selector to access the onClick event for both. Using this you can test the checked status of the checkbox that was just clicked, and then assign that status of both checkboxes to match the one that was just clicked.
$('#chk1, #chk2').on('click', function(){
var checked = $(this).is(':checked');
$('#chk1, #chk2').attr('checked', checked);
});
Try this
$('#chk1 , #chk2').on('click', function(){
$('#chk1 , #chk2').attr('checked', $(this).is(':checked'))
});
FIDDLE
FIDDLE

Radio input and alert in Javascript

I need some help.
I have program that changes table values based on user input in radio box
similar to this page:
clicky
But the problem is I want users to select the radio input only once; if they select another
radio then values of tables get messed up.
So what I want to know is how can I make an alert box when user selects the radio input twice?
Similar to this website clicky try clicking radio button twice and alert popsup.
Please can anyone help?
It's difficult to prevent an event on a radio button input node without bringing in help from outside libraries. A simple solution is to just disable the buttons from within an onclick function attached to each input node. Like so: http://jsfiddle.net/c73Mh/ . If they still need to be able to select the radio buttons for whatever reason, you can cancel the selection by selecting the button that was initially selected from within that same function. Hope this helps!
For simplicity in my example I'm assuming that the id of each radio button is a combination of the name and value attributes. In addition to what I've given you below you will need to add a reset() function of some kind that sets selectedValues = {}; and deselects all radio buttons.
<input type="radio" name="group1" value="A" id="group1A" onclick="radioClicked(this);" />First option
<input type="radio" name="group1" value="B" id="group1B" onclick="radioClicked(this);" />Second option
<input type="radio" name="group2" value="A" id="group2A" onclick="radioClicked(this);" />First option
<input type="radio" name="group2" value="B" id="group2B" onclick="radioClicked(this);" />Second option
var selectedValues = {};
function radioClicked(rb) {
if (selectedValues[rb.name] === undefined) {
selectedValues[rb.name] = rb.value;
doTableProcessing();
}
else {
alert("You can't change the selected values");
document.getElementById(rb.name + selectedValues[rb.name]).checked = true;
}
}

Categories

Resources