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.
Related
So right now, I have:
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</br>
<div id=outprint style="display:none">
<tr>
<td class="label">Out of Print?</td>
<td><input type="checkbox" name="outOfPrint" id="chk"/></td>
</tr>
</div>
<div id="showthis" style="display:none">
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td><input type="checkbox" name="removeAndNotify"/></td>
</tr>
</div>
and my script as:
$('#status').change(function () {
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
Basically I am looking for the hidden texts to pop up
When the drop-down menu is changed AND when it's set to Disabled
and you check the checkbox, the last checkbox appears.
The problems I am having are:
1) When I click on Disabled and check the checkbox, and then I change the Disabled to another option, the hidden text still pops up.
2) You click on any option other than the default one, then you click on the checkbox first before you change the option from the drop-down menu to Disabled -> the hidden text does not show up.
How would I approach this?
Fiddle
Changes made: Invalid htmls fixed, Improper event bindings fixed.
Your HTML:
<table>
<tbody>
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</tbody>
</table>
<table id=outprint style="display:none">
<tbody>
<tr>
<td class="label">Out of Print?</td>
<td>
<input type="checkbox" name="outOfPrint" id="chk" />
</td>
</tr>
</tbody>
</table>
<table id="showthis" style="display:none">
<tbody>
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td>
<input type="checkbox" name="removeAndNotify" />
</td>
</tr>
</tbody>
</table>
Javascript:
var show;
$('#status').change(function() {
show = $(this).val();
if (show != "-1") {
$('#outprint').show();
} else {
$('#outprint').hide();
$('#showthis').hide();
}
});
$('#chk').change(function() {
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
} else {
$('#showthis').hide();
}
});
DEMO
I guess you just need to reset the state of your hidden controls to default once you change the options from the dropdown and then iterate through the logic.
$('#status').change(function () {
ResetState();
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
function ResetState()
{
$('#outprint').hide();
$('#showthis').hide();
$('#chk').prop("checked", false);
}
Example : https://jsfiddle.net/DinoMyte/up4j39qr/4/
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/
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 have a tr like this
<tr>
<td><input id="checked1" type="checkbox" class="cd" value="1" style="margin:6px 0 0 0;"></td>
<td style="padding:6px 0 0 0;"><b>Staff Courtesy</b></td>
<td>
<select name="questionType" id="questionType" class="qType QSelect" style="padding:3px;">
<option value="">--Select--</option>
<option value="1">text</option>
<option value="2">rating</option>
<option value="3">boolean</option>
<option class="show-checkboxes" value="4">option</option>
</select>
</td>
<td width="35%" style="padding:10px 0 0 0;" class="Fsize12 out" id="a1">Enter Some Text</td>
<td><input type="hidden" id="optionInputa1"></td>
</tr>
Initially the 3rd td does not show anything but if the drop down changes then some text appears in the 3rd td
For example if text is selected then in the 3rd td it will show place for text.The code for it is as below
var option='Get Options';
var txt = 'Enter Some Text';
var bool = 'Yes or No';
var rating='place for rating';
$('#addNew .QSelect').change(function () { //alert(this.value);
if (this.value == '4') $(this).closest('tr').find('.out').html(option);
if (this.value == '1') $(this).closest('tr').find('.out').html(txt);
if (this.value == '3') $(this).closest('tr').find('.out').html(bool);
if (this.value == '2') $(this).closest('tr').find('.out').html(rating);
});
$('#addNew .QSelect').change(function() {
var cbs = $(this).closest('td').next().children();
if ($('.show-checkboxes', $(this)).is(':selected')) {
$(cbs).show();
} else {
$(cbs).hide();
}
}).trigger('change');
$('#addNew .cd').change(function() {
var checked = $(this).is(':checked');
// $('#optionSave').removeAttr('disabled');
if ($(".cd:checkbox:checked").length > 0)
{
$('#optionSave').removeAttr('disabled');
}
else
{
$('#optionSave').attr('disabled',true);
}
$(this).closest('td').siblings().find('select, input').prop('disabled', !checked);
}).trigger('change');
}
My problem
I want to programatically set the value of dropdown.For example if I want to set the drop to text then I have to set it value to 1.
This is the code for it
$.each(data1.savedQuestionTypesList, function(index, currQueTyp) {
console.log("queeeeeeeeeeeee "+currQueTyp.pqid.qid.id + "qtid name"+currQueTyp.qtid.name);
$('#checked'+currQueTyp.pqid.qid.id).closest('tr').find('select').val(currQueTyp.qtid.id);
});
So as the drop down value changes so also the the 3rd td changes.
For example
in the above each loop if currQueTyp.pqid.qid.id=1 and currQueTyp.qtid.id=1 then the dropdown is changed to text and in the 3rd td place for text will appear.
But if I do with a button then why the 3rd td does not change.
For example there is button
<button type="button" id="testButton">test</button> and upon clicking I want to change the drop down value
$('#testButton').click(function(){
$('#checked1').closest('tr').find('select').val(1);
});
So here the dropdown value changes but the 3rd td does not change
Fiddle here
Working Demo
Use this for the button event,
In your case #checked1 was a totally wrong selector. You had multiple checkboxes with same Ids. That won't work. Use class selector in such case.
And you need the checked checkbox so :checked.
$('#testButton').click(function(){
$('.cd:checked').closest('tr').find('select').val(1).change();
});
When a [name="tip"] has the first value, display a specific element, otherwise it would display another element.
Both elements have the display:none property. When I load the page I check the select value and fadeIn the desired element automatically.
Everything works fine except when I try to change the selected option: nothing happens. I added both javascript onchange to that item and jquery .change() and nothing happens. Can you tell me why it does not work in my example?
<form id="fm-account-properties-tab" method="POST">
<table width="300px" style="margin-top:10px;" align="center" >
<tr>
<td align="left">
<select class="easyui-combobox" name="tip" style="width:200px;" class="easyui-validatebox" required="true" onchange="changeType();">
<option value="l1">l1</option>
<option value="l2">l2</option>
<script>
$(document).ready(function(){
$('[name="tip"]').val('<?php echo $a['tip'];?>');
});
</script>
</select>
</td>
</tr>
<tr id="l1" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l1" style="width:200px;" class="easyui-validatebox" required="true">
</select>
</td>
</tr>
<tr id="l2" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l2" style="width:200px;" class="easyui-validatebox">
</select>
</td>
</tr>
</table>
</form>
<script>
function changeType()
{
if($('[name="tip"]').val()=='l1')
{
$('#l1').fadeIn();
$('#l2').hide();
}
else
{
$('#l2').fadeIn();
$('#l1').hide();
}
}
$(document).ready( function () {
changeType();
$('[name="tip"]').change(function(){ alert('1');});//it never alerts me
});
use .on for newer jQuery versions (jQuery > 1.7.x reference)
function changeType() {
if ($('[name="tip"]').val() == '___') {
$('#1').fadeIn();
$('#2').hide();
} else {
$('#2').fadeIn();
$('#1').hide();
}
}
$(document).ready(function () {
changeType();
$('select[name="tip"]').on('change', function() {
changeType();
});
});
you have a double class attribute on your select.
here is a working sample http://jsfiddle.net/tvhKH/
May be you should use js error event to figure out the error in that code. E.g, <script> try
{....all your codes here...}
catch(err)
{alert("THE ERRor" + err.message);} </script>. These code will alert your error and the exact point it occurs. Good luck!
First, you should try to add a
console.log("It works");
or a
alert("It works")
in your method so you know if it is actualy called.
Then I think the issue may come from FadeIn() only works on elements with css {display: none} and visibility different of 'hidden', so are you sure your elements are ? In doubt, you may replace
.fadeIn();
by
.css('visibility','visible').hide().fadeIn(); // hide() does the same as display: none
Then please let me know if you have more information after doing that.