I can't figure out how to get the select tag value. I need to alert the text value "ART"
Any Idea?
<select class='category_drop43' value="ART"><option value='test'>Test</option></select>
$(document).ready(function(){
$('.category_drop43').change(function() {
var keyword = $('select' this ).val();
alert(keyword);
});
})
You need to use .val() instead of .value():
var keyword = $(this).val();
or better using pure javascript to get the value:
var keyword = this.value;
Please note that select does not have value attribute as well as your select don't have any class name as .category_drop43, so you can either add this class to your select
<select class="category_drop43"><option value='test'>Test</option></select>
or target the select element using:
$(document).ready(function(){
$('select').change(function() {
var keyword = this.value;
alert(keyword);
});
});
value is invalid HTML attribute for select element, you can use data-* HTML5 attribute instead:
<select class="category_drop43" data-value="ART"><option value='test'>Test</option></select>
then you can use .data() to retrieve the value:
$(document).ready(function(){
$('select').change(function() {
var keyword = $(this).data('value');
alert(keyword);
});
});
Fiddle Demo
Related
I want to select a value and store it into a variable. Here is how it looks like:
My link
not I want to do smth like this:
$('a').on(click, function(){
var videoId = a[video-id].val();
});
output should be :
console.log(videoId);
somevalue
Update
video-id="this is changeable"
you need to put a and click in quotes. You can use .attr() or .data() to get the desired attribute value'
Using .attr()
$('a').on('click', function(){
var videoId = $(this).attr('video-id');
alert(videoId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My link
Using .data()
To use .data() you have to prefix you attribute with data e.d data-id instead of video-id
$('a').on('click', function(){
var videoId = $(this).data('id');
alert(videoId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My link
You can either use:
var videoId = a.attr("video-id");
Or, better stick with data-* attributes and give:
My link
var videoId = a.data("video-id");
And please change:
$(a)
// to
$("a")
I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.
HTML
<div class="show-and-hide-content">
<select>
<option></option>
<option data-type="true">true</option>
<option data-type="false">false</option>
</select>
<div class="hidden content content-true">You have selected true.</div>
<div class="hidden content content-false">You have selected false.</div>
</div>
CSS
.hidden {
display:none;
}
Javascript
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $selects = $row.find('select');
$selects.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
Working radio button JSFiddle
Non working drop down JSFiddle
I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.
I want the JQuery to work as intended and show the correct divs based on the users selection.
How can I amend the code to do this? Thanks for helping.
You now got:
var type = $(this).attr('data-type');
Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the <option>.
So, you'll need to find the selected <option>:
var type = $(this).find('option:selected').attr('data-type');
Check the updated Fiddle.
[EDIT]
If you want to simplify your code, you could use this:
$(function () {
$('.show-and-hide-content select').on('change', function() {
$(this).parent().
find('.content').hide()
.filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
});
});
Demo.
Or change your select data-type to value and use
var type = $(this).val();
DEMO
Try this one
$(function () {
$('#select').on('change', function () {
var selctedval = $(this).val();
$('.content').hide();
$('.content-' + selctedval).show();
});
});
This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.
$('.show-and-hide-content select').on('change', function(){
var selected = $(this).find('option:selected').data('type');
$('.content').addClass('hidden');
$('.content-' + selected).removeClass('hidden');
});
Here is a fiddle
I am a starter in jQuery . How to find all the controls in a form using jQuery?
I know the code is like this
function submitValidator(){
$("form :input").each(function(){ });
I want to access their Id's and need to apply regular expressions
Some of the text boxes are numeric remaining will be alphanumeric. Is there any method to sort them to apply regular expressions?
You can add a new property data-charSet in HTML
<input type="text" id='amt' data-charSet='numeric'>
add which all controlles you want to add after the "form :"
function submitValidator(){
$("form :text, textarea").each(function(){
var NumericOnly = "^[0-9]*$";
var svId = $(this).attr('id');
if($(this).attr('data-charSet') == 'numericonly')
{
if(!$(this).val().match(NumericOnly)) {
alert("numeric");
eval("$('#" + svId +"').focus();")
return false;
}
}
});
}
It's jQuery, not j-query.
Anyway...
You can do it like this:
$("form :input").each(function (index, element) {
var id = $(this).attr("id"); // returns the object ID
var value = $(this).val(); // returns the object value
// etc
});
use
function submitValidator() {
$("form :input").each(function(){
var id = $(this).attr('id'); // here you got id
});
} // here missed brace
you need not to get Id if you can get object
function submitValidator() {
$("form :input ,form textarea").each(function(){
$(this).yourfunction();
});
}
:input will only give you tags with input, textarea will be missed so need to add that as well
I think you want to do something like this:
$("form").find("input").each(function(){
var currentElementsId = $(this).attr("id");
if(currentElementsId.match(/^regex/)){
//do something
}
});
if you want to get more than only input elements inside the form tag, you can put multiple selectors in the find() function like this; find("input,select,textarea,.className,[type='valueOfAttributeType']") and obviously any other selectors
I have two select tags in my website. When I try to get the text of selected item in one select tag, I see that it returns the two texts of the two select tags, even if I specify which select to retrive data from via a class attribute.
My code is
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $(' option:selected').text();
alert(val1);
});
$('select.select2').change(function(e) {
e.preventDefault();
var val2 = $(' option:selected').text();
alert(val2);
});
The alerts are always containing the text of the two select tags concatenated.
Your usual help is appreciated.
Perhaps update the selector to specify the context of the selection:
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $('option:selected', this).text();
alert(val1);
return false;
});
The selector $('option:selected', this) will return values found within the context of the changed element.
It is because of this $('option:selected').text(); you have two selected option in your page so it returns two values.
You need to do this:
// Call the change event for the select
$('select.select').change(function (e) {
e.preventDefault();
// Get the selected option for the select in current scope
var text = $(this).find('option:selected').text();
alert(text );
//return false; No need of this, as we already called the preventDefault() method
});
you need to specify the class when you retrieve the value:
var val1 = $('.select option:selected').text();
and
var val2 = $('.select2 option:selected').text();
So I would like to set a variable to the text of an element when that element is clicked:
$('.clickme').click(function() {
var selected;
var selected = this.text();
});
I've looked at the documentation and I believe this should work. Any ideas what the issue might be?
Try:
var selected = $(this).text();
If no luck, maybe it's form element so it has value:
var selected = $(this).val();
If still no luck let us know what is clickme (div? span?) and try this as "last resort":
var selected = $(this).html();
if .clickme is input or textarea :
var selected;
$('.clickme').click(function()
{
selected = $(this).val();
});
Other :
var selected;
$('.clickme').click(function()
{
selected = $(this).text();
});
You need to wrap the this with the jQuery object...
var selected = $(this).text();
If your listener is on a button, IE doesn't know the difference between the text and value properties and jQuery doesn't fix it, getAttribute doesn't help either. You need to use getAttributeNode:
<button value="the value"
onclick="alert(this.getAttributeNode('value').value);">The text</button>