I have a custom shipping method on WooCommerce that should show a little box with information to user, only when that custom shipping method is chosen.
So far I have tried with this little code:
jQuery(document).ready(function($) {
$(document).on("change", "#shipping_method_0_my_shipping_method", function() {
if( $("#shipping_method_0_my_shipping_method").prop('checked') == true ){
$('.custom-box').show();
} else {
$('.custom-box').hide();
}
});
});
And it shows the .custom-box just fine when that custom shipping method is chosen. But it does not hide it for some reason, when I choose some other shipping method?
Also it does not show the box if my custom shipping method is chosen on page load, but if I click on some other shipping method, and then my custom shipping method, it will show the box fine.
Working now perfectly. Thanks for the working solution for Томица Кораћ at below!
Try this script:
jQuery(document).ready(function($) {
// Create reusable function to show or hide .custom-box
function toggleCustomBox() {
// Get id of selected input
var selectedMethod = $('input:checked', '#shipping_method').attr('id');
// Toggle .custom-box depending on the selected input's id
// Replace 'shipping_method_0_my_shipping_method' with your desired id
if (selectedMethod === 'shipping_method_0_my_shipping_method') {
$('.custom-box').show();
} else {
$('.custom-box').hide();
};
};
// Fire our function on page load
$(document).ready(toggleCustomBox);
// Fire our function on radio button change
$('#shipping_method input:radio').change(toggleCustomBox);
});
Let me know if this works for you.
Edit
I've updated the script. Please try this and let me know if it works:
jQuery(document).ready(function($) {
// Create reusable function to show or hide .custom-box
function toggleCustomBox() {
// Get id of selected input
var selectedMethod = $('input:checked', '#shipping_method').attr('id');
// Toggle .custom-box depending on the selected input's id
// Replace 'shipping_method_0_my_shipping_method' with your desired id
if (selectedMethod === 'shipping_method_0_my_shipping_method') {
$('.custom-box').show();
} else {
$('.custom-box').hide();
};
};
// Fire our function on page load
$(document).ready(toggleCustomBox);
// Fire our function on radio button change
$(document).on('change', '#shipping_method input:radio', toggleCustomBox);
});
Related
I have created a method to validate input field in a share point site as you may see in the code below.
The issue is that the method should be activated on saved, but it does not.
For now it is activated on document ready and that is not what I want.
Any advice?
</script>
<script type="text/javascript">
$(document).ready(function(){
ValidateFields();
});
function ValidateFields()
{
if ((document.querySelector('input[name$="BooleanField"]').checked ==false)
&& ($("select[title='Employees selected values'] option").length==0))
{
// $("select[title='Employees selected values'] option").length==0).text("<p>
Please check All employees in department OR select employees </p>");
// // checked, so do something
alert ("Please check All employees in department OR select employees")
}
if ((document.querySelector('input[name$="BooleanField"]').checked ==true)
&& ($("select[title='Employees selected values'] option").length==1)) {
alert ("Please check All employees in department OR select employees23")
}
}
_spBodyOnLoadFunctionNames.push("ValidateFields()");
We can use PreSaveAction method to achieve it. The following code for your reference.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
function PreSaveAction(){
if ((document.querySelector('input[name$="BooleanField"]').checked ==false)&& ($("select[title='Employees selected values'] option").length==0)){
// checked, so do something
alert ("Please check All employees in department OR select employees");
return false;
}
if ((document.querySelector('input[name$="BooleanField"]').checked ==true)&& ($("select[title='Employees selected values'] option").length==1)) {
alert ("Please check All employees in department OR select employees23");
return false;
}
return true;
}
</script>
You'll need to override the "Submit" handler of the form. Depending on the ID of your button, this might work:
$(document).ready(function() {
$("input[id$='SaveItem']").each(function() {
// get the button
var button = $(this);
// reference the existing handler for later use
var existingHandler = this.onclick;
// clear the existing handler
this.onclick = null;
// add your custom handler that validates first, then "submits" if successful
button.click(function() {
if(ValidateFields()){ // change ValidateFields to return true/false
existingHandler(); // validation passed, now call original handler
}
});
});
});
I want to call a function when checkbox value is true whether it is user input or retrieved from database. How to do it?
My Code
function IsSubGroupNeeded() {
var Subgrp = document.getElementById('myCheck').checked;
if (Subgrp === true) {
loadgrdSubgroupItem();
}
};
From where should I call IsSubGroupNeeded function?
Here you go. for checkbox data coming from database on document.ready will do that for you, but for user input in an already loaded page you must go with either click or change and then check if its currently checked. the if(this.checked) will do that.
$(document).ready(function(){
//on document load
if ($('input#mycheck').is(':checked')) {
//cal the function
}
});
// you have to do a check on when user input (click)
$("input#mycheck").change(function() {
if(this.checked) {
//call the function
}
});
});
I'm wanting to clear the Home Number field when a user clicks on another option within the options list.
Currently if you were to select Option 3, home number displays - this is good. If you are to select Option 1 whilst Option 3 is displayed mobile number shows. This is good too however, my validation bombs because Home Number is required and expects it to be filled out even though the input isn't shown on the page.
My thoughts to get around this would be to clear the Home Number input if another selection has been made? This could be wrong but I'm unsure of another solution to get around this.
DEMO
Here is my jQuery:
var form = {
init: function () {
form.selection();
},
selection: function () {
var homeNumber = $('.home-number'),
mobileNumber = $('.mobile-number');
$("li.checkbox").on('click', function (e) {
//e.preventDefault();
if ($(this).find("input:checkbox").is(":checked")) $(this).addClass("active");
else $(this).removeClass("active");
//If all three are selected show mobile, hide home
if ($("ul li.checkbox.active").length > 1) {
mobileNumber.css('display', 'block');
homeNumber.val('');
homeNumber.hide();
} else if ($("li.last-option").hasClass("active")) {
//If select last option only show home
homeNumber.toggleClass('home-active');
homeNumber.show();
mobileNumber.hide();
//If select last option only hide mobile
mobileNumber.toggleClass('mobile-inactive');
} else {
homeNumber.val('');
homeNumber.hide();
mobileNumber.show();
}
});
}
}
$(function () {
form.init();
});
I have the following code:
$(":input").bind("keyup change", function(e) {
var comboVal = $('.emailrequerido1').val()+$('.emailrequerido2').val()+$('.emailrequerido3').val()+$('.emailrequerido4').val()+$('.emailrequerido5').val();
if(comboVal == 'nullnull' || comboVal == ""){
$("#enviarForm").attr('disabled', true);
}else{
$("#enviarForm").removeAttr('disabled');
}
});
What I am trying to accomplish is that when you select a memorized value from the input box by double clicking in the box a history of inputs shows (these values are saved by the browser (I believe)) and if you choose one of these and the field has that text you selected the button should enable.
Here is a JSFiddle example: JSFiddle example
In the example I added a value to the first field since these dont memorize as I expalined before to show a demonstration of what I mean.
I have cleaned up the code a bit: http://jsfiddle.net/kam5B/1/
I've swapped the classes and ids so that the ids are unique, and the classes are common.
Here is a checkEmails function that runs the validation and enables/disables the checkbox.
checkEmails is run every time an input changes, and when the page loads the first time:
$(document).ready(function () {
function checkEmails() {
var nonempty = $('form .email_contactopadrino').filter(function() {
return $(this).val() != '';
});
if (nonempty.length) {
$('#enviarForm').removeAttr('disabled');
}
else {
$('#enviarForm').attr('disabled', true);
}
};
$('form').on('keyup change', '.email_contactopadrino', checkEmails);
checkEmails();
});
In my VB.NET project, I have a UI with some text input fields and a save/submit button. I want the save button to be in a disabled state on page load, and remain that way until a change is made to one of the inputs. And the save button should get disabled again if the values entered by the user are the same as they were at page load. So basically, the save button should be enabled only when there is an actual change.
How can I do this using jquery?
$(':input').change(
function(){
$("#submitButtonId").prop("disabled",false);
}
);
since you said it is dynamic, use on.
$(document).on("change", ":input",
function(){
$("#submitButtonId").prop("disabled",false);
}
);
You can handle that in the change event
$('input[type="text"]').on('change', function() {
// Change event fired..
$('input[type="submit"]').prop('disabled', false);
});
//This will bind all existing and dynamically added selects onChange to the handler
$(document).on('change', function(e) {
onChangeHandler();
}
// handle the event
function onChangeHandler() {
if (checkValues()) {
$('#yourButtonId').prop("disabled", false);
}
else {
$('#yourButtonId').prop("disabled", true);
}
}
// check all values against originals - data-* attributes are a good way to store data on
// an element. So have you can have:
<select id="id1" data-originalvalue="myValue"></select>
// compare the current value to the original value - if any one of them differ, return
// true
function checkValues() {
$.each($('select[data-originalvalue]'), function() {
if ($(this).val() !== $(this).attr(data-originalvalue){
return true;
}
return false;
});
}