Develop Reference

Html into search text with jquery

I return the elements of the list with a for loop.
I left one of the elements in this list below as an example.
My goal is to reach the label in this html and read the text value. How can I do that?
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>

Using vanilla JS:
You can find the element with querySelector() and access innerText or textContent property.
var labelText = document.querySelector('label.dd-option-text').textContent;
console.log(labelText);
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>
Using jQuery: Access the text() on the returned object:
var labelText = $('label.dd-option-text').text();
console.log(labelText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
<a class="dd-option"> <input class="dd-option-value" type="hidden" value="3">
<img class="dd-option-image" src="/Images/Sample/0.png">
<label class="dd-option-text">Sampleee</label>
<small class="dd-option-description dd-desc">Sample sampleee.</small>
</a>
</li>

Jquery
let yourListElement = $("ul li")
console.log(yourListElement.find("label").text())
Vanilla Javascript
yourListElement.querySelector(".dd-option-text").textContent

The toggle in the script isn't working for me

I'm using this code that I found online, but it's not working completely the way I want it to.
Basically I am wanting check boxes to hide divs based on the users selection.
I am building an allergens advice page for a restaurant. When a guest selects the allergens they have I want it to hide the dishes that they cannot have.
The above code works perfectly if the guest has one allergen. It hides the div. If they select more than one then the box will reappear.
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.
</div>
<ul>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
</ul>
I'm guessing it's doing it because the code is toggling, but I don't know of any other code to prevent that.
Your help would be greatly appreciated.

I just copied further code from the link
What is happening here is just checkbox from ks-cboxtags class will be affected so any other checkbox will not have this functionality.
when you click on this it will displays div and if its selected div will be hide.
check below snippet for more details.
$(document).ready(function() {
$(".test").click("test"); //ignore this
$(".ks-cboxtags input").click(function() {
$("."+$(this).val()).show();
$(".ks-cboxtags input:checked").each(function() {
$("."+$(this).val()).hide();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<main class="inline-block-center">
<div class="selectt Gluten" style="display: block;">
<strong style="font-size: 18px;">MEXICAN POPPADOMS</strong><br> Crispy blue corn tortillas with roasted tomato salsa, habanero & pepper salsa, green tomatillo & jalapeño salsa.</div>
<div class="selectt Eggs Gluten" style="display: block;">
<strong>PAO DE QUEIJO</strong><br> Traditional Brazilian cheese dough balls served with chipotle butter.</div>
<div class="selectt Gluten" style="display: block;">
<strong>PERUVIAN BOTIJA OLIVES</strong><br> In a herby marinade.</div>
<div class="selectt Milk Gluten" style="display: block;">
<strong>TEQUENOS</strong> <br> A popular Venezuelan street food; cheese filled fried bread sticks served with chipotle butter.</div>
</main>
<ul class="ks-cboxtags">
<li>
<input type="checkbox" id="checkboxOne" value="Gluten">
<label for="checkboxOne"> Gulten</label>
</li>
<li>
<input type="checkbox" id="checkboxTwo" value="Crustaceans">
<label for="checkboxTwo"> Crustaceans</label>
</li>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkboxFour" value="Fish">
<label for="checkboxFour"> Fish</label>
</li>
<li>
<input type="checkbox" id="checkboxFive" value="Peanuts">
<label for="checkboxFive"> Peanuts</label>
</li>
<li>
<input type="checkbox" id="checkboxSix" value="Soy Beans">
<label for="checkboxSix"> Soy Beans</label>
</li>
<li>
<input type="checkbox" id="checkboxSeven" value="Milk">
<label for="checkboxSeven"> Milk</label>
</li>
<li>
<input type="checkbox" id="checkboxEight" value="Tree Nuts">
<label for="checkboxEight"> Tree Nuts</label>
</li>
<li>
<input type="checkbox" id="checkboxNine" value="Celery">
<label for="checkboxNine"> Celery</label>
</li>
<li>
<input type="checkbox" id="checkboxTen" value="Mustard">
<label for="checkboxTen"> Mustard</label>
</li>
<li>
<input type="checkbox" id="checkboxEleven" value="Seasame">
<label for="checkboxEleven"> Seasame</label>
</li>
<li>
<input type="checkbox" id="checkboxTweleve" value="Sulphur">
<label for="checkboxTweleve"> Sulphur</label>
</li>
<li>
<input type="checkbox" id="checkboxThirteen" value="Lupin">
<label for="checkboxThirteen"> Lupin</label>
</li>
</ul>

Your code throws unexpected end of input, you are missing closing parentheses for $(document).ready():
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
In the case of multiple checkboxes that refer to the same product that should stay hidden:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).val();
if($(this).is(':checked')){
$("." + inputValue).hide();
}else{
$("." + inputValue).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectt Eggs Gluten">
<strong>Dough Balls</strong><br/>
Cheese dough balls served with chipotle butter.</div>
<li>
<input type="checkbox" id="checkboxThree" value="Eggs">
<label for="checkboxThree"> Eggs</label>
</li>
<li>
<input type="checkbox" id="checkbox4" value="Gluten">
<label for="checkbox4"> Gluten</label>
</li>

I've rewritten the code without jQuery, as it doesn't seem to need it...
Here is the pen: https://codepen.io/paulmartin91/pen/ExjgQBJ?editors=1011
JS
//object containing each allergen. Add them to this object when adding them to the list - always set to false as default
let choices = {
Eggs: false,
Gluten: false
}
let clickedBox = (input) => {
//mark the selected allergen as checked
choices[input.value] = input.checked
//returns an array of classes for each element with the selected allergen
let selected = document.getElementsByClassName(input.value)
//iterates though array of elements with selected allergen
for (let i = 0; i < selected.length; i++) {
//creates an array of classes for each element
var classList = selected[i].className.split(' ')
var counter = 0
classList.forEach(x=>{
//if the element contains a class that is checked, hide it
if (choices[x]) {selected[i].style.display = 'none'} else{
//count the number of classes that aren't checked
counter++
//if the element has no classes that are checked, show it
if (counter == classList.length) {selected[i].style.display = 'block'}
};
})
}
};
HTML
<div class=" Eggs Gluten">
<strong>Eggs Gluten</strong>
</div>
<div class="Eggs ">
<strong>Eggs</strong>
</div>
<div class="Gluten ">
<strong>Gluten</strong>
</div>
<li>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxOne"
value="Eggs">
<label for="checkboxOne"> Eggs</label>
<input
onclick = 'clickedBox(this)'
type="checkbox"
id="checkboxTwo"
value="Gluten">
<label for="checkboxTwo"> Gluten</label>
</li>
It now iterates through all the elements that match the class and hide/show them based on the condition of the checked box.
Hope this helps!
Edit: fixed code, should work now!

How to stop proceeding to the next POP box even after clicking on Ok in wordpress using javascript?

I have a form which can be shown in the image below :
Now, When I don't click on any of the check box it shows error kindly select an option but when I click on OK button it proceed to other popup form.I want to stay on same pop up page.Here is my popup form code :
function valthisform()
{
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
if (checkedOne == true)
{
}
else
{
alert ("Kindly select at least one option !")
form.reload();
}
}
<form name="myform">
<div id="outer-container">
<label class="ac-service">
Choose Your Service
</label>
<br>
<hr/>
<label id="l-1"><input type="checkbox" id="c1" name="checkboxes">AC Not Cooling Properly/Repair</label>
<ul class="u">
<li>Complete Diagnosis</li>
<li>Final Charges Based on Inspection</li>
</ul>
<hr/>
<label id="l-1"><input type="checkbox" id="c1" name="checkboxes">Wet Servicing</label>
<ul class="u">
<li>Deep Cleaning the AC for fresh air</li>
<li>Filter, coils etc. cleaned with water</li>
<li>Save upto 20% on your summer electricity bill with regular servicing </li>
</ul>
<hr/>
<label id="l-1"><input type="checkbox" id="c1" name="checkboxes">Installation</label>
<ul class="u">
<li>Parts & wall modification charges extra</li>
</ul>
<hr/>
<label id="l-1"><input type="checkbox" id="c1" name="checkboxes">Uninstallation</label>
<hr/>
<label id="l-1"><input type="checkbox" id="c1" name="checkboxes">Gas Charging</label>
<ul class="u">
<li>Complete vacuuming and gas filing</li>
<li>Partial gas refilling/top-up is not recommended</li>
<li>Minor leakages will be fixed</li>
<li>Leakage check with Nitrogen is not included</li>
</ul>
<hr/>
<input type="button" id="fixed-button" onclick="return valthisform(this.form);" value="Next" class="popmake-391">
</div>
</form>
I m using popup maker for creating pop up in wordpress and contact form 7 for creating forms.
Thank You!

How to build a filter module with multiple checkboxes?

I've a form with multiple checkboxes and a list which will be filtered according checked values. I can filter according to one value but when two values check, it won't work properly.
I've shared sample for practice below and here is jsFiddle also.
When you select A and B together and submit form, you will inspect, C is coming also.
$('form').submit(function() {
$(this).find('input[data-type]').each(function(key,val) {
if ( val.checked ) {
// get checked input's data type
var checkedType = $(this).data('type');
// hide items which doesn't match with current type
$('ul').find('li').show().filter(function() {
return $(this).find('a[data-'+ checkedType +'="true"]').length == 0;
}).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<label>
<input data-type="a" type="checkbox" />
<b>A</b>
</label>
<label>
<input data-type="b" type="checkbox" />
<b>B</b>
</label>
<label>
<input data-type="c" type="checkbox" />
<b>C</b>
</label>
<input type="submit" value="Filter" />
</form>
<ul>
<li>
<a data-a="true" data-b="false" data-c="false">A</a>
</li>
<li>
<a data-a="false" data-b="true" data-c="false">B</a>
</li>
<li>
<a data-a="false" data-b="false" data-c="true">C</a>
</li>
<li>
<a data-a="true" data-b="true" data-c="false">A, B</a>
</li>
<li>
<a data-a="true" data-b="false" data-c="true">A, C</a>
</li>
<li>
<a data-a="false" data-b="true" data-c="true">B, C</a>
</li>
</ul>

after a slight work around i think i got it working
$('form').submit(function() {
var checkedType = [];
$(this).find('input[data-type]').each(function(key,ele) {
if (ele.checked)
checkedType.push($(ele).data('type'));
});
$('ul').find('li').show();
$.each(checkedType, function(i, e){
$('ul').find('a[data-'+ e + '="false"]').parent("li").hide();
});
return false;
});
hope this is what you need
but if you need function for filter, im helpless

Multiple checkbox values search javascript

I have a list of keywords, and I've created a checkbox for each. My template has a form wrapping the content, so I can't have a nested form around the checkbox list.
How can I send the selected checkbox values to my search results page?
The form that wraps the content doesn't have any actions or methods applied:
<form id="BoostMasterForm" runat="server">
This is an example of the HTML markup of my checkbox list (the checkboxes will be different depending on the keywords):
<div class="checkboxes">
<ul>
<li>
<input type="checkbox" name="search" class="options" value="one">
<label>one</label>
</li>
<li>
<input type="checkbox" name="search" class="options" value="two">
<label>two</label>
</li>
<li>
<input type="checkbox" name="search" class="options" value="three">
<label>three</label>
</li>
</ul>
<input type="submit" value="Submit"/>
</div>
How can I use javascript or jQuery to submit the values of the multiple checkbox selections and on submit action them to the following URL: '/imagery/image-search.aspx'
The resulting URL for a search where option 1 and 3 are submitted should be: '/imagery/image-search.aspx?search=one%20three'
I'm using this javascript that I found on another post, however I need it to append the form an the action and the method. My website is ASP, where this post is for a PHP site:
Sending multiple checkbox options
$('.options').click(function() {
var selectedItems = new Array();
$(".checkboxes input:checkbox[name=search]:checked").each(function() {selectedItems.push($(this).val());});
var data = selectedItems.join('|');
$("#opts").val(data);
});
If anyone can help, it'd be greatly appreciated.
Cheers, JV

This works for your example.
$('input[type=submit]').on('click', function(evt) {
var selectedValues = [];
var url = '/imagery/image-search.aspx?search=';
$('input[type=checkbox]:checked').each(function() {
selectedValues.push($(this).val());
});
url += selectedValues.join(' ');
window.location = url;
});​

I am still not clear. But here is a code where you can build an string and pass it
<script type="text/javascript">
function fnc()
{
elements=document.getElementById("BoostMasterForm").elements;
str="";
for(i=0;i<elements.length;++i)
{
if(elements[i].type=='checkbox' && elements[i].checked)
str=str+elements[i].value;
}
alert(str);
//alert(window.location.href+'?str='+str);
//document.getElementById("aform").submit();
}
</script>
<form id="BoostMasterForm" onsubmit="fnc()">
<div class="checkboxes">
<ul>
<li>
<input type="checkbox" id="search1" name="search" class="options" value="one">
<label>one</label>
</li>
<li>
<input type="checkbox" id="search2" name="search" class="options" value="two">
<label>two</label>
</li>
<li>
<input type="checkbox" id="search3" name="search" class="options" value="three">
<label>three</label>
</li>
</ul>
<input type="submit" value="Submit"/>
</div>
</form>