I am trying to display two tables using dropdown box choices.
I'm using this JS code. Here's FIDDLE
function change_tbl(dhi)
{
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
}
but it isn't working. How?
I need first table to display on load. (Means first table should be default choice.)
Any solutions?
You need to call the function in onchange() like
<select onchange="change_tbl(this.value)">
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
Demo: Fiddle
Also in the fiddle there are few other problems like
jQuery was not included
since change_tbl is used in an inline handler you need to declare it in the global scope - select No Wrap Head/Body in the second dropdown in the left panel
Use a jQuery event handler like
<select id="table-select">
<option value="">select table</option>
<option value="tb1" selected>table 1</option>
<option value="tb2">table 2</option>
</select>
then use a .change() handler to register the change event handler
jQuery(function () {
$('#table-select').change(function () {
$('#tbl_div > div').css('display', 'none');
if (this.value) {
$('#' + this.value).css('display', 'block');
}
}).change(); //this is used to trigger a manual change handler initially so that the state is properly set on page load
})
Demo: Fiddle
Also read: Document Ready, trigger handler, change() handler, id-selector
Demo : http://jsfiddle.net/4K9hM/3/
Html:
<select id="tt" >
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
<div id="tbl_div">
<div id="tb1">
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
<div id="tb2">
<table border="1">
<tr><td>2</td><td>2</td></tr>
<tr><td>2</td><td>2</td></tr>
</table>
</div>
</div>
Js:
$(document).ready(function(){
$("#tt").change( function ()
{
dhi = $("#tt").val();
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
});
});
Related
I have this <select> list that takes different options and reroutes based on the one clicked. The html code is:
<select id="pageSelect" name="Choose Page" onchange="location = this.value">
<option value='' disabled selected hidden>Choose Page</option>
<option value='/page-1'>Page 1</option>
<option value='/page-2'>Page 2</option>
<option value="allPages" >Custom Page</option>
</select>
The rerouting of the first 2 pages work as expected. However, the third option is going to be handled using a custom Javascript function instead of being handled by the onchange function declared at the <select> element.
The custom function for the last <option> is:
$('#pageSelect').change(function(event) {
event.preventDefault()
var pagesvalueselect = $(this).val();
if(pagesvalueselect=="allPages"){
$('#siteSaleModal').modal("show"); //Open Modal
}
});
The function works and when a user clicks on the last option, it triggers the modal to pop up but it still redirects the user to another page based on value="allPages" even though I am using the preventDefault() function.
The preventDefault() call only stops the current change event handler. The one you've assigned via the onchange attribute will still run regardless as it's entirely separate.
To fix this, and improve your code, remove the onchange attribute (as they are outdated and now considered bad practice) and combine them in to one unobtrusive event handler.
$('#pageSelect').change(function(event) {
event.preventDefault()
var pagesvalueselect = $(this).val();
if (pagesvalueselect == "allPages") {
console.log('open modal...');
//$('#siteSaleModal').modal("show"); //Open Modal
} else {
console.log('redirecting to ' + pagesvalueselect + '...');
//window.location.assign(pagesvalueselect);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pageSelect" name="Choose Page">
<option value="" disabled="true" selected="true" hidden>Choose Page</option>
<option value="/page-1">Page 1</option>
<option value="/page-2">Page 2</option>
<option value="allPages">Custom Page</option>
</select>
Your code code works fine without event.preventDefault() and onchange attribute.
<select id="pageSelect" name="Choose Page">
<option value='' disabled selected hidden>Choose Page</option>
<option value='/page-1'>Page 1</option>
<option value='/page-2'>Page 2</option>
<option value="allPages" >Custom Page</option>
</select>
$('#pageSelect').change(function(event) {
var pagesvalueselect = $(this).val();
if(pagesvalueselect=="allPages"){
$('#siteSaleModal').modal("show"); //Open Modal
} else {
location = pagesvalueselect;
}
});
Codepen
Here is the simple code which I am trying on js fiddle:
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
$(function () {
$(document).on('click', '.pid', function () {
alert('here');
});
});
Click on http://jsfiddle.net/QRVSw/16/
The click event applies to the whole select element, not to the individual options. Also it's better to use the change event which triggers after making a selection, in contrast to the click event, which triggers as soon as you click.
In addition, you don't need to wrap your code to prepare it for OnReady. With this on call, you bind the event to the document, which is already available, even if the select object itself isn't yet.
So, your code could be simplified (and made working) like this:
$(document).on('change', '#test', function () {
alert('here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
You could try to make use of the onchange event for select elements:
$(function () {
$(document).on('change', '#test', function () {
alert('here');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
I am using a lightbox called featherlight. I have a form inside of that lightbox that requires a dynamic select option to change the content of the next question select box.
The select box works outside of the lightbox yet inside it fails.
Any ideas where I appear to be going wrong?
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
Your HTML is most likely being added after the handlers are bound - you can use .on to get around this:
$(document).on("change", "select", function() {
$('select').val( this.value )
});
You should replace document with a container that is present at the time of page load and contains your dynamic content - else this event is going to fire each time the document is changed (and check if a select was actually changed)
With a common class:
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
$(document).on("change", "select.common", function() {
$("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});
have unique id for both select as follow
<select id='select1'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id='select2'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('#select1').change(function(){ // when one changes
$('#select2').val( $(this).val() ) // they all change
})
})
</script>
Updated
I guess you are accessing parent element from child window
try the following
window.parent.$(#select2.val( $(this).val());
I have a div that contain sample table with one TR
<div>
<table id="sample_row" style="width:300px">
<tr>
<td>
<select id="employer">
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
</select>
</td>
<td>
<select id="location">
<option value="1">Location 1</option>
<option value="2">Location 2</option>
<option value="3">Location 3</option>
<option value="4">Location 4</option>
</select>
</td>
<td><input type="text" name="fname" id="subArea"></td>
<td>
<select id="employeeType">
<option value="1">Part Time</option>
<option value="2">Leased</option>
<option value="3">Temporary</option>
<option value="4">Full Time</option>
</select>
</td>
<td><input type="button" value="Save" id="save" class="save"></td>
<td><input type="button" value="Cancle" id="cancle"></td>
</tr>
</table>
</div>
The following is my jQuery function
<script>
$( document ).ready(function() {
$("#save").on("click", function(){
alert("##");
});
$("#add").click(function(){
var tr =$("#sample_row tr:first").clone();
$('#services_list tbody').prepend('<tr />').children('tr:first').replaceWith(tr);
});
});
</script>
Row Added successfully, but .on event not working on new added button with tr?
The problem is that you need to delegate to a parent in the DOM for future added elements. Also the fact that you should not be duplicating ids, should be corrected.
The .on function can delegate to parent elements so that future added elements can be bound. The second parameter in the on() statement below allows me to bind the click event to the #samle_row and delegate for the targeted element ".save"
$("#sample_row").on("click",".save",function(){
alert("##");
});
The power of on event is second parameter, otherwise it is same as click handler.
$(document).on("click", ".save", function(){
alert("##");
});
Above code will check for click event inside document and if target element is #save it will call event.
Always use class when you think of multiple items, dont use ID in that case.
Use the following
$("body").on("click", ".save", function(){
alert("##");
});
You can even replace body by #sample_row :)
Try this
$('body')
.on('click', '.save', function (event) {
alert("##");
})
.on('click', '#add', function (event) {
var tr =$("#sample_row tr:first").clone();
$('#services_list tbody').prepend('<tr />').children('tr:first').replaceWith(tr);
}
);