Changing required field dynamicly via JS in Contact Form 7 - javascript

I need to write custom validated form in Wordpress. After the click on For-Author radio button some checkboxes group should be marked as not required. I tried to change "aria-required" attributes to "false" or remove and add class "wpcf7-validates-as-required" but it doesn't work. I also tried to reinit wpcf7 by
$('div.wpcf7 > form').wpcf7InitForm();
but it's also doesn't work.
This is a code sample:
$radio.button.click(function (event) {
isAuthor(event)
});
var isAuthor = function (event) {
if ($(event.target).attr('data-author') == 'true') {
authorClicked = true;
} else {
authorClicked = false;
}
fieldUpdate();
};
var fieldUpdate = function () {
var $text = $('[name=pres-title]');
if (authorClicked) {
$text.prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false)
$fieldRequired.each(function () {
$(this).prop('disabled', false).attr('aria-required', true).addClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
} else {
$text.prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
$fieldRequired.each(function () {
$(this).prop('disabled', true).attr('aria-required', false).removeClass('wpcf7-validates-as-required').attr('aria-invalid', false);
});
}
}

Related

jQuery checkbox trigger change not working

I have the following JS function:
const bindSwitches = function() {
$(document).on("click", ".lever", function() {
var checkbox = $(this).siblings("input[type=checkbox]");
var hiddenField = $(this).siblings("input[type=hidden]");
if (checkbox.prop("checked") === true) {
checkbox.prop("value", 0);
hiddenField.prop("value", 0);
} else if (checkbox.prop("checked") === false) {
checkbox.prop("value", 1);
hiddenField.prop("value", 1);
}
$(checkbox).trigger("change");
});
};
It interacts with a switch component provided by the Materialize library. I have just added the final line, as there is some behaviour that needs to occur whenever a checkbox is triggered. But that change event never fires. I also have this function in my app:
const bindAllChecks = function() {
$(document).on("change", ".select-all-check", function() {
var checks = $(this).closest(".table, table").find(".multiple-check:visible");
if (this.checked) {
$.each( checks, function( index, checkbox ){
if ($(checkbox).prop("checked") === false) {
$(checkbox).prop("checked", true);
$(checkbox).trigger("change");
}
});
} else {
$.each( checks, function( index, checkbox ){
if ($(checkbox).prop("checked") === true) {
$(checkbox).prop("checked", false);
$(checkbox).trigger("change");
}
});
}
});
};
Notice how I use the exact same $(checkbox).trigger("change"). In this function it works perfectly.
I've tried changing the order in which I bind the events, to make sure the change event is definitely defined beforehand. I've made sure that the rest of the function is being triggered correctly and that there are no issues in that regard. I've also tried different variations of alternative syntax, nothing has worked.
Here is the code it is supposed to trigger:
const bindCheckboxOverride = function() {
$(document).on("change", ".checkbox-collection input[type=checkbox]:not(.select-all-check)", function() {
var hiddenField = $(this).prev();
if(hiddenField.attr("disabled") === "disabled") {
hiddenField.removeAttr("disabled");
} else {
hiddenField.attr("disabled", "disabled");
}
});
};
I still don't have an exact solution to the question I asked, but I have come up with an alternate method. Instead of trying the trigger a change, I have pulled out the functionality I want from the change even into its own function:
const bindCheckboxOverride = function() {
$(document).on("change", ".checkbox-collection input[type=checkbox]:not(.select-all-check)", function() {
handleCheckboxDisable(this);
});
};
const handleCheckboxDisable = function(checkbox) {
var hiddenField = $(checkbox).prev();
if(hiddenField.attr("disabled") === "disabled") {
hiddenField.removeAttr("disabled");
} else {
hiddenField.attr("disabled", "disabled");
}
};
So now I'm able to call this function directly from my other function:
const bindSwitches = function() {
$(document).on("click", ".lever", function() {
var checkbox = $(this).siblings("input[type=checkbox]");
var hiddenField = $(this).siblings("input[type=hidden]");
if (checkbox.prop("checked") === true) {
checkbox.prop("value", 0);
hiddenField.prop("value", 0);
} else if (checkbox.prop("checked") === false) {
checkbox.prop("value", 1);
hiddenField.prop("value", 1);
}
handleCheckboxDisable(checkbox);
});
};
It doesn't answer the question but I thought that may be of help to somebody. Would still like to know why the original code doesn't work if anybody has any insights.

The submit button works only once

I developed a function that keeps the submit disabled until filling all the fields. The function works, but when I create two more users the submit button enables before filling the fields; my function works only once.
The button is working and the data is saved, but the submit button is enabled before filling the fields.
$(document).ready(function () {
$('#myForm input').keyup(function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});
i think you create new inputs dynamically, then try this:
$('#myForm').on('keyup', 'input', function () {
var empty = false;
$('#myForm input').each(function () {
if ($(this).val().length == 0) {
empty = true;
}
});
if (empty) {
$('#btnsave').attr('disabled', 'disabled');
} else {
$('#btnsave').attr('disabled', false);
}
return empty;
});
});

Show/Hide div with checkboxes using classes multiple times on a page

I am having trouble getting my script to work here. I am trying to target the show me span when the checkboxes are checked and it's not working.
Here is the code and link to fiddle: http://jsfiddle.net/dalond/nonyg6sm/
$('.single').live('change', ':checkbox', function() {
var target = $(this).closest('.single').prev().find('.showMe');
if ($(this).find('input:checked').length == 0) {
target.hide();
} else {
target.show();
}
});
I got it worked : http://jsfiddle.net/nonyg6sm/3/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if (this.checked) {
target.show();
} else {
target.hide();
}
});
You can modify it to feet your need.
UPDATE
http://jsfiddle.net/nonyg6sm/4/
$('input[type=checkbox]').click(function() {
var target = $(this).closest('.NoEd').prevAll(".Subs:first").find(".showMe");
if ($(this).closest('.NoEd').find("input[type=checkbox]:checked").length == 0) {
target.hide();
} else {
target.show();
}
});

On Change event to for ckeditor

I want to bind the following function to any changes on my CKEditor textarea. I am currently using version 4.2. I added the onChange CKEditor plugin but my issue is I cannot seem to bind to the formUnloadPrompt().
Here is my jQuery function:
function formUnloadPrompt(formSelector) {
var formA = $(formSelector).serialize(), formB, formSubmit = false;
// Detect Form Submit
$(formSelector).submit( function(){
formSubmit = true;
});
// Handle Form Unload
window.onbeforeunload = function(){
if (formSubmit) return;
formB = $(formSelector).serialize();
if (formA != formB) return "Your changes have not been saved.";
};
// Enable & Disable Submit Button
var formToggleSubmit = function(){
formB = $(formSelector).serialize();
$(formSelector+' [type="submit"]').attr( "disabled", formA == formB);
};
formToggleSubmit();
$(formSelector).change(formToggleSubmit);
$(formSelector).keyup(formToggleSubmit);
}
$(function(){
formUnloadPrompt('#form');
});
My CKEditor code
CKEDITOR.instances['frm_content'].on( 'change', function(e) {
console.log(e);
var inst = CKEDITOR.instances['frm_content'];
if (inst.getData() != '') {
$('[type="submit"]').removeAttr('disabled');
} else {
$(' [type="submit"]').attr('disabled', 'disabled');
}
});

code not working without an alert() in javascript

my problem is the following code is not working without an alert().I am using a two level select/deselct all box. but the code is working for one level only. It is not being able to deselect the 'select all' checkbox on unchecking a single checkbox or vice-versa without the alert..
alert('17');
$('input.DataCheckAll').click(function() {
if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
$('input.CheckAll').prop('checked', true);
} else {
$('input.CheckAll').prop('checked', false);
}
});
if ($('input.CheckAll').length > 0) {
$('input.CheckAll').attr('checked', false);
$('input.CheckAll').click(function() {
if (this.checked) {
$('input.DataCheckAll').each(function() {
this.checked = true;
});
} else {
$('input.DataCheckAll').each(function() {
this.checked = false;
});
}
});
}
It's highly likely that you just need to wrap it in $(function() { /* code */ });. At present, your code is being stopped by the alert, which lets the document load in the background so by the time you close the alert, the page is ready for everything you're trying to do.
By just telling it to wait until the page has finished loading, you shouldn't need the alert any more.
$(function() {
// code
});
is exactly the same as
$(document).ready(function() {
// code
});
The code is probably running before the dom is ready, Try this:
$(function(){ //by passing jQuery a function instead of a selector
// it will call the function when the dom is ready
$('input.DataCheckAll').click(function() {
if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
$('input.CheckAll').prop('checked', true);
} else {
$('input.CheckAll').prop('checked', false);
}
});
if ($('input.CheckAll').length > 0) {
$('input.CheckAll').attr('checked', false);
$('input.CheckAll').click(function() {
if (this.checked) {
$('input.DataCheckAll').each(function() {
this.checked = true;
});
} else {
$('input.DataCheckAll').each(function() {
this.checked = false;
});
}
});
}
});
You should execute your jquery script after DOM is ready, so wrap it inside $(function(){});
NOTE - Also, you need not to iterate $('input.DataCheckAll') using .each(), to check / uncheck. You can simply use $('input.DataCheckAll').prop('checked',true);
$(function(){
$('input.DataCheckAll').click(function() {
if ($('input.DataCheckAll').length == $('input.DataCheckAll:checked').length) {
$('input.CheckAll').prop('checked', true);
} else {
$('input.CheckAll').prop('checked', false);
}
});
if ($('input.CheckAll').length > 0) {
$('input.CheckAll').attr('checked', false);
$('input.CheckAll').click(function() {
/*if (this.checked) {
$('input.DataCheckAll').each(function() {
this.checked = true;
});
} else {
$('input.DataCheckAll').each(function() {
this.checked = false;
});
}*/
// to select / deselect all data check boxes
$('input.DataCheckAll').prop('checked',this.checked);
});
}
});

Categories

Resources