Develop Reference

My jquery isn't getting a value back with val() when the selector is working [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am trying to create a function in my customizer on wordpress to display certain fields but I keep getting back undefined when everything seems to be aligned in my JS file correctly.
function cta() {
//Selector for the entire radio area that "should return" the value (either "one" or "two")
var ctaOptions = $("input[name='_customize-radio-cta-type']");
//The ID selector for option one to check if this field is "checked"
var ctaOne = $('#_customize-input-cta-type-radio-one');
//The ID selector for option Two to check if this field is "checked"
var ctaTwo = $('#_customize-input-cta-type-radio-two');
//This console log always returns undefined, but returns the element without the .val()
console.log(ctaOptions.val());
//This always returns false even when I can see in the inspector this element is checked="checked"
console.log(ctaTwo.is(':checked'));
if(ctaOne.is(':checked')) {
$('#customize-control-button-two-label').addClass('hidden');
}
else if(ctaTwo.is(':checked')) {
$('#customize-control-button-two-label').removeClass('hidden');
}
}
I am using an unscores boilerplate for my wordpress theme, but unsure if that has anything to do with the conflict in the javascript. I have also confirmed that the ID's are correct using the inspector, just for some reason it breaks when trying to get is checked or the values.
Here is the HTML of the area I am referring to
<li id="customize-control-cta-type" class="customize-control customize-control-radio" style="display: list-item;">
<span class="customize-control-title">Call To Action buttons on banner</span>
<div class="customize-control-notifications-container" style="display: none;">
<ul></ul>
</div>
<span id="_customize-description-cta-type" class="description customize-
control-description">How many buttons do you want?
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-one" type="radio" aria-
describedby="_customize-description-cta-type" value="one" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type">
<label for="_customize-input-cta-type-radio-one">one</label>
</span>
<span class="customize-inside-control-row">
<input id="_customize-input-cta-type-radio-two" type="radio" aria-
describedby="_customize-description-cta-type" value="two" name="_customize-
radio-cta-type" data-customize-setting-link="cta-type" checked="checked">
<label for="_customize-input-cta-type-radio-two">two</label>
</span>
</li>

Try setting up a setTimeout(function() around your current js function, it might be that your js script is loaded before the php actually populate the input.
$( document ).ready( function () {
setTimeout( function () {
//Your function goes here...
}, 1);
} );
EDIT 1: Regarding your last comment. If the input value is intended to be fetch from a user input then you should add an event listener. something like this...
$('#_customize-input-cta-type-radio-two, input[name="_customize-radio-cta-type"], #_customize-input-cta-type-radio-two').change(function(){
});

I have came to the conclusion that my problem wasn't the javascript, it was down to the root of the selector. I still haven't been able to fix it, but my question is unanswerable as it wasn't the problem. Thank you for the feedback.
Edit 1:
PROBLEM FOUND! It wasn't my JS that was the problem at all. It was the way i brought in the previous file. I needed to enqueue a JavaScript file to customize_controls_enqueue_scripts. When I took my script and added it to a new JS file and put the below code into my customize.php
function theme_slug_customizer_controls() {
wp_enqueue_script( 'theme-customizer-controls', get_template_directory_uri() . '/js/customize-controls.js', array( 'jquery' ), '20170412', true );
}
add_action( 'customize_controls_enqueue_scripts', 'theme_customizer_controls' );

Is there a neat way to separate checked checkbox labels in JS/jquery?

I'm working on method that has it's purpose to get elements from a form so that the form can be previewed before submitting. Currently I'm stuck on a problem where I'm trying to get labels from checked checkboxes and separate them. Getting the labels is no problem, but finding a neat way to split them with '( | )' is. I know adding an array possibly would solve my problem, but I was looking for an alternative way to do this in JS/Jquery by simply adding a built in method or similar.
JS and Jquery for what I currently have:
function previewForm() {
const previewPlace = document.getElementById('previewPlace');
let getPlaceChecked = $(':checkbox[name=placeCheckbox]:checked');
if (getPlaceChecked.next('label').text() === "") {
previewPlace.innerHTML = 'No place chosen.'
} else {
previewPlace.innerHTML = getPlaceChecked.next('label').text();
}
}
HTML (actual form):
<div class="custom-checkbox custom-checkbox-padding custom-control">
<input class="custom-control-input" id="norway" name="placeCheckbox" type="checkbox" value="Norway">
<label class="custom-control-label" for="norway">Norway</label>
</div>
<div class="custom-checkbox custom-checkbox-padding custom-control">
<input class="custom-control-input" id="sweden" name="placeCheckbox" type="checkbox" value="Sweden">
<label class="custom-control-label" for="sweden">Sweden</label>
</div>
HTML (preview):
<p class="media-description" id="previewPlace"></p>
So far I've tried simply adding space like below. I've also tried appending, but it doesn't work the way I thought it would.
previewPlace.innerHTML = getPlaceChecked.next('label').text() + " | ";
Edit: typo in if-statement
Edit1: Made a quick fiddle to better demonstrate my problem https://jsfiddle.net/d1nryuqg/
Edit2: Made changes in 'HTML (actual form)' to better fit the jsfiddle..

When you use .text() on a collection (of more than one element), it combines all of the values into a single string - there's no nice way to separate them.
Instead, you can use jquery .map to give you an array of strings for each label, then .join to separate them:
previewPlace.innerHTML = getPlaceChecked.next("label").map((i,e)=>e.innerText).toArray().join(", ")
Updated fiddle: https://jsfiddle.net/6p1h853t/

dynamic window.find not working with jQuery

I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.

jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});

I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...

In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!

I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.

JS - jQuery - Enable Disable form fields with checkbox

I want to disable an input Box AND a button when a checkbox is clicked .
My markup :
<h4>Random or Not </h4>
<!-- Use Random Image -->
<label><input name="o99_aufu_options[o99_aufu_random]" id="o99_aufu_options[o99_aufu_random]" value="1" checked="checked" type="checkbox">Use Random Image ? <em></em></label><br>
<!-- If the above not checked - needs to be enabled -->
Upload Image <label for="upload_image"> <input id="upload_image" size="36" name="o99_aufu_options[o99_aufu_upload_image]" value="" type="text"> <input id="upload_image_button" value="Choose Image or upload" type="button"> </label>
jQuery :
if (jQuery('#o99_aufu_options[o99_aufu_random]').is(':checked')) {
jQuery('#upload_image :input').attr('disabled', true);
} else {
jQuery('#upload_image_button,#upload_image :input').removeAttr('disabled');
}
well - obviously, if i am asking here - it is not working :-)
Fiddle :
http://jsfiddle.net/obmerk99/6jFMf/3/
Also as a bonus question - is it possible to do that only with the NAME of the input, omitting the ID from the markup ?
UPDATE I - working solution :
http://jsfiddle.net/obmerk99/6jFMf/20/

bonus question - is it possible to do that only with the NAME of the input, omitting the ID from the markup ?
You can use any attribute in a jQuery selector, including name:
$('[name="foo"])
Since your names have brackets, you'll probably have to escape them:
$('[name="o99_aufu_options\[o99_aufu_random\]"]')
You can also qualify them to specific elements if you want, or combine them with other selectors:
$('input.someClass[name="o99_aufu_options\[o99_aufu_random\]"]')
As for your actual question, my first guess ... is wrong is that your problem is whitespace; have you tried:
#upload_image:input
instead?
My second guess is also wrong that the problem is:
.prop('disabled', true);
Have you tried:
.prop('disabled', 'disabled');
?
Ok, I actually looked at your fiddle, and there were a few things wrong; here's a working example, let me know if you have questions, but hopefully it's self-explanatory:
jQuery(function() {
jQuery('input[name="o99_aufu_options\[o99_aufu_random\]"]').click(function(){
var isChecked = jQuery(this).is(':checked') ;
jQuery('#upload_image:input').prop('disabled', isChecked? 'disabled' : null);
})
});

Possible IF statement with Javascript?

I'm working on a .net website and I have a bit of a situation.
Say I have...
<input type="text" class="name" id="name">
<p></p>
<input type="text" class="surname" id="surname">
<p>Error!</p>
What Id like to do, using javascript, is detect that the second paragraph tag says 'Error!' and add a class to the input tag before it.
I know this seems like a bit of a strange way of working but any advice would be greatly appreciated!
Hi all, the adivce and answers i was given worked fine on a fresh page on jsfiddle only i cant seem to get them to work on my actual site.
My P and input tags are constructed like this....
<li class="yourdetli">
<label class="yourdet">Street Name</label>
<input type="text" id="ctl00_ContentPlaceHolder1_TB_SName" name="ctl00$ContentPlaceHolder1$TB_SName">
<span style="color: Red; display: none;" class="errorp" id="ctl00_ContentPlaceHolder1_RequiredFieldValidator6">
<p>You must complete this field</p></span>
</li>
and my JS is...
<script type="text/javascript">
$(document).ready(function() {
$('p:contains("You must complete this field")').prev('input').addClass('error');
});
</script>
only for some reason it doesnt seem to add my class, can anybody see why?

You can use
$('p:contains("Error")').prev('input').addClass('error');

Maybe try
$("p:eq(1):contains('Error!')").prev('input').addClass('error');

You can check the text value of the second <p> tag by using jQuery. You'll need a selector that finds it (in this example, it is the last <p> tag).
if ($("p").last().text() == "Error!") {
$("input#surname").addClass("myClass");
// do other stuff here
}

Try -
if ($("input#surname").next("p:contains('Error!')").length > 0) {
$("input#surname").addClass('yourclass');
}

I'd recommend adding the error css class to your validator's CssClass property so that its already rendered server side. This way if you change your error message, you won't have to change any javascript to display it.
<asp:RequiredFieldValidator ID="requiredValidator" CssClass="error" ControlToValidate="..." ErrorMessage="You must complete this field"/>
Or if you're looking to style all of your validators with the same class, you can add the following script to your master page.
$(document).ready(function()
{
if (Page_Validators != null)
{
for (i = 0; i < Page_Validators.length; i++)
{
Page_Validators[i].className = "error";
}
}
});
See http://www.jrummell.com/blog/index.php/2009/08/apply-the-same-css-class-to-all-validators-in-a-web-project/ for more information.