I am using the below code to change a class name of a button. However, I only want to do this for one button with the text 'Upload' and not another button that says 'Upload Database'.
Is it possible to change this from a 'Contains' to an exact match only?
<script>
$( ".sitebutton:contains('Upload')" ).addClass('siteButton2').removeClass('sitebutton');
</script>
You cannot do this with :contains as it's a 'hungry' match. An alternative is to use filter(), where you can do an exact match:
$('.sitebutton').filter(function() {
return $(this).text().trim() == 'Upload';
}).toggleClass('siteButton2 sitebutton');
If possible, a much better solution would be to just put an id or class on the required button element and select via that.
Just use a jQuery filter on the elements:
$('.sidebutton')
.filter((i, e) => $(e).text() === 'Upload')
.addClass('sideButton2')
.removeClass('sideButton');
You might need to trim the text, as there could be some extra whitespace floating around.
You can use .filter() to check the .textContent of the element, :contains() checks if the text is included within the .textContent or .innerText in any form by using .indexOf() internally
$(".sitebutton").filter(function(i, el) {
return el.textContent === "Upload"
})
.removeClass('sitebutton')
I think you're generally making it harder on yourself, but you can do something like this:
$(".sitebutton.Upload").not(".Database").addClass('siteButton2').removeClass('sitebutton');
Just put a specific id for the button and then call the needed code to change the class.
Check this Plunker
This is the code
HTML:
<input type=button id="upload" value="Upload" class="sitebutton">
<input type=button id="uploaddb" value="Upload Database" class="sitebutton">
Script
$('#upload').click(function() {
$('#upload').addClass('siteButton2').removeClass('sitebutton');
});
Related
I'm trying to get value from input tag but it returns an empty string.
When I open frame source it shows something like
<input type="hidden" name="" class="code_item" value="00-00000159" />
To get value I'm trying with
$(this).children('td').children('.code_item').value
Please, help me to find the error, I'm new for this.
In jquery use .val() instead of .value
$(this).children('td').children('.code_item').val()
Because you're using jquery selectors you should use val() instead of .value :
$(this).children('td').children('.code_item').val()
Or add [0] to return javascript object then you could use .value :
$(this).children('td').children('.code_item')[0].value
It could be done also without using children() :
$('td .code_item', this).val();
Hope this helps.
I have one input field having no value field ( that will be added later using jQuery )
<input type=hidden>
Once I execute some function to add value to the input field I get
<input type=hidden value="123">
I want remove that value field from input field later. How can I do that?
Presently I am using the following jQuery function:
$('input').val('');
and using that I get
<input type=hidden value>
But I want
<input type=hidden>
How Can I achive that?
Thanks...
jQuery's removeAttr removes attributes.
Try: $("input").removeAttr( "value" );
Edit 2018-09-11:
Since jQuery isn't necessary to do this, and the title doesn't specifically ask about jQuery (although the tags do), here's the solution in plain JavaScript:
document
.querySelectorAll( "input" )
.forEach( ( input ) => {
input.value = "";
input.removeAttribute( "value" );
} );
However, as #cookie-monster originally said: you probably shouldn't be removing DOM attributes. Consider rethinking your application.
You are looking for somehing like:
$('input').removeAttr('value');
use removeAttr()
$('input').removeAttr('value');
You can use:
$('input').removeAttr('value');
You can use the .removeAttr() method. This method uses the JavaScript removeAttribute() function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.
$('input').removeAttr('value');
To remove 'value' attribute from all inputs you can use
$('input').removeAttr('value');
You can also use input ID.
Example:
$('#Input_Id').removeAttr('value');
Or class for remove attribue
Example:
$('.Input_Class_Name').removeAttr('value');
I have a javascript program to filter a list of things in a HTML select control by typing a regular expression into an input (text) box. I can do the following to correctly filter a specific select control:
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist(document.myform.myselect);
filter.set(this.value);
});
});
but I have used a custom attribute (something one can now do in HTML5) called data-filterable. The attribute will store the name of the select control that is to be filtered so that JS can use the name of the control to filter the list. This would be a good idea because I will have a general function to filter any select box rather than a specific one.
Any ideas how I do this? I need something like this in the HTML:
<input data-filterable='{"to":"#selectbox1"}' size="30" type="text" />
but I'm not sure exactly what I'm doing here and what to do with the JS.
Thanks guys :).
Try this:
<input data-filterable="#selectbox1" size="30" type="text" />
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist($($(this).data('filterable'))[0]);
filter.set(this.value);
});
});
To break down the expression $($(this).data('filterable'))[0]:
$(this) wraps this in a jQuery wrapper. In our context, since it's a jQuery keyup event handler, this references the <input> DOM node.
$(this).data('filterable') retrieves the contents of the data-filterable attribute as a string. In our case, it's #selectbox1.
After that this string gets passed in to jQuery as a selector: $($(this).data('filterable')).
Finally, we take the 0'th element of the returned array which should be the DOM element of the target selectbox. Of course, if there isn't a selectbox which fits the selector this will fail rather miserably. If you suspect that this is a real scenario, check the .length of the returned array first.
I have a structure like the following:
<form>
<input type="text" />
<input type="text" />
...
<input type="radio" />
<input type="whatever" />
Here I have some text
</form>
I cannot change the structure of the HTML. I need to remove via Javascript the text inside the form, and the problem is to select it, since it is not wrapped inside any tag.
My solution (more a hack actually) using jQuery is the following
$('form').contents().filter(function(){
return (this.toString() == '[object Text]')
}).remove();
but it's not very robust. In particular it fails on IE (all versions), where this.toString() applied to a chunk of text returns the text itself. Of course I could try
$('form').contents().filter(function(){
return (this.toString() != '[object]')
}).remove();
but I'm looking for a better solution.
How am I supposed to remove the text?
Both a solution using jQuery or plain Javascript is good for me.
You filter for this.nodeType == Node.TEXT_NODE. Take a look at this answer.
Try this, instead of just "this.toString()":
return (Object.prototype.toString.call(this) == '[object Text]');
You could also check the node type, but I never can remember how to do that; I'll go look it up but somebody's going to beat me to it :-)
edit told ya!
If you use version 1.4 you can
var $temp= $('form').children().detach();
$('form').empty().append($temp);
It will remove all children elements, empty the form (the text..) and reinsert the elements..
the same in 1.3.x would require an additional step..
var $temp= $('<div />');
$('form').children().appendTo($temp);
$('form').empty().append($temp.children());
[Update] in regards to Andrea's comment
quoting jquery contents()
The .contents() and .children()
methods are similar, except that the
former includes text nodes as well as
HTML elements in the resulting jQuery
object.
How about:
$('form').contents().filter(function(){
return !this.outerHTML;
}).remove();
I'm trying to get the name of an element in Javascript. Meaning if the element is <div />, then "div" would be returned. If it's <img src="" /> then "img" would be returned. I'm using jquery to select a bunch of elements and then calling a custom function on all of them. Within that function I want to know what I'm dealing with. How do I do this?
Seems like a simple thing. And I think I've done it before but I just can't find it. Google results keep giving me "get element by name" no matter how I phrase it.
Use nodeName (see this note about tagName):
"My advice is not to use tagName at all.
nodeName contains all functionalities of tagName, plus a few more. Therefore nodeName is always the better choice."
tagName or nodeName
$(selector).each(function() {
switch (this.tagName) {
// Handle cases
}
});
You want element.nodeName Or, within jQuery:
$(".includeMe").each(function(){
alert(this.nodeName);
});
<img class="includeMe" src="puppies.jpg" />
<div class="includeMe">Hello World</div>
<p class="includeMe">Don't forget me as well</p>
For element.tagName and element.nodeName return the name of your tag, in uppercase.
If you want it in lowercase, just use element.tagName.toLowerCase() or element.nodeName.toLowerCase().