I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.
Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?
Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO
You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});
I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.
Related
I'm using a fake select box in my script which means the original select box is hidden and for styling purposes a ul is showing up. Whenever the selected value of this list changes the orginal select box does too.
There is a change function for that. Within that function is following code:
var el = $(e.currentTarget) ;
$('#my_select_box').children().removeAttr('selected');
$('#my_select_box option[value="'+el.attr('data-value')+'"]').attr('selected','selected');
After that change I want to retrieve the new selected value of the original select box in another function.
But the normal selector only gets the original value, not the new:
$('#my_select_box option:selected').val() //returns the wrong value
So how to I get the new value in the function I need it?
I tried this function:
$("#my_select_box").bind("DOMSubtreeModified", function() {
console.log($(this).find('option:selected').val());
});
It returns the correct value but not where I need it. So how can I retrieve the correct select box value out of the domtree live?
Thanks in advance!
instead of .attr('selected','selected');, try .prop('selected', true);
I want to run a function when someone adds another option in a multiple select.
I am using onchange="attributePrice(this.value)" but after the second attribute (option) i add the alert shows only the id of the first option selected.
Thanks
Use .change() method of jQuery
$('#select_id').change(function(e){
val = $(this).val();
});
Here you will get comma(,) seperated selected value
I want to fetch the selected option from dropdown. I know I can get selected option with jQuery(dropdown).val(). But I am not able fetch the selected with the 'val' function.
Am I doing anything wrong here?
Just use this:
var selectedValue = $('.daterange-preset').val();
(Note: I was able to see your code and get your class name by zooming in, but in the future please post the code rather than a screenshot.)
try using .on( "change" and then finding the option where selected has been applied. I have attached a jsfiddle with a working example that will alert you the value of the selected option everytime you change it.
$('.datarange-preset').on( "change", function(){
var datarangeSelected = $('.datarange-preset').find(":selected").val();
alert(datarangeSelected);
});
http://jsfiddle.net/g8hVA/
I figured out the issue. In my code at one place dropdown value was getting set with the null.
$daterangePreset.val(someVarialwithNullValue);
Because the value was getting set with null. I don't see any update in the HTML. HTML still shows one of the option as 'selected'. So when I was trying to get the selected value with following syntax it was always returning null.
$daterangePreset.val();
You can use a variant of:
var text = $("option:selected").text();
var value = $("option:selected").val();
Have looked for a solution to this but not found one.
$(document).ready(function() {
if ($("input").value()) {
$("h1").hide();
}
}
So this does not seem to be working ( $("h1").hide() is just a placeholder action... that part is not important, the problem is that the if statement is not working).
There is one form on the page, <input type=text>. I want to make it so that at all times, if there is any text in the input box a certain state is applied. If the input box returns to empty then the state is removed.
There are quite a few other functions inside the $(document).ready function which I omitted due to clarity... but as far as the scope of where the if statement lies it is directly inside of the document.ready function. P.S. The form is shown and hidden dynamically, but it is hard coded -- it is not being created dynamically.
What is wrong with where I have this if statement located?
Try with .val() like
$(document).ready(function(){
if ($("input").val()) {
$("h1").hide();
}
});
Better you use either name or id or class names as selectors.Because input can be of any number and they also includes checkboxes,radio buttons and button types
In jQuery you have to use .val() method and not .value(). Your check should be as follows:
if ($("input").val()) {
$("h1").hide();
}
Unlike .value() in JS, ther's .val() in JQuery.
$(document).ready(function() {
if ($("input").value()) {
$("h1").hide();
}
});
You should use keyup to know when a key is added/removed from the textbox
$(document).ready(function() {
$("#input_data").keyup(function() {
var dInput = $(this).val();
alert(dInput);
});
});
DEMO
NOTE: Since input can be of any number and checkboxes, radio buttons and button types all are included within the HTML input tag, You should use either name or id or class names as **selectors**.
input[type=text]
or, to restrict to text inputs inside forms
form input[type=text]
or, to restrict further to a certain form, assuming it has id myForm
#myForm input[type=text]
If You want a multiple attribute selector
$("input[type='checkbox'][name='ProductCode']")
//assuming input type as checkbox and name of that input being ProductCode
.value() is invalid. You should use .val() instead of .value(). Hope it will make it work?
You should use val at the place of value and the solution is :
$(document).ready(function() {
if ($("input").val()) {
$("h1").hide();
}
});
I am trying to fetch the changed input filed value using jquery which is getting changed javascript event of drop down select.
I simply am not getting where exactly the things are getting wrong. It is something related to dom tree refresh (.live)? Any help/suggestions would be great. Thanks.
/* adding the value to user_val input field id in javascript onload function based on drop down select event*/
document.getElementById('user_val').Value = "abcd";
/* then trying to get value which changed */
$(document).ready(function() {
$("#submits").click(function() {
alert($("#user_val").val());
});
You haven't closed your click event handler function. Change it to this:
$(document).ready(function() {
$("#submits").click(function() {
alert($("#user_val").val());
});
});
And change Value to value (note the lowercase "v"), and then it should work fine.
Two errors you got there:
You should use document.getElementById('user_val').value = "abcd"; and not document.getElementById('user_val').Value = "abcd"; (lower case value, not Value).
You should also close the ready event after your click event.
Here is the complete working solution:
/* adding the value to user_val input field id in javascript onload function based on drop down select event*/
document.getElementById('user_val').value = "abcd";
/* then trying to get value which changed */
$(document).ready(function() {
$("#submits").click(function() {
alert($("#user_val").val());
});
});