ACF Select value adds class to div if value is not equal - javascript

I'm using ACF for the first time and struggling to get this to work. I've created a Select field with 2 options (This is controlled backend on the specific page)
<select id="acf-field_5bf80363f0c0f" class="" name="acf[field_5bf80363f0c0f]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="0">
<option value="No Issues">No Issues</option>
<option value="Issues reported" selected="selected" data-i="0">Issues Reported</option>
</select>
What i would like to achive is that if selected option is not equal to No Issues, it would add a custom class (.Error) to the selected div with the id #ServiceStatus1 for example. I've attempted with my limited knowledge of jQuery but no joy.
Hope this makes sense, any advice is really appreciated.
<script type ="text/javascript">
$(function() {
$('#acf-field_5bf80363f0c0f').ready(function(){
$('.Error').hide();
$('#ServiceStatus1' + $('.Error').val() != 'No Issues').show();
});
});
</script>

Your question and your code seem to be asking different questions...
If you want to add/remove a class based on the value in the select, you could do:
$(function() {
function addServiceStatusClass(e){
if($(this).val() != 'No Issues'){
$('#ServiceStatus1').addClass('Error');
}else{
$('#ServiceStatus1').removeClass('Error');
}
}
$('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
$('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);
});
Example:
http://jsfiddle.net/m2o361th/2/
But if all you want to do is show/hide #ServiceStatus1 based on the value, you can do:
$(function() {
function addServiceStatusClass(e){
if($(this).val() != 'No Issues'){
$('#ServiceStatus1').show();
}else{
$('#ServiceStatus1').hide();
}
}
$('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
$('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);
});
Example:
http://jsfiddle.net/m2o361th/3/
Also as a reminder, if you're using the version of jQuery included with WordPress, you have to wrap your functions in a function mapped to jQuery:
(function($){
// contains one of the above functions...
})( jQuery );

Thank you so much for the above. I've tweaked your above code to factor in that the select field is backend and my div is frontend. The working code for this is...
$(function() {
function addServiceStatusClass(e){
if($('#Multistream').text() != 'No Issues'){
$('#ServiceStatus1').addClass('Error');
}else{
$('#ServiceStatus1').removeClass('Error');
}
}
$('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
$('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);
});
})( jQuery );

Related

Show/hide a select field on Edit page, based on database value

In one of "Add product" page, I've select field that shows/hides based on what we select on another select field. This is the code:
$(function() {
$('#warranty_periods').show();
$('#warranty_type').change(function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
});
});
My problem is how to hide it on the edit page if "warranty_type" was other than '1' while adding the product.
Thanks
If you want the same logic to be invoked when the page loads, then do exactly that. For example, you can define a function that you would use for the event you currently have as well as be immediately invoked. Something like this:
$(function() {
var toggleWarrantyPeriod = function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
};
toggleWarrantyPeriod();
$('#warranty_type').change(toggleWarrantyPeriod);
});
Try to logout the value of warranty_type using
console.log($('#warranty_type').val());
Check if you are getting the desired value

Select option won't fire jquery event

I'm having some problems with what should be a simple jQuery show/hide based on a select's value. The select is hidden by default based on other selects, which might be why it's not working?
Unfortunately I can't change the source code in any manner, I can only add a function like this.
$(document).ready(function() {
$('#question-select-1271443').change(function() {
var selection = $(this).val();
if (selection == 'CIIC') {
$('#question-select-1082380').show();
} else {
$('#question-select-1082380').hide();
}
});
});
function val() extract the value of the attribute value of the option selected. Maybe you are trying to extract the content of the option. Example:
<select id="sas">
<option value="hi">Hello</option>
</select>
$("#sas").change(function(){
$(this).val(); // This return hi
$("option:selected", this).text() // This return Hello
});

Forcing multiple select changes and then reading the event

I'm relatively new to jquery. I've been banging my head against this issue for a week now trying to figure out a way to do it.
Basically, I have two identical selects that change a displayed number to 1 when selected, and then when changed to a different selection, change that original number back to 0. My original code worked fine, but I wanted to expand the code so that users could save a generated URL and reload their selections at a later date.
Here is the working HTML. Same thing for the second select, only with the ID of ability2.
<select id="ability1" onchange="attributeChoice( event )"><option value="selected">Select</option><option value="val1">One</option><option value="val2">Two</option><option value="val3">Three</option><option value="val4">Four</option><option value="val5">Five</option><option value="val6">Six</option></select>
And the working jquery
function attributeChoice( event ) {
$( event.currentTarget ).change(function() {
var attributeChange = this.id;
var attributeSelect = $(this).find('option:selected').attr('value');
$('span#' + attributeSelect).html( 1 );
$('select#' + attributeChange ).on( 'change', function() {
$('span#' + attributeSelect).html( 0 );
});
getTotals();
});
}
And then this bit of code disables the selected option of the other select so it can't be selected twice.
$('select').change(function() {
$('select#ability1, select#ability2').not(this).children('option[value=' + this.value + ']').attr('disabled', true).siblings().removeAttr('disabled');
$('select#ability1, select#ability2').not(this).children('option[value=selected]').attr('disabled', true);
});
From what I've read, I need to use a .change() to force the onchange of the select to fire. So far I'm not having any luck. Originally I had the attributeChoice function setup using event.target but I learned that it actually looks all the way back to beginning of what triggered it. I switched over to using this and event.currentTarget instead.
Here is my code I've been toying with. Any ideas on what I'm doing wrong here? (hattr1 is the index of the selected item that is pulled from the URL)
$('select#ability1').change(function() {
$('select#ability1 option').eq(hattr1).prop('selected', true);
$('select#ability1').change();
});
If you want to select a pre-determined option in the select on the change event, call $.preventDefault() on the change event, and then use $.prop() to select the option as you're already doing.
var $select = $('#ability1'),
hattr1 = 3;
$select.on('change',function(e) {
//e.preventDefault();
$(this).find('option').eq(hattr1).prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ability1">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
</select>

Use parent class and get middle part of child class

I am working with Joomla's new SubForm code. This allows the user to duplicate a set of inputs and reuse them. Basically a repeatable form.
This form creates the following structure.
<div class="subform-repeatable-group">
<div class="control-group jform_params__content__content0__dc_subheader-cg"></div>
<div class="control-group jform_params__content__content0__dc_typeofcontent-cg"></div>
<div class="control-group jform_params__content__content0__dc_toc_image-cg"></div>
</div>
The issue is that the SubForm is loaded inside the parent form but Joomla sees it as a independent form. Therefore the normal Show/Hide functions no longer work. So I have to create my own.
What do I got and what is not good
This is the generated Select:
<select id="jform_params_theme_selection" name="jform[params][theme_selection]" class="chzn-done">
<option value="3dperspective" selected="selected">3D Perspective</option>
<option value="default">Default</option>
<option value="notheme">Select a theme!</option>
</select>
I already got the piece of code that will check if the select value on the parent form is selected.
$('#jform_params_theme_selection').bind('change', function (e) {
if( $('#jform_params_theme_selection').val() == 'notheme') {
} else if( $('#jform_params_theme_selection').val() == 'default') {
} else if( $('#jform_params_theme_selection').val() == '3dperspective') {
}
}).trigger('change');
Now I can offcourse for each element add it manually like this:
$('[class$="__dc_typeofcontent-cg"]').hide();
But there must be a better way.
What do I want.
I want to use the .hide() function on every item that has the following letters/symbols in its class __dc_ and has as .parents(.subform-repeatable-group)
Bit of extra information
There is another theme that does not have __dc_ but is called __threed_ so I must be able to define the letters/symbols.
I already checked if I could use something with X amount of positions from the front or a X amount of positions from the back but that is constantly changing.
Thanks everyone for helping.
As usual I am going to keep searching and updating this post whenever I get more results.
Could use filter() something like:
var cGroups = $('.subform-repeatable-group .control-group');
var hideTheme = '_dc';
var showTheme = '_threed';
cGroups.filter(function(){
return this.className.indexOf(hideTheme )>-1
}).hide()
cGroups.filter(function(){
return this.className.indexOf(showTheme )>-1
}).show()
DEMO
Your question is a bit convoluted so I focused on the what you want part.
Assuming you don't have much control over the classes that Joomla throws in there, no matter what you're going to need to build a way to capture the parent class and the child sub string you're looking for. But assuming you have both of those, you can make the show hide a bit generic. You can always tell jQ to look for children with a substring within a parent.
$("[class*='"+searchclass+"']",parent)
A fiddle for you: https://jsfiddle.net/dvdxt58f/1/
The most efficient way is the one suggested by charlietfl but there is another way to solve it.
(function ($) {
$(document).ready(function() {
$('#jform_params_theme_selection').bind('change', function (e) {
if( $('#jform_params_theme_selection').val() == 'notheme') {
} else if( $('#jform_params_theme_selection').val() == 'default') {
$( ".subform-repeatable-group div[class*='__threed_']" ).hide();
$( ".subform-repeatable-group div[class*='__dc_']" ).show();
} else if( $('#jform_params_theme_selection').val() == '3dperspective') {
$( ".subform-repeatable-group div[class*='__threed_']" ).show();
$( ".subform-repeatable-group div[class*='__dc_']" ).hide();
}
}).trigger('change');
});
})(jQuery);
Basically you use the * selector and with that you create:
$( ".subform-repeatable-group div[class*='__threed_']" ).hide();
I added this one as it might be useful in some occasions even when I go with charlietfl's answer.
Demo: https://jsfiddle.net/tdo9go2q/11/

JQuery: How to grab what it is selected in the selector

I have a box with one select with two options.
Depending on the options i need to display a different set of checkboxes.
Depending on what the user choose on the select i will display a set of checkboxes or another.
Here i have made here an example:
http://jsbin.com/acOXisI/20/edit
How can i grab the option selected in the selector?
And subsequently how can i display or not the checkboxes fieldset?
Thank you very much!
The javascript you need is:
// hide the fieldsets on page load
$(".otion1, .otion2").hide();
$("select").change(function() {
var $this = $(this);
if($this.val() === "1") {
$(".otion1").show();
$(".otion2").hide();
} else if($this.val() === "2") {
$(".otion1").hide();
$(".otion2").show();
} else {
$(".otion1, .otion2").hide();
}
});
// prevent hidden checkboxes from being submitted
$("form").submit(function() {
$(this).find("input[type='checkbox']").filter(":hidden").each(function() {
this.checked = false;
});
});
and add some values to your select options:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
See edited demo: http://jsbin.com/acOXisI/23/edit
Try:
jQuery("#selector option:selected").val();
Or to get the text of the option, use text():
jQuery("#selector option:selected").text();
More Info:
http://api.jquery.com/val/
http://api.jquery.com/text/
First off, you shouldn't have duplicate ids on the page.
Also, I'd suggest you put unique input names for all the checkboxes and always submit all of them from a single form (and you'd ignore those you don't need). The functionality you want can be achieved in many ways, one of them being hiding both fieldsets and setting a listener to the select element - you can use the onchange event, and check which one is selected and according to that show the appropriate fieldset.
When you check the submitted data, first check the select value, and then only the appropriate checkboxes.
You have to use jQuery:
$().ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").text();
console.log(value)
if (value == 'Option 1'){
$('.otion1').show()
$('.otion2').hide()
}
else{
$('.otion1').hide()
$('.otion2').show()
}
})
})
There is your bin cloned and working:
http://jsbin.com/UcaWUCA/1/edit
You can do this with jQuery. Note that hidden fields will still get submitted so they need disabling too:
$(function(){
$("#selector").on("change", function(){
$(".otion1, .otion2").hide().find("input").attr("disabled","disabled");
$("."+$(this).val()).show().find("input").removeAttr("disabled");
});
$("#selector").trigger("change");//run on load
});
http://jsbin.com/aVihIJOr/1/edit
Hi you can use $("#selector").val() to get the selected option.
$("#selector").change(function(){
option = $(this).val();
if(option == 1){
$(".option1").show();
$(".option2").hide();
} else if(option == 2) {
$(".option2").show();
$(".option1").hide();
} else {
$(".option2").hide();
$(".option1").hide();
}
});
Working example:
http://jsbin.com/acOXisI/10/edit?html,js,output
I have added unique Div Ids to your options sets and then have linked them with the exact selected value.
Example:
http://jsbin.com/acOXisI/18/edit
$(document).ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").val();
if (value == 'option1'){
$('#option1').show();
$('#option2').hide();
}
else if(value == 'option2'){
$('#option1').hide();
$('#option2').show();
}else{
$('#option1').show();
$('#option2').show();
}
});
});

Categories