only show first n checkboxes/elements in javascript - 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.

Related

Trying to have a checkbox automatically check 2 other checkboxes

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.

Inserting Handlebars to the DOM in Ember

I am generating a list of checkboxes & radio buttons based on data coming from a server. The page is a Handlebars template using Ember. To generate my list on the page, I am using the following line of code:
document.getElementById('radioList').innerHTML = newHtml;
This works fine if newHtml is set to something like:
<li><input type="radio" id="radio1" name="radio /><label for="radio1">List item one</label></li>
However, I'd like events to be triggered based on these radio buttons (or checkboxes) being selected or unselected - and after some googling, it would seem using Handlebars helpers is the way to go. But when I try to insert the radio button using handlebars, with the newHtml set as such:
<li>{{input type="radio" id="radio1" name="radio }}<label for="radio1">List item one</label></li>
The text just appears rather than a radio button itself. Looking further into this seems to suggest that the Handlebars template I'm inserting into needs recompiled? I may be wrong, but I've spent quite a bit of time searching for answers to this problem and can't seem to find them. Any help would be appreciated!
This may help you to do this with jQuery.
Triggering using button for example
<h2>Click and select radio button</h2>
<input type="button" id="btn" value="Generate"/>
<input type="hidden" value="1" id="hid" />
JQUERY
$("#btn").click(function(){
var generatedradios=$("#hid").val();
var str='<input type="radio" class="generated" data-generated="'+generatedradios+'" id="radio1" name="radio" />';
$("#hid").val(Number(generatedradios)+1);
$("body").append(str);
});
$(document).on("change",".generated",function(){
alert($(this).attr("data-generated"));
});
FIDDLE
http://jsfiddle.net/Isakkiraj/wLg1p8as/

How to hide checkbox text

I have been playing around with html lately and ran into a slight issue.
Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:
<input type="checkbox" id=check1 status="display:none">Option 1<br>
But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?
I would suggest using the <label>-tag around the whole thing:
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.
Also note that status is not a valid attribute. For styling use style.
Wrap the input in a div and apply the "style" tag to the div.
<div style="display: none;">
<input type="checkbox" id="check1">Option 1<br>
</div>
you need to wrap it in a span/label and then hide it
<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>
Place checkbox inside div and apply style to div
<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>
<span style="display:none"><input ...>Option 1</span>
or better
<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>
I'm sure you mean style="display:none and not status, but here goes:
Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:
<div id="checkboxcontainer" style="display: none">
<input type="checkbox" id="check1">
Option 1
<br>
</div>
<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>
JS:
$('label[for="check1"]').hide();
try something like this
<label style="display:none"><input type="checkbox" id=check1 >Option 1</label>
Use the below to get your desired need.
Wrap the entirety with a label which will then allow you to use style="display:none to hide the label.
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
You also used status instead of style but by using the code above you'll do fine.
Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic.
First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag.
As all the other answers here wrote, you obviously need a label with your input tag:
<input type="checkbox" id="check1"><label for="check1" >Option 1</label>
You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):
<label for="check1"><input type="checkbox" id="check1">Option 1</label>
I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:
$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!
I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)
/J.

jQuery Tools Validator Custom Effect - Adding & Removing effects

I've worked on this for quite some time now, and am stumped. I'm hoping someone has some direction for me. First the code:
The jQuery:
$("#paperwork").bind("onFail", function(e, errors) {
if (e.originalEvent.type == 'submit') {
$.each(errors, function() {
var input = this.input;
input.parent().css({color: 'red'}).change(function() {
input.parent().css({color: '#444'});
});
});
}
});
And a sampling of the HTML:
<input id="group_1" required="required" type="radio" name="attending" value="Yes" />Yes
<input id="group_1" type="radio" name="attending" value="No" />No
<input id="group_1" type="radio" name="attending" value="Not Provided" />Not Provided
<input id="group_1" class="single_text_input" type="text" name="primary_referral" />
<input id="group_1" class="single_text_input" type="text" name="secondary_referral" />
<span class="group_1">Referrals</span>
There are several sections that look much like the above. Each with a corresponding <span> (e.g. "2", "3", etc...) What I'm trying to accomplish is this:
When the validator runs, the .parent() element of each input turns red. That is working. When the user makes a change to the input, the .parent() element returns to its original color. That is also working.
In addition to this, I would like to turn each input section's corresponding <span> red (text or background). Then, when all the inputs within that section are changed, the corresponding <span> is returned to its original appearance. One issue (at least for me) is that the div containing the inputs and the corresponding <span> do not seem to be related to each other, whether by .parent(), .child(), or .closest.
One issue (at least for me) is that the div containing the inputs and
the corresponding do not seem to be related to each other,
whether by .parent(), .child(), or .closest.
Check if that is true by trying to reach the span in a live console like the Google Chrome Inspector's one.
Just set a class common to those divs, so you can select them later by that class.

Rails: two radio selects on same source list

Wondering how to approach this... Best to look at the picture to visualize the, hopeful, UI for a form for choosing options in a list. Users need to be able to make a first choice and a second choice for each option. One and only one can be selected in each column, and for that matter, each row.
At first I thought, naturally, 2 radio button groups might work...but not sure how? Perhaps hidden radio_buttons whose values are manipulated via Javascript/JQuery in a click event on each div? Event should also check/handle "collisions" when user tries to select same option for both choices.
Or, would this perhaps be better with two hidden collection_selects...or even simpler, just two hidden text_fields...which javascript can populate with the ID of the selected option?
Or maybe I'm overlooking something more obvious.
I'm new(ish) to javascripting with Rails so looking for advice/validation.
Thanks.
I think something like this is what your looking for:
HTML:
<form>
<p class="exclusiveSelection">
Selection One
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Two
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Three
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<input type="button" id="submitForm" value="Submit">
</form>
JavaScript:
$(function() {
$(".exclusiveSelection input[type='radio']").click(function() {
$exclusiveSelection = $(this).parent();
$('input[type='radio']', $exclusiveSelection).attr('checked', false);
$(this).attr('checked', true);
});
});
It ensures that the values are unique across column and row and works with jQuery 1.2.6 - 1.7.1. There is also a JSFiddle example.
If you need help adapting this for Rails let me know, however it should be straight forward.

Categories

Resources