Develop Reference

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!

Summing up value for hidden field when checkbox is clicked not working

I have a checkbox but has the value assigned to the item's name. Now i have this hidden field which has the value assigned to the item's price. now when i run my jquery using the hidden field to calculate the sum of the selected items, it doesn't work. It works the other way around when i assign the price and calc ID to the checkbox and not the hidden field.
Here's my jquery:
<script type="text/javascript">
function calcscore(){
var score = 0;
$(".calc:checked").each(function(){
score+=parseInt($(this).val(),10);
});
$('#price').text(score.toFixed(2));
$("input[name=sum]").val(score)
}
$().ready(function(){
$(".calc").change(function(){
calcscore()
});
});
</script>
And my html:
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>
The Title
</label>
<input type="hidden" name="title8" value="250">
</li>
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title
</label>
<input type="hidden" name="title8" value="150">
</li>
<p>Total: PHP <span id="price">0</span></p>
Any insight will be greatly appreciated. Thanks

Your code should be more like the solution below and check how it would be working on jsfiddle: https://jsfiddle.net/yehiaawad/wwtwmaLv/
Your HTML:
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>
The Title
<input type="hidden" name="title8" value="250">
</label>
</li>
<li>
<label>
<input class="calc" type="checkbox" name="seasoning[]" value="Title1"/>The Title
<input type="hidden" name="title8" value="150">
</label>
</li>
<p>Total: PHP <span id="price">0</span></p>
Your JS
function calcscore(){
var score = 0;
var checked=$(".calc:checked ~ input[type=hidden]").each(function(){
score+=parseInt($(this).val());
});
$('#price').text(score.toFixed(2));
}
$(document).ready(function(){
$(".calc").change(function(){
calcscore()
});
});

De-selecting a select all checkbox

I have a checkbox that will select all, at the moment if I press it, it will select all the the options(which is good!), then if I deselect one of them it doesn't deselect the Select All option. Any help in how to do this would be gratefully appreciated.
<span class="glyphicon glyphicon-check"></span>
<label for="sel1">Select days:</label><br />
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>
</div>
Script I am currently using to Select All:
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
});
$(document).ready(function){
}

Example:
http://jsfiddle.net/0e018w0y/
You're most of the way there.
I'd attach a "change" event listener to all the checkboxes, confirming that (on change) whether all the checkboxes are selected or not... (FYI you're using checkboxes and not radio buttons. Radio buttons only allow 1 to be selected at a time.)
// On change of any (not "Select All" checkbox)
$('input[name="selected[]"]').change(function () {
var selectAll = true;
// Confirm all checkboxes are checked (or not)
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', selectAll);
});
In the example I've tried to follow your convention for checking if things are selected or not etc - except I've used "change()" rather than "click()" (which captures any change event, not just mouse-clicks).
Line by line:
$('input[name="selected[]"]').change(function () {
...
}
This captures the change event on all select boxes. You could use classes or a name convention to identify the checkboxes to attach it to.
var selectAll = true;
The scope of this variable reaches the nameless function provided to the .each(...) call which follows. We're using this to track whether every checkbox is checked or not.
$('input[name="selected[]"]').each(function (i, obj) {
if ($(obj).is(':checked') === false) {
// At least one checkbox isn't selected
selectAll = false;
return false;
}
});
This checks every checkbox, see if any are not checked.
Then we update the "Select All" checkbox appropriately.
Looking at it again (2 minutes later), I can see this could be reduced actually:
var allSelected = ($('input[name="selected[]"]:not(:checked)').length === 0);
// Update "Select All" checkbox appropriately
$('input[name="all"]').prop('checked', allSelected);
I've not tested if this is faster ... I've just offloaded the checking of "is checked" to jQuery itself. The "length" property returns how many elements match the criteria - ":not(:checked)" does what you'd expect, matches only the aforementioned inputs which are not checked.
If the count is not equal to 0, we deselect the "Select All" checkbox.
Example:
http://jsfiddle.net/zyxgm2kz/

Try this:
You need to bind a change listener for all the days checkbox and if all the checkboxes are checked then you can play with select all checkbox checked property.
$(document).ready(function () {
var allCB = $('input[name="selected[]"]');
var mainCB = $('input[name="all"]')
mainCB.on('click', function () {
var status = $(this).is(':checked');
allCB.prop('checked', status);
});
allCB.on('change', function () {
var status = $('input[name="selected[]"]:checked').length === allCB.length;
$('input[name="all"]').prop('checked', status);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<input type="checkbox" name="all" id="all" />
<label for='all'>Select All</label>
<ul>
<ul>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_1" value="1" />
<label for="box_1">Monday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_2" value="2" />
<label for="box_2">Tuesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_3" value="3" />
<label for="box_3">Wednesday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_4" value="4" />
<label for="box_4">Thursday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_5" value="5" />
<label for="box_5">Friday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_6" value="6" />
<label for="box_6">Saturday</label>
</li>
<li class="moveli">
<input type="checkbox" name="selected[]" id="box_7" value="7" />
<label for="box_7">Sunday</label>
</li>
</ul>
</ul>
</li>

you can try this one:
$(document).ready(function() {
$('input[name="all"],input[name="title').click(function(event) { //on click
if(this.checked) {
$('input[type="checkbox').each(function() {
this.checked = true;
});
}else{
$('.input[type="checkbox').each(function() {
this.checked = false;
});
}
});
});
DEMO FIDDLE

$('input[name="all"],input[name="title"]').bind('click', function () {
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).prop('checked', status);
});
var checkbox = $(':checkbox').not('#all');
$(checkbox).change(function () {
checkbox.each(function () {
if ($(this).is(':checked')) {
} else {
$(':checkbox#all').prop('checked', false)
}
})
})
Get the checkbox except the all then check if one is uncheck remove the check from all
DEMO

Jquery mouseover value

I have the following html which I use to rate price range:
<li class='voteable-attribute off clearfix' id='attributes_price_range'>
<label class='primary formField'>Price Range:
</label>
<fieldset id='price_choices'>
<legend class='offscreen'>Price Range:</legend>
<p class='offscreen'>Price per person:</p>
<ul class='clearfix price-0'>
<li>
<input type='radio' id='price-1' name='RestaurantsPriceRange2' value='1'> <label for='price-1' class='offscreen'>
Cheap, Under $10
</label>
</li>
<li>
<input type='radio' id='price-2' name='RestaurantsPriceRange2' value='2'> <label for='price-2' class='offscreen'>
Moderate, $11 - $30
</label>
</li>
<li>
<input type='radio' id='price-3' name='RestaurantsPriceRange2' value='3'> <label for='price-3' class='offscreen'>
Spendy, $31 - $60
</label>
</li>
<li>
<input type='radio' id='price-4' name='RestaurantsPriceRange2' value='4'> <label for='price-4' class='offscreen'>
Splurge, Over $61
</label>
</li>
</ul>
</fieldset>
<span class='no-js-hidden pseudoLink' id='price_tip' title='' style='cursor: auto;'>Price per person:</span>
<span class='no-js-hidden' id='price_range'>Roll over price, then click to vote </span>
</li>
These are my js code where we mouse over to any li within ul the ul class which by default price-0 will be replaced with id of current selected li.
Here is my javascript. I want the class price-0 of the ul to change to the id of the li that you hover over.
$('#price_choices ul').mouseover(function(){
var val = $(this).find('li input').attr('value');
$(this).removeClass(/price-[a-zA-Z0-9_]*/g, '');
$(this).addClass('price-'+val+'');
});
How can I replace the classname with the id specified? My current code simply adds the class and I end up with a list of classes that looks like this price-0 price-1 price-2.. etc

try:
$('#price_choices ul > li').mouseover(function(){
var $li = $(this),
val = $li.find('input').val();
//alert(val);
var preClass= $li.parents("ul").attr("class");
$li.parents("ul").removeClass(preClass);
$li.parents("ul").addClass('price-'+val);
});
Demo:: jsFiddle

Append NEXT and PREVIOUS to RADIO BUTTON

I have been stuck with a code for a few days, and what I'm really trying to do is to append NEXT and PREVIOUS (link/button) on a radio button.
<div id="slides">
<ul class="options-list">
<li>
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</ul>
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
what I am trying to do here is that, when i click on next, it will select the radio button below it, so the code above has bundle-73, bundle-72 and bundle-74, says if the default selected is bundle-73, when i click next, it should select bundle-72.

Your HTML looks broken so I'm going to assume you really mean this:
<div id="slides">
<ul class="options-list">
<li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73"></li>
<li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
<li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
</ul>
</div>
Then your next action would look like this:
$('#next').click(function() {
var $all = $('.getradiotomove'); // Get them all
var $current = $('.getradiotomove:checked'); // Get the current one
var index = $all.index($current) + 1; // Find the index of the next one
if(index >= $all.length) // Wrap around at the end
index = 0;
$($all[index]).attr('checked', 'checked'); // Check it.
});
Demo: http://jsfiddle.net/ambiguous/hTgv3/1/
This assumes that you only have the one group of radio buttons.
You should be able to sort out the previous action yourself.
References:
:checked selector
index function

Maybe somethining like this?
<ul class="options-list">
<li>
<input type="radio" name="bundle_option" value="73">
</li>
<li>
<input type="radio" name="bundle_option" value="72">
</li>
<li>
<input type="radio" name="bundle_option" value="74">
</li>
</ul>
and javascript:
$('#next').click(function(){
$('[name=bundle_option]:checked').parent().next().children('[name=bundle_option]').attr('checked', true);
return false;
});

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#next').click(function() {
var checkedOp = $('input[name=bundle_option]:checked')
var match = checkedOp.next('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').next('input[name=bundle_option]').attr('checked', 'checked');
});
$('#prev').click(function() {
var checkedOp = $('input[name=bundle_option]:checked');
var match = checkedOp.prev('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').prev('input[name=bundle_option]').attr('checked', 'checked');
});
}
);
</script>
</head>
<body>
<div id="slides">
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73" checked="checked">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
</body>
</html>