Develop Reference

jquery display function on dropdown not working

I face an issue. I have written the following code:
$(document).ready(function() {
$('.show-hide').hide();
$('.dependent').on('change', function() {
if ($(this).val() == 'Anders...')
{
$('.show-hide').show();
} else {
$('.show-hide').hide();
}
});
});
But for some reason I can't get it to work properly.
It's on here:
http://go.pardot.com/l/471061/2022-03-29/6fp8dp
I am trying to show the 'Anders...' field based on the value 'Anders...' in the dropdown. But for some reason it either shows up on all answers, it doesn't show up at all OR (my best thus far) it show's on the 'Anders...' value, but doesn't disappear anymore...
Note that I have to work with class selectors due to the form builder limitations.
Please help me out, I don't see what i'm doing wrong.
Thanks!

The example you pointed to in your link is not exactly an MCVE. Therefore my answer can only be guesswork. I picked out a few bits that seemed relevant to the question posted above:
$(document).ready(function() {
$('.show-hide').hide();
$('.dependent').on('change', function(ev) {
if ($("option:selected", ev.target.selected).text() == 'Anders...') {
$('.show-hide').show();
} else {
$('.show-hide').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-field dependent Opleidingen_Amsterdam_Arenaboulevard_61_75 pd-select required required-custom form-field-secondary dependentFieldSlave dependentField">
<label class="field-label" for="471061_186248pi_471061_186248">Opleiding *</label>
<select name="471061_186248pi_471061_186248" id="471061_186248pi_471061_186248" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="2692949">Manager handel (Filiaalmanager)</option>
<option value="2699837">Anders...</option>
</select>
</p>
<p class="form-field show-hide Opleidingen_Anders pd-text required required-custom ">
<label class="field-label" for="471061_186680pi_471061_186680">Anders *
<input type="text" name="471061_186680pi_471061_186680" id="471061_186680pi_471061_186680" value="" class="text" size="30" maxlength="65535" onchange="" onfocus="" /></label>
</p>
Your change event handler is attached to all elements with class dependent. The element I found was a <p> element with a <select> inside. So, whenever the event function is triggered the this will point to the <p> DOM element. If you want to compare the selected "value" (what you really want here is the .textContent of the selected option) to the string "Anders..." then you will need to do the following:
$("option:selected", ev.target.selected).text() == 'Anders...'
with ev.target being the changed <select> element inside the <p class="... dependent ..."> element.

make diffrence between objects that created with clone() in java script

Good Day Friends. I have a problem... Thanks, if you help me
I have a couple of inputs into a div. I copied that div with Clone function in java script (by click a button) and right now, I have two divs. but my problem:
1- I don't know, How can I get the values of inputs correctly (the input's names are the same)?
2- and I have a select input in div, that some inputs add or remove by choose each option of select input. Now after copied div, choose one option in div2, create changes in div1... and I don't want it !!
<div class="levels">
<div class="add_senario_level">
<span>Level 1</span>
<form>
<select name="condition" onchange="show_div(this,'shop during');">
<option selected="selected" disabled="disabled">choose condition</option>
<option>shop after registration</option>
<option>shop during</option>
</select>
<div id="shop_during" style="display:none;">
<input type="number" id="shop_during_num" name="shop_during_num" placeholder="Enter number">
<select id="shop_during_time" name="shop_during_time">
<option selected="selected">hour after registeration</option>
<option>day after registeration</option>
<option>week after registeration</option>
<option>month after registeration</option>
</select>
</div>
<div>
<button type="button" class="newLevel"> Add New Level </button>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function()
{
$(".newLevel").click(function()
{
$(".add_senario_level").clone().appendTo(".levels");
});
});
function show_div(obj, id)
{
txt = obj.options[obj.selectedIndex].text;
if (txt.match(id))
{
document.getElementById("shop_during").style.display = 'block';
}
else
{
document.getElementById("shop_during").style.display = 'none';
}
}
</script>

You can use jQuery's find function to find a child element and the attr function to get and set attribute values. You will want to do this to change on the id and name attributes for the input and select like below:
HTML
<input type="number" id="shop_during_num0" name="shop_during_num0" class="shop_input" placeholder="Enter number">
JavaScript
$(".newLevel").click(function()
{
const count = $('.add_senario_level').length;
const clone = $(`#add_senario_level${count - 1}`).clone();
const input = clone.find(`#shop_during_num${count - 1}`);
const select = clone.find(`#shop_during_time${count - 1}`);
input.attr('name', `shop_during_num${count}`);
input.attr('id', `shop_during_num${count}`);
select.attr('name', `shop_during_time${count}`);
select.attr('id', `shop_during_time${count}`);
clone.appendTo(".levels");
});
In the show_div method, you can use $(obj) to reference the select that called the function and show or hide the correct element with
$(obj).parent().find('#shop_during').css('display', 'block');

how do i make my onchange function generic?

My Javascript function checks for radio button selection and displays the appropriate drop down box. but this code is not generic, i tried using "this" but it doesn't help.. can this actually be generic?
CODE:
function change(s)
{
if(document.getElementById("viewstate").checked==true)
{
document.getElementById("state").style.display="inline";
document.getElementById("cat").style.display="none";
}
else
{
document.getElementById("state").style.display="none";
if(document.getElementById("viewcat").checked==true)
{
document.getElementById("cat").style.display="inline";
}
else
document.getElementById("cat").style.display="none";
}
}
Front end radio button
<input type="radio" name="viewrecord" value="viewstate" onchange="change('state')" required="" id="viewstate"> View by State
<select name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>
<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat')" id="viewcat">View By Agency
<select id="cat" name="che" style="display:none" required="">

You can try with this snippet
JS
document.addEventListener('click',function(event){
var tar = event.target.id;
if(tar ==="viewstate"){
document.getElementById("state").style.display="inline";
document.getElementById("cat").style.display="none";
}
else if(tar==="viewcat"){
document.getElementById("state").style.display="none";
document.getElementById("cat").style.display="inline";
}
},false)
WORKING COPY
What else I tried?
My primary idea was to add a class to next select tag. For example if you select radio#viewstate it will add a class to closest select element. Then just loop through all the select tag and whoever dont have this class , hide them.
But since you are using display:none nextSibling will not work.For why nextSibling wont work you can take a look at difference between it visibility:hidden
Also note in the demo that I have used label tag with input

If by generic you mean to make the function to be able to work for any similar selection process without depending on the hard-coded values of the selection inputs, this is one way I thought of doing it :
function change(selectorId, selectorClass) {
// Get all the selector elements you use.
var rS = document.getElementsByClassName( selectorClass );
// Out of the elements you fetched above, make the one with
// id = selectorId visible, rest hidden.
for(var i = 0; i < rS.length; ++i)
rS[i].style.display = (rS[i].id == selectorId) ? "inline" : "none";
}
In the HTML part add a class to every select input you want to use with the radio values:
<input type="radio" name="viewrecord" value="viewstate" onchange="change('state', 'record-selector')" required="" id="viewstate"> View by State
<select class='record-selector' name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>
<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat', 'record-selector')" id="viewcat">View By Agency
<select class='record-selector' id="cat" name="che" style="display:none" required="">
With this you can use the same function for similar selection process on different forms.

jQuery loop over html, on change, find class, remove it

So I've got multiple forms with selects on a page. For each form I want the submit button to have a class of disabled until an option is selected, at which point the button should lose the disabled class (each form must work independently of the others). I can't seem to get this working using Next or Find. Here's my code:
<-- FORM ONE -->
<form>
<label for="available-countries-#variables.x#">Available Countries</label>
<select id="available-countries-#variables.x#" class="form-control available-countries-selector">
<option value="0">-- Select Country --</option>
<option value="1">Australia</option>
<option value="2">Brazil</option>
</select>
<button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>
<-- FORM TWO -->
<form>
<label for="available-countries-#variables.x#">Available Countries</label>
<select id="available-countries-#variables.x#" class="form-control available-countries-selector">
<option value="0">-- Select Country --</option>
<option value="1">Argentina</option>
<option value="2">France</option>
</select>
<button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>
-- JS --
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).find('btn-default').removeClass('disabled');
} else {
$(this).find('btn-default').addClass('disabled');
}
});
Any help would be appreciated

You need to look for the button in the current form. Best way to do that is using closest().
var isEnabled = $(this).val() !== '0';
$(this).closest("form").find('btn-default').toggleClass('disabled', !isEnabled);
How I would code it with event bubbling:
$(document).on("change", ".available-countries-selector", function(){
var isDisabled = $(this).val() === "0";
$(this).closest("form").find('btn-default').toggleClass('disabled', isDisabled);
});
ideally you would set document to an element that is closer to the forms.

In the JS context, the this is the <select> element. Since the btn-default is not inside the select, it will not find it with that code.
Instead you can go to the closest form parent and find it from there:
$(this).closest("form").find('btn-default').removeClass('disabled');

The submit button is not within the selector you are using so $(this).find will not work. However, you can use $(this).next() since the submit button is immediately after the select dropdown, like this:
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).next().removeClass('disabled');
} else {
$(this).next().addClass('disabled');
}
});
JSFiddle

You're closing your <button>s with a </a> and your find() is not looking for a classname (because you've excluded the dot) nor can you find a sibling. Use next([selector]) to find the next .btn-default:
$('.available-countries-selector').change(function(){
if($(this).val() !== '0'){
$(this).next('.btn-default').removeClass('disabled');
} else {
$(this).next('.btn-default').addClass('disabled');
}
});
http://jsfiddle.net/mL9h2fof/
UPDATE (thanks #TrueBlueAussie)
You could use .toggleClass to make this even simpler:
$('.available-countries-selector').change(function(){
$(this).next('.btn-default').toggleClass('disabled', $(this).val());
});
http://jsfiddle.net/mL9h2fof/1/

Using Jquery to hide form elements based on selected dropdown option

I have a form that has a dropdown menu, a few text fields and a text area. I would like the form to hide the text area if one of the options from the dropdown menu is selected.
Here is my code:
<form id="contact" name="contact" action="" method="post">
<select name='select-question'>
<option value="member-request">Become a member</option>
<option value="question">Send us your questions / comments</option>
</select>
Name:
<input type="text" name="last-name"></input>
Comments/questions:</br>
<textarea id="comments" name="questions-field" rows="5" cols="27"></textarea>
<br />
<input type="submit" name="submit" value="Submit"></input>
$(document).ready(function () {
$('#contact select[name="select-question"]').change(function () {
if ($('#contact select[name="select-question"]').val() == 'question') {
$('#comments').show();
} else {
$('#comments').hide();
}
});
});
I have also posted to JS fiddle: http://jsfiddle.net/7wzUG/5/
I'm very new to JQuery, and I am not sure why this does not work.
Thanks for any help.

Include jQuery AND add "option:selected" to your selector:
$(document).ready(function () {
$('#contact select[name="select-question"]').change(function () {
if ($('#contact select[name="select-question"] option:selected').val() == 'question') {
$('#comments').show();
} else {
$('#comments').hide();
}
});
});
You also need to hide the comments on load via CSS style and place the label inside the comments div container, so that also the label is invisible when appropriate.
Here's the working fiddle:
http://jsfiddle.net/7wzUG/9/

you just have to include jQuery
Here's the corrected one:
http://jsfiddle.net/edgarinvillegas/7wzUG/7/
Cheers

Here is the same code that Simon Steinberger & Edgar Villegas Alvarado but with the ternary operator
http://jsfiddle.net/4uj2fhoh/
$(document).ready(function () {
$('#contact select[name="select-question"]').change(function () {
$('#contact select[name="select-question"]').val() == 'question' ? $('#comments').show() : $('#comments').hide()
});
});
As others said, add JQuery.
What you could, also, do is add a class that will hide the comments text area, and then toggle it on/off based on dropdown selection.