Trigger change function and set the value of select in jquery? - javascript

Hi I am having given code
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) {
$('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val()).change();
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
}
});
So I want after change function or when change function trigger at that time only permanent_address_state_code value will set same as contact_state_code value.
I have tried this code too but its not working
$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) {
$('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val()).trigger('change',function(){
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
});
}
});
I am attachiing snapshot when click on check box it does not populate state
Please guide me how to solve this. Thanks in advance.

$('#filled-in-box2').on('click', function () {
if ($('#filled-in-box2').is(':checked')) { $('select#employee_permanent_address_attributes_country').val($('select#employee_contact_attributes_country').val());
$('select#permanent_address_state_code').val($('select#contact_state_code').val());
}
});
This alone will work for your requirement to change permanent state and country when you click on checkbox.

Related

How to fire onClick function of a div depending on another div

I want to call a function on one type of button click on my HTML page.
I have got around 10 such button on the page and wrote the below code to call a function when the button is clicked,
$('.divname').each(function (index) {
$(this).on("click", function (e) {
//Call Another Function
});
});
And this is working fine as expected.
However the issue is, sometimes depending on some condition one dynamically generated div is been created(Pop up message) and I dont want my above said code to work when the pop up message comes up.
Could you please advise how this can be achieved.
Thanks and Regards,
Aniket
Hi What something like set a bool and check if it true or false...somthing like:
var enable = true;
$('.divname').each(function (index) {
$(this).on("click", function (e) {
//Call Another Function
if(!enable) return;
});
});
//set it to false on popup show (or something else event)
$(popup).show(function(){
enable = false;
})
In simplest way.
$('.divname').each(function (index) {
$(this).on("click", function (e) {
//Simply check the condition for that Open Pop up message
if(openPopUp){
return;
}
callfunction();
});
});
try something,
$('.divname').each(function (index) {
$(this).on("click", function (e) {
if($('#popupModal:visible').length == 0){ // check length of visible modals
//Call Another Function
}
});
});

why changing input doesn't trigger on change event?

I am trying to get change value of input when its values are changed.
http://jsfiddle.net/stackmanoz/694W9/
$(function () {
$('.color-iris').iris();
$('#color').on('change', function () {
console.log($(this).val());
});
});
I am using color-picker and after the input's value has changed with the new color value, I want to get its value.
But this is not going well.
Please guide me through this
Use option change
$(function () {
$('.color-iris').iris({
change: function () {
console.log(this.value);
}
});
});
DEMO
Change event would be fired only when that textbox value changes as wel as focus is getting blurred out from the particular text box,so in this context you have to use input
$(function () {
$('.color-iris').iris();
$('#color').on('input', function () {
console.log($(this).val());
}) ;
});
DEMO

JS with select boxes

I am currently working on a bit of javascript that will execute when a checkbox is checked.
When the checkbox is checked, the form will display 2 more select boxes.
I've attempted something but i'm not very good with javascript, can someone take a look and lemme know where i'm going wrong?
$(document).ready(function() {
$("#repeat").change(function () {
if ($("#repeat").checked){
$("#numbers").slideDown();
} else{
$("#numbers").slideUp();
}
});
$("#numbers").hide();
$("#repeat").tigger("change");
});
And the id of the checkbox is repeat and id of one of the select boxes is numbers.
This part is not correct:
$("#repeat").checked
and should be
this.checked
So whole script:
$(document).ready(function () {
$("#repeat").change(function () {
if (this.checked) {
$("#numbers").slideDown();
} else {
$("#numbers").slideUp();
}
});
$("#numbers").hide();
$("#repeat").trigger("change"); // <--- trigger, not tigger
});
$("#repeat") is a jQuery instance object, it doesn't have a property checked. However this inside of change event handler refers to the HTMLSelectElement which has this property.
Also it's trigger not tigger.

Jquery change the value of dropdown from a dropdown change

I'm trying to change the value of two dropdown lists when a third one changes, to that dropdown's new value:
<script>
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
</script>
Nothing happens.
Try this for starters, work your way when you get this to work :)
$(document).ready(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
});
Try like this
$(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val($(this).val());
$('select[name="d2"]').html($(this).val());
});
});

Values updating on second click

Hiii, I am having problem with a code.
here is my structure, I have class structure as follows :
.box-slide-query
---.new-query-blocks
---.query-blocks
---.query-blocks
---.query-blocks
I need on click of .new-query-blocks class, i should get the count of number of .query-blocks. I am able to get the value but it is working when i click 2 times(On second click it update the value in attr "answerCount").
here's my code :
$('html').on('click', '.new-query-blocks', function () {
$('.query-result').each(function () {
($('.box-slide-query')).attr('answerCount', $('.new-question-row', $(this)).length);
});
});
Try this:
$('html').on('click', '.new-query-blocks', function () {
$('html').find('.query-result').each(function () {
($('.box-slide-query')).attr('answerCount', $('.new-question-row', $(this)).length);
});
});

Categories

Resources