Hi I am trying to show hide input element based on selection value of another element.
However I am unable to achieve it. I am not sure what is wrong I am doing.
The JS Fiddle is here :
https://jsfiddle.net/rovvLt9e/1/
<div>
<table>
<tr id="type">
<td height="30">Type</td>
<td>
<input type="radio" name="type" value="Document" checked>Document
<input type="radio" name="type" value="Parcel">Parcel
</td>
</tr>
</br>
</br>
<tr id="height">
<td height="40">Approx weight of consignment</td>
<td>
<select name="weight">
<option selected>200gms</option>
<option>200 - 500gms</option>
<option>500 - 750gms</option>
<option>750gms - 1Kg</option>
<option>1Kg - 5Kg</option>
<option> > 5Kg</option>
</select>
</td>
</tr>
</table>
</div>
</br></br>
<div id="text"> text</div>
The Jquery is :
$(document).ready(function () {
if ($('#type').val() == "Parcel") {
$('#height').show();
}
else {
$('#height').hide();
}
});
https://jsfiddle.net/rovvLt9e/1/
Try to use change event to accomplish your task,
$(document).ready(function() {
var elem = $('#height');
var radios = $(':radio[name=type]').change(function() {
elem.toggle(radios.filter(":checked").val() == "Parcel");
});
});
And note, you have to use attribute selector here as there was no element with id type.
DEMO
There is no element with id type. Bind change event to input[name=type] and toggle visibility like following.
$('input[name=type]').change(function() {
$('#height').toggle(this.value=="Parcel");
});
$('input[name=type]:checked').change(); //to set initial state
UPDATED FIDDLE
Try using selector #type input , .change() event
$(document).ready(function() {
var h = $("#height");
$("#type input").change(function() {
if (this.checked && this.value == "Parcel") {
h.show();
} else {
h.hide();
}
}).change()
});
jsfiddle https://jsfiddle.net/rovvLt9e/6/
Related
I have some repeat button control functions as below, is there a way to iterate them and reduce amount of code?
$('[id$=cBC1]').change(function () {
if ($(this).is(':checked')) {
$(".cBC1_Row").prop("disabled", true);
}
else {
$(".cBC1_Row").prop("disabled", false);
}
$('select').material_select();
});
$('[id$=cBC2]').change(function () {
if ($(this).is(':checked')) {
$(".cBC2_Row").prop("disabled", true);
}
else {
$(".cBC2_Row").prop("disabled", false);
}
$('select').material_select();
});
...
Add HTML code as requested, it's wrapped in a visualforce page, each checkbox will manage text fields on the same row in table.
<table>
...
<tbody>
<tr>
<td>
<apex:inputCheckbox id="cBC1"/>
<label for="j_id0:j_id1:cBC1"></label>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC1_Row"/>
</div>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC1_Row"/>
</div>
</td>
</tr>
<tr>
<td>
<apex:inputCheckbox id="cBC2"/>
<label for="j_id0:j_id1:cBC2"></label>
</td>
<td>
<div class="input-field">
<apex:inputField styleClass="validate cBC2_Row"/>
</div>
</td>
<td>
<div class="input-field inline">
<apex:inputField styleClass="validate cBC2_Row"/>
</div>
</td>
</tr>
</tbody>
</table>
You could drop the last number in the selector, and use "attribute contains" instead, assuming you don't have several elements containing the string cBC.
An other, and better option, would be to use classes
$('[id*=cBC]').on('change', function () {
$(".cBC"+ this.id.match(/\d+$/)[0] +"_Row").prop("disabled", this.checked);
$('select').material_select();
});
Yes, following your pattern you can do:
for (let i = 1; i < amoutOfIds; i++) {
$('[id$=cBC'+i+']').change(function () {
if ($(this).is(':checked')) {
$(".cBC"+i+"_Row").prop("disabled", true);
}
else {
$(".cBC"+i+"_Row").prop("disabled", false);
}
$('select').material_select();
});
}
You have to set correctly the amountOfIds you have, and also you should be changing let i = 1 also to begin with the first id you have.
If you can refactor your event handler to work for each element, you could write a single jquery selector and bind the same anonymous event handler to both elements. It is difficult to determine whether or not this refactoring is feasible without seeing the markup of the elements your script is interacting with.
From your code it seems the IDs are matched.
Why not using:
$('[id^="cBC"]').change(function () {
var _id = $(this).id();
$("."+_id+"_Row").prop("disabled", $(this).is(':checked'));
$('select').material_select();
});
I am trying to have a select input with an other option when the other option is selected the input should become visible, however I want it defaulted as hidden and it should rehide if select is changed again later. I have tried == and literal === and reversing the hide show commands with != without change
currently I have
HTML:
<tr>
<td colspan="3" align="center" border="1">Certification:</td>
<td colspan="3" align="center" border="1">
<select name="certname" id="certname">
<option value=""> </option>
<option value="State">State</option>
<option value="Other">Other</option>
</select>
<input type="text" id="othercert" name="othercert" />
</td>
</tr>
and JS:
$("#othercert").hide();
$(document).ready(function () {
$("#certname select").change(function (e) {
if ($(this).val() != "Other") {
$("#othercert").hide();
}
else {
$("#othercert").show();
}
});
});
I am unsure where to go from here or what is going wrong - any assistance is appreciated.
Your selector thinks select is the child to #certname rather than its id. It should be:
select#certname and not #certname select
JS Fiddle
$("#othercert").hide();
$(document).ready(function () {
$("select#certname").change(function (e) {
if ($(this).val() != "Other") {
$("#othercert").hide();
} else {
$("#othercert").show();
}
});
});
Your change selector is wrong. The select isn't a child of #certname, therefore change to the following:
$("select#certname").change(function (e) {
http://jsfiddle.net/ndgadeb1/
Also you need to put your initial hide inside the document ready function:
$(document).ready(function () {
$("#othercert").hide();
However if you wish to hide on page load then you can just do this in CSS:
#othercert{
display:none;
}
That way it won't flash on page load.
I searched for similar questions, I found some but their solution did't help me.
For example:
First question
Second question
My problem is:
I have a table that the user can add rows dynamically, so I am creating a unique id for each row and all elements inside as well.
each row have two text fields and select with two options, and when you select one of the option the text feild should be dislpay:block and the second will be display: "none", depending on your choice.
I built here some example that will shows the general structure (JSFiddle)
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>
<input id="description-first-1" name="description-first-1" type="text" placeholder = "first">
<input id="description-second-1" name="description-second-2" type="text" placeholder = "second">
<select id="select-1">
<option>
<option id="first-opt-1">1</option>
<option id="second-opt-1">2</option>
</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="description-first-2" name="description-first-1" type="text" placeholder = "first">
<input id="description-second-2" name="description-second-2" type="text" placeholder = "second">
<select id="select-2">
<option>
<option id="first-opt-2">1</option>
<option id="second-opt-2">2</option>
</option>
</select>
</td>
</tr>
$(function() {
$("#select-1").change(function() {
if ($("#first-opt-1").is(":selected")) {
$("#description-first-1").show();
$("#description-second-1").hide();
} else {
$("#description-first-1").hide();
$("#description-second-2").show();
}
}).trigger('change');
});
http://jsfiddle.net/8vz121rq/9/
In my example for that matter you can seen that there are only 2 rows but it can also be 10 rows with different id's.
How to get jquery identify which row and all the elements inside of it i'm changing if the id's of all elements is dynamic ?
First of all, you need event delegation as the rows are dynamically generated, such as:
$("table").on("change", "[id^='select']", function() {
// do your stuf
});
Or in your case:
$("table").on("change", "#select-1", function() {
// do your stuf
});
So, is this what you needed?
$(function() {
$("table").on("change", "[id^='select']", function() {
var $this = $(this);
var $row = $this.closest("tr");
var ID = this.id.replace(/^[^\-]+\-(\d+)$/gi, '$1');
var sIndex = $this.prop('selectedIndex');
var part = sIndex === 2 ? "second" : "first";
if (!sIndex) {
$row.find("input").show();
return;
}
$row.find("input").hide();
$row.find("#description-" + part + "-" + ID).show();
});
});
Demo#Fiddle
P.S. The above is purely based on your markup and ID structure!
I am asking the user to select his/her gender . Later on I want to display the selected gender in another <div> element as shown below. How can I do this?
<div id="v1">
<table>
<tr>
<td>Male or Female</td>
</tr>
<tr>
<td align="left">
<select id="gender" name="gen">
<option>Male</option>
<option>Female</option>
<option>Do not wish to specify</option>
</select>
</td>
</tr>
</table>
</div>
Now I need to display the selected value in another <div>:
<div id="v2">
<h2>I WANT TO DISPLAY THE SELECTED VALUE HERE</h2>
</div>
Try this code if you are using jQuery.
$("#gender").change(function() {
$("#v2 h2").html($(this).val());
});
Demo
Try this:
$(function () {
$("#selection").on("change", function () {
var text = $(this).find('option:selected').text();
$('#v2 h2').text(text);
});
});
Demo here
To get also the value:
$(function () {
$("#selection").on("change", function () {
var text = $(this).find('option:selected').text();
var value = $(this).val();
var string = 'Text: '+text+' - Value: '+value;
$('#v2 h2').text(string);
});
});
Demo here
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var txt=$('#txtfiled11').val();
div.append(txt);
$('.hide').hide();
div.show();
});
});
Another Demo
Update Fiddle DEMO with TEXTFIELD VALUE3
Use
$("#dropdown").prop("disabled", false);
I have a dynamically loaded table where each row has a checkbox option, with an assigned #id of either 1,2 or 3. I need to make a function that will shows a hidden div corresponding to the #id of the checkbox checked. I'm currently using .change() to trigger the function, but this ends up showing the hidden div when unchecking a box, which I do not want to happen. Is there another way to trigger this function for just on "checked", and not "unchecked". See code below:
<tr>
<td >
<input id="1" class="link_contact" type="checkbox"/>
</td>
</tr>
<tr>
<td >
<input id="2" class="link_contact" type="checkbox"/>
</td>
</tr>
<tr>
<td >
<input id="3" class="link_contact" type="checkbox"/>
</td>
</tr>
<div class="1" style="display:none;"> Some Hidden Text</div>
<div class="2" style="display:none;"> Some Hidden Text</div>
<div class="3" style="display:none;"> Some Hidden Text</div>
<script>
$(document).ready(function () {
$(".link_contact").change(function () {
$("." + $(this).attr('id')).fadeIn(800);
$("." + $(this).attr('id')).delay(7000).fadeOut(800);
});
});
</script>
Thanks,
Mark
Do the actions only if the checkbox is checked
$(document).ready(function () {
$(".link_contact").change(function () {
if (this.checked) {
$("." + this.id).stop(true, true).fadeIn(800).delay(7000).fadeOut(800);
$('.dialog_warning').fadeOut(800);
}
});
});
Demo: Fiddle
You need to use :checked selector with in the function is()
<script>
$(document).ready(function () {
$(".link_contact").change(function () {
if($(this).is(":checked")) {
$("." + $(this).attr('id')).fadeIn(800);
$("." + $(this).attr('id')).delay(7000).fadeOut(800);
$('.dialog_warning').fadeOut(800);
}
});
});
</script>
check this http://api.jquery.com/checked-selector/
Missing ending quote (after style attribute) in your html tag
<div class="3" style="display:none;> Some Hidden Text</div>