HTML Select Tag with Javascript - javascript

I want to alert the value of a specific option in my dropdown when it is clicked. Here is my code:
$("select").change(function () {
alert($("option").html());
});
I've tried using .text() and .val(), but neither seems to work.

Assuming you're not using a select[multiple] element, "The jQuery Way™" to get the value is:
$('select').change(function () {
console.log($(this).val());
});
which really might as well be:
console.log(this.value);
The problem with your existing code is that $('option') selects all option elements, and then .html() gets the innerHTML of the first option element in the collection.
You don't want the first option on the page, you want the current value of the select element.

alert($(this).val());
This should work i guess, if you want the value and not the text

Simple enough
$("select").change(function () {
alert($(this).val());
});

Related

JQuery selector does not work in dynamically created content?

I am trying to retrieve the .html() .val() or something else within a html element, this is my html code (generated dynamically):
<div class="presupuesto"><h2 class="precio" id="precio" value="1202">1.202,00 €</h2>
I need the .val() attribute!
With JQuery and JavaScript I want to show, what option from a select has been selected and then show the information about h2 tag (price). This is my JS code:
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
alert(valueSelected);
alert(("#precio").val());
});
The first alert(valueSelected) works well, but the second one triggers a TypeError
Thanks in advance!
As you said that you have dynamically generated elements. Then You need to use event-delegation:-
$(document).on('change','select',function(){
alert($(this).val()); // to get select value
alert($('#precio').attr('value')); // try to use data-attribute which is standered way
});
Note:- Since <h1>,<h2>..,<div>,<ul><li><p>.... these elements don't have value attribute (In standered way). So use data-attribute option for them like below:-
<h2 class="precio" id="precio" data-value="1202">1.202,00 €</h2>
And then change jQuery code just a bit like below:-
alert($('#precio').data('value'));

How do you find out if any select menu have been put into focus?

I am trying to limit query calls using a function that will place edited items into an object then pass them to a PHP script to update only the edited information. In this case I am using jQuery's change() function, however I can not find a pseudo selector for select menu's (ie. :input, input:checkbox). The only idea I have left is to add a class to all the select menu's and go from there like so:
$(":input, input:checkbox, .selectedMenu").change(function() {
//Some Code here
});
I have checked all over and cannot find any information on this. Would this be the best way or is there an alternative?
Problem: How can you find out if any select menu has been put into focus using a pseudo selector or anything on those lines?
Select is its own tag. You don't need a psuedoselector:
$("select").change(function () { ... });
I think that all you want to do is use the select box that was changed, in this case you can do this
$(":input, input:checkbox, .selectedMenu").change(function() {
var $el = $(this);
alert($el.val());
});
you can add a focused class:
$(":input, input:checkbox, .selectedMenu").change(function() {
$(".focused").removeClass("focused");
this.addClass("focused");
//Some Code here
});
I would put this as a comment but I'm not allowed to... Maybe I misunderstood your question, but what about:
$(":input, input:checkbox, select")

if an input radio is checked change the parent's color: can't make it work with jQuery

When I click an input radio, <label>'s text should change it's text color.
However it doesn't do the trick with my jQuery code:
$("#radios").find("input").change(function(){
if ($(this).checked)
$(this).parent().addClass('libelulas');
else
$(this).parent().removeClass('libelulas');
});
I've been checking with the inspector in chrome and seems like it doesn't even create the class wherever is the parent (label) or the input.
Here's my jsfiddle http://jsfiddle.net/Arkl1te/2MnEU/4/
You needed to wrap it in $(document).ready and use a correct selector on the change() event:
$(document).ready(function(){
$(".radios input[type=radio]").change(function(){
$(this).parent().addClass('libelulas');
});
});
jsFiddle here.
Update:
Forgot to give example in relation to your code in the question and not just the jsFiddle:
$(document).ready(function(){
$(".radios input[type=radio]").change(function(){
$(this).parent().addClass('libelulas');
$("input[type=radio]:not(:checked)").parent().removeClass('libelulas');
});
});
jsFiddle here.

Apply PHP script to a single text box

I'm after a simple answer I think.
I have a text box called 'ref' on a page.
When filled in and entered it takes the user to www.website.com/$ref.php.
I need their input to be uppercase to match the directory so I have added this code to change what they type.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input").keyup(function() {
var val = $(this).val()
$(this).val(val.toUpperCase())
})
})
</script>
This works great but it is applied to all text boxes on the page.
How do I limit the script to text box 'ref' AND/OR is there a better way of achieving the same effect.
"if (textbox-name=ref) then apply script"
Thanks
Use the jQuery selector you already have:
$("input").keyup(function() {
Change it like this:
$('input[name="ref"]').keyup(function() {
that will select just that one text box and assign the keyup event to it.
jQuery selectors work just like css selectors.
However, if you want to insure that this is the only element that has this keyup function attached, then use an ID attribute.
Select the input by id,
$("#ref").
Your current code is applying the JQuery code to all input elements. To single out just that one, apply an id to the textbox, e.g. id="ref". Then you just reference it by id in your javascript:
$(document).ready(function() {
$("#ref").keyup(function() {
var val = $(this).val()
$(this).val(val.toUpperCase())
})
})
You should also read up on JQuery selectors.
What way did you call this text box 'ref'? if you have class="ref" as an attribute to it, change the selector in jQuery to input.ref. If you have id="ref", change it to input#ref. But you can better do it in php anyway (with strtoupper)

Display number of checked checkboxes in jQuery

I am quite new to jQuery, I think this might be quite easy for many of you, but I can't seem to make it work. How can I display the number of checkboxes so that the value increases or decreases.
i tried the following but with the number in the span tag remains 0: http://jsfiddle.net/yunowork/NTwxc/
Thanks
You should listen to the change event:
$('input[type=checkbox]').on('change', function(){
var number = $('input[type=checkbox]:checked').length;
$('.totalchecked').text(number);
});
http://jsfiddle.net/NTwxc/7/
Note that val is used for getting/setting values of form elements, for other elements like span element, text or html methods should be used.
Number of checked checkboxes:
$(":checkbox:checked").length
http://api.jquery.com/checked-selector/
edit: I see in your fiddle that you already had that. I'll leave it there, since that's actually the answer to "how to display the number of checked checkboxes"...
The problem is that you're not updating and looking to see how many are checked. You need to re-run that function whenever any of the items are checked.
$(":checkbox").change(function () {
// update the span with $(":checkbox:checked").length ...
});
You shouldn't be setting .val of a span, but .text.
Also, you need to update it every time the checked state changes.
function calc() {
$('.totalchecked').text($(':checkbox:checked').length);
}
$(calc);
$(':checkbox').change(calc);
Demo
Here we are!
$('input[type="checkbox"]').change(function() {
$('.totalchecked').empty().text($('input[type="checkbox"]:checked').size());
});
http://jsfiddle.net/toroncino/PTvG8/
Problems: .val() is for form elements only. To set the content of an element, use .text() or .html() if you are inserting HTML. Second problem is that you need to register a listener to "change" events. Otherwise, the value won't update.
Updated solution: http://jsfiddle.net/NTwxc/4/
$("input[type=checkbox]").change(function(){
var number = $('input[type=checkbox]:checked').length;
$(".totalchecked").text(number);
});
​
By the way, I would personally prefer input[type=checkbox]rather than :checkbox. The former works for both CSS and jQuery.

Categories