I'd like to run a change event when user click a button.
$('#b1').on('click', function(){
$('#select_item').trigger('change');
});
$('#select_item').on('change', function(){
var jbyr = $(this).find('option:selected').val();
if(jbyr == 1){
alert('Option 1');
}
else if(jbyr == 2){
alert('Option 2');
}
else{
alert('Option 3');
}
});
What I am looking for is when I click button, the combobox change its option from previously 1 to 2 for example and fire the select_item change script so the alert('Option 2') is displayed.
addition:
#b1 is a button, not submitting anything. It just force changes the combobox option to option 2. When the combobox change by the button click, the combobox change event should fired. So, user not touch the combobox
This seems to be a simple case of do it the hard way. There is no reason, since you own both pieces of subscription code, to trigger any events what so ever. So don't do that, just encapsulate the change code into a new function. Also I highly recommend reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton # Google Engineer.
$(document).ready(function() {
$('.js-alert').on('click', function() {
onSelectedChanged($('.js-select'));
});
$('.js-select').on('change', function() {
onSelectedChanged($(this));
});
function onSelectedChanged($element){
var jbyr = $element.find('option:selected').val();
if (jbyr == 1) {
alert('Option 1');
} else if (jbyr == 2) {
alert('Option 2');
} else {
alert('Option 3');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click me" class="js-alert" />
<select class="js-select">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
I'm uncertain about the coding need of triggering a change event on click...
"Cascading events" sure is not the idea of the year.
What I can say from here is you to define a function to call either on click or change of the elements you like.
So just create a named function:
myFunction(){
//Do whatever...
}
Then call myFunction() in the event handler you like:
$(element).on("click",myFunction);
or:
$(element).on("change",myFunction);
You need to set the the value of the combobox like this.
$('#b1').on('click', function () {
$('#select_item').val(2);
$('#select_item').trigger('change');
});
$('#select_item').on('change', function () {
var jbyr = $(this).find('option:selected').val();
if (jbyr == 1) {
alert('Option 1');
} else if (jbyr == 2) {
alert('Option 2');
} else {
alert('Option 3');
}
});
Related
I have been stuck on this for a week. It was cleaner to create a new question than update a previous question. I have a simple WP template that has a select box:
<select name="channelChooser" id="channelChooser">
<option value="" selected>Please Select Platform</option>
<option value="cqgd_ytpl">CQG Desktop</option>
<option value="sc_ytpl">Sierra Chart</option>
<option value="cqgq_ytpl">CQG Q Trader</option>
</select>
Inside the template are one visible div, and 3 hidden div's. Using the select box I toggle the visible div so you can show / hide the YT Channel.
jQuery(document).ready(function() {
$('#channelChooser').change(function () {
var playerName = jQuery(this).closest('.embed-container').find('iframe').attr('id');
if($(this).val() == 'cqgd_ytpl') {
$('.ypt_wrapper').not('#cqgd_ytpl').hide();
$('#cqgd_ytpl').show();
} else if($(this).val() == 'sc_ytpl') {
$('.ypt_wrapper').not('#sc_ytpl').hide();
$('#sc_ytpl').show();
} else if($(this).val() == 'cqgq_ytpl') {
$('.ypt_wrapper').not('#cqgq_ytpl').hide();
$('#cqgq_ytpl').show();
}
});
});
Unfortunately, if you start playing a video, then change the channel (show / hide div) the video keeps playing while no longer visible. I have tried using 'pauseVideo', 'stopVideo' etc and I get the same error '... is not a function'
How can I make a global stop function so that each time you use the select box you stop the currently playing video. $(.ytpl-playing).stopVideo(); gets 'ytpl-playing' is not defined.
You can check the working code here JSBin.
I just added the required code to achieve your task. Feel free to change it according to your needs.
jQuery(document).ready(function() {
$('#channelChooser').change(function() {
// $('#ytpl-player1').data("data-pl", this.value);
var playerName = jQuery(this).closest('.embed-container').find('iframe').attr('id');
if ($(this).val() == 'cqgd_ytpl') {
$('.ypt_wrapper').not('#cqgd_ytpl').hide();
$('#cqgd_ytpl').show();
players["ytpl-player2"].stopVideo();
players["ytpl-player3"].stopVideo();
} else if ($(this).val() == 'sc_ytpl') {
$('.ypt_wrapper').not('#sc_ytpl').hide();
$('#sc_ytpl').show();
players["ytpl-player1"].stopVideo();
players["ytpl-player3"].stopVideo();
} else if ($(this).val() == 'cqgq_ytpl') {
$('.ypt_wrapper').not('#cqgq_ytpl').hide();
$('#cqgq_ytpl').show();
players["ytpl-player1"].stopVideo();
players["ytpl-player2"].stopVideo();
}
});
});
There is one dropdown and inputbox. If Aadhar is selected in dropdown i am assigning keydown event for input box which takes numeric only. In case of PASSPORT i am changing keydown event which takes alphanumeric characters.
function changeDocumentType(pthis) {
//dropdown change
var htmlid = "#" + pthis.id;
var doctype = $(htmlid+':selected').val();
populateValidations(doctype,"docId");
}
function populateValidations(doctype,inputId){
$("#"+inputId).removeAttr("onkeydown");
$("#"+inputId).removeClass("onlyNumeric");
$("#"+inputId).removeClass("alphabetNumeric");
if(doctype === "1"){
//aadhar
$("#"+inputId).addClass("onlyNumeric");
$("#"+inputId).attr("onkeydown", "return inputOnlyNumberTablet(this,event,12)");
}
if(doctype === "2") {
//passport
$("#"+inputId).addClass("alphabetNumeric");
$("#"+inputId).attr("onkeydown", "return inputOnlyAlphaNumericTablet(this,event,10)");
}
}
function inputOnlyAlphaNumericTablet(pthis, event, length){
$('.alphabetNumeric').on('input', function(event) {
if (pthis.value.length <= parseInt(length, 10)) {
pthis.value = pthis.value.replace(/[^a-z0-9]/gi, '');
} else {
pthis.value = pthis.value.substr(0, pthis.value.length - 1);
}
});
}
}
function inputOnlyNumberTablet(pthis, event, length){
$('.onlyNumeric').on('input', function(event) {
if (pthis.value.length <= parseInt(length, 10)) {
pthis.value = pthis.value.replace(/[^0-9]/g, '');
} else {
pthis.value = pthis.value.substr(0, pthis.value.length - 1);
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="docId" type="text" value="" enabled="enabled" >
<select style="" value="" enabled="enabled" onchange="changeDocumentType(this)" id="DocumentListFile">
<option value="">Select</option>
<option value="1">Aadhar ID</option>
<option value="2">PassPort</option>
</select>
If once aadhar is selected for passport also it is taking only numeric input. This code is return for android device. Any solution??
Thanks.
You have to remove the other keydown listener before binding the new one else you get multiple listeners each time you perform your dropdown,
Simply removing the attribute from the element doesn't unbind the event.
This isn't a complete copy/paste answer. It's an example, to which you can tweak to your needs. I've just taken the part of your code that assigns the listener and changed it.
function populateValidations(doctype,inputId){
var inp = $("#"+inputId); // get this once. Easier if there is a name change etc
inp.unbind('keydown'); // unbind any keydown event that may exist
inp.removeClass("onlyNumeric");
inp.removeClass("alphabetNumeric");
if(doctype === "1"){
//aadhar
inp.addClass("onlyNumeric");
// add your keydown
inp.keydown(function(){ return inputOnlyNumberTablet(this,event,12);});
}
if(doctype === "2") {
//passport
inp.addClass("alphabetNumeric");
inp.keydown(function(){return inputOnlyAlphaNumericTablet(this,event,10);});
}
}
I have a form that is laoded into a modal, there is a hidden input in it
<input type="hidden" name="transType" id="transType" value="">
There are two buttons that can open the form
Buy
Sell
I want to set the input#transType value based on what button is clicked, again the form is loaded in a modal and opened when the button is clicked
$(function(){
$('.trigger').click(function(e){
//modal stuff, good to go
var link = $(this).attr('href');
$.get(link, function(data){
modal.open({content: data});
//here is where I need to set the val
if ($(this).attr('id') == 'Buy')) {
$('#transType').val('Buy');
} else if ($(this).attr('id') == 'Sell')) {
$('#transType').val('Sell');
}
});
e.preventDefault();
});
});
I have it working with 2 separate click handlers, one for each button and setting the value that way, but would like a cleaner function that covers both buttons. How do I switch the hidden input's value based on the ID of the button (same class)?
SOLUTION
Thanks for the help guys, got it working. Had to change the construct of the funciton, I wasn't scoping 'this' correctly. Here is the final solution, in case anyone ever runs into this.
$(function(){
$('.trigger').click(function(e){
var link = $(this).attr('href');
if($(this).attr('id') == 'Buy') {
$.get(link, function(data){
modal.open({content: data});
$('#transType').val('buy');
});
}
if($(this).attr('id') == 'Sell') {
$.get(link, function(data){
modal.open({content: data});
$('#transType').val('sell');
});
}
e.preventDefault();
});
});
Here's a fiddle for you, the hidden input field (made it visible for showing) will allways have the id's value!
Code:
Jquery:
$('.trigger').click(function(e){
$('#transType').val($(this).attr('id'));
});
HTML:
<input type="text" name="transType" id="transType" value="">
Buy
Sell
SIDENOTE:
If you want to have a check / different value, you might want to go with this (but I don't see a reason to do this)
$('.trigger').click(function(e){
if($(this).attr('id') == 'Buy') {
$('#transType').val($(this).attr('id'));
}
else if($(this).attr('id') == 'Sell') {
$('#transType').val($(this).attr('id'));
}
else if ($(this).attr('id') == 'test') {
$('#transType').val($(this).attr('id'));
}
});
I Hope you are looking for this If I am not wrong!!!
Replace>>
if ($(this).attr('id') == 'Buy')) {
$('#transType').val('Buy');
} else if ($(this).attr('id') == 'Sell')) {
$('#transType').val('Sell');
}
With>>
$('#transType').val($(this).attr('id'));
I'm trying to get the value from combobox-items,
so i can give each a different function...
this is the combobox :
<select id="ComboBox" >
<option value="bios">Bioscopen </option>
<option value="dogs">HondenToiletten</option>
<option value="doctors">Huisartsen</option>
</select>
How can i see what is selected with jQuery and give them each another
function?
Thanks in advance!
var a = $("#ComboBox").val();
alert (a);
then depending of received value run corresponding function
switch(a){
case : "bios" dosomething(); break
case : "doctors" dosomething_else(); break
default: break;
}
Something (rustic) like that, see jsFiddle
If you only want it to be launched when a change event happens, you can remove the $(document).ready(....) part
function bios() {
alert("bios is selected");
}
function dogs() {
alert("dogs coming");
}
function getVal(v) {
switch(v) {
case "bios":
bios();
break;
case "dogs":
dogs();
break;
default:
alert('other');
break;
}
}
$('#ComboBox').change(function(){
getVal($(this).val());
});
$(document).ready(function() {
getVal($('#ComboBox').val());
});
I would handle this by binding on the change element of the select element, and then calling another function in the callback. So maybe something like:
$('#ComboBox').change(function() {
var selectedItem = $(this).val();
if (selectedItem === 'bios'){
// Your code here, maybe another function call etc...
} else if (selectedItem === 'dogs'){
// More code
}
// and so on and so on
});
This isn't a super graceful way to handle this, but I hope it helps.
Trying to work out a small issue with dojo, where if the value of myCode equals selCode (Value selected from dropdown)
the button needs to be disabled. Where am I going wrong here?
Example
var myCode = "CC";
dojo.addOnLoad(function() {
dojo.connect(dojo.byId('#codes'), "onchange", function(evt) {
var selCode = this.val();
if (selCode == myCode) {
dojo.attr('#submit', disabled);
}
dojo.stopEvent(evt);
});
});
<select name="codes" id="codes" class="codes">
<option selected="selected" value="">Select Below</option>
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
<option value="DD">DD</option>
</select>
Two issues:
1. Dojo doesn't use CSS selectors like that. Don't use a #.
2. The attr function takes three params (when doing what you want to do): id/dojoObj, attr name, attr value.
var myCode="CC";
dojo.addOnLoad( function() {
dojo.connect(dojo.byId('codes'), "onchange", function(evt) {
if(this.value == myCode){
dojo.attr('submit', 'disabled', 'disabled');
}
dojo.stopEvent(evt);
});
});
Well, I don't know anything about Dojo, but is sure looks like you're trying to use jQuery methods .val() and .attr(), unless Dojo has the same methods. (I couldn't find docs for them.)
Abandoning the library code for the native API would work like this:
var myCode="CC";
dojo.addOnLoad( function() {
dojo.connect(dojo.byId('#codes'), "onchange", function(evt) {
var selCode = evt.target.options[evt.target.selectedIndex].value;
if(selCode == myCode){
document.getElementById('submit').disabled = true;
}
dojo.stopEvent(evt);
});
});
Example: http://jsfiddle.net/BmSjb/21/
EDIT: Based on the comment below, you want it to toggle based on matching selection.
var myCode = "CC";
dojo.addOnLoad(function() {
dojo.connect(dojo.byId('#codes'), "onchange", function(evt) {
var selCode = evt.target.options[evt.target.selectedIndex].value;
document.getElementById('submit').disabled = (selCode == myCode);
dojo.stopEvent(evt);
});
});
Example: http://jsfiddle.net/BmSjb/32/
Now the .disabled property will be set to the result of selCode == myCode, so when true it will be disabled. When false, enabled.