jQuery, Select by attribute value, adding new attribute - javascript

I have an anchor in my HTML. it has a page attribute with a value. So everytime it is clicked I use the page attribute value in my js. Now I want to set a style attribute with a background color to show that a certain a element is selected. So I have to select the element by page attribute and add a new attribute with a value to the a element.
How do I handle that?

With HTML like:
<a href='#' page='1'>Link 1</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​<br />
you could do:
$('a[page=1]').addClass('selected').attr('test', 'hi!');​
(i.e. better to change display using a css class [e.g. 'selected'] than the style attribute - but the attr call there shows how to add an attribute).

To select an element by attribute value, you can use this syntax:
$('[attribName="value here"]')
Where attribName should be replaced with attribute name such as name, title, etc.
To add a new attribute value, you can use the attr method.
Example:
$('[attribName="value here"]').attr('attribute name', 'attribute value');
And this is how you can change the background color:
$('[attribName="value here"]').css('background-color', 'green');
Note you should replace dummy attribute names and values as per your requirements.

Not sure what you're asking.. do you need to find the a elemenent with a certain value for "page" and change its background?
$("a[page='value']").css('background-color', 'color-code');

Related

Select element by id from the dom, using Java., the element tag is not visible on the inspect

I tried the below code but the button wasn't selected.
WebElement rvbtn = driver.findElement(By.name("rv"));
rvbtn.click();
If you try to select the radio button, you should use the following code :
WebElement rvbtn = driver.findElement(By.name("inputValue"));
rvbtn.click();
You used the value attribute instead of the name attribute inside your By.name selector.

Change attribute type

Is it possible to change the attribute type of an element? Scrathing my head about this - all I can find is how to change the value of an attribute.
I want to change href to src on the element above. I have a script that change the element type to an iframe for mobiles, and I need the attribute to be a src type for it to work.
<a class="colorbox cboxElement" href="http://example.com">Diablo</a>
Is this possible?
Use removeAttr() method to remove an attribute and attr() method to set an attribute.
$('.colorbox').attr('src', function() {
return $(this).attr('href');
}).removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="colorbox cboxElement" href="http://example.com">Diablo</a>
With pure Javascript use Element#setAttribute method to set attribute where you can get attribute value using Element#getAttribute method and remove an attribute using Element#removeAttribute method.
var ele = document.querySelector('.colorbox');
ele.setAttribute('src', ele.getAttribute('href'));
ele.removeAttribute('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="colorbox cboxElement" href="http://example.com">Diablo</a>
FYI : The jQuery method would work for multiple elements, in Javascript you need to iterate over the element collection to update multiple.
For eg:
// for older browser use [].slice.call(....).forEach
Array.from(document.querySelectorAll('.colorbox')).forEach(function(ele){
// do the rest here
})
Yes, You can change any attribute.
Use:
element.setAttribute(attribute_name, attribute_value)
and to get the value of attribute use
element.getAttribute(attribute_name)
Note that not every attribute is going to have an effect on element.
For example, setting type attribute on input element is going to create input of given type, but setting it on span does nothing.
If You want to hold some data information in attributes, I would recommend to use dataset API
If you wanted to use just javascript, you could get the attribute using getAttribute, set the new attribute using setAttribute, and remove the old attribute using removeAttribute.
var tag = document.getElementsByClassName('cboxElement')[0];
tag.setAttribute('src', tag.getAttribute('href'));
tag.removeAttribute('href');
<a class="colorbox cboxElement" href="http://example.com">Diablo</a>

Find the 'source' value of image (img) where its Id is dynamically changing

Here is the code
<img id="simple_captcha-ad089ff4819" src="/simple_captcha?code=a35401d">`
In this, img tag's id is not static. It keeps on changing for every new action.
For the next action, its id can be "simple_captcha-sfw454sdfs".
So, based on these id, I have to fetch its src value.
You can use a selector that matches the beginning of the ID.
var src = $("img[id^=simple_captcha-]").attr('src');
Add a class to the image and select her with the class name. $('.image-class-name').attr('src');

Set element attribute by submitting form

Is it possible, when i click on submit on a form to set this a href class to active?
<li><a class="" href="#" onClick="goto('#ajanlok', this); return false">Ajánl Dalt!</a></li>
Try following:
Add on your open form tag the attribute 'onSubmit'.
Add on your specific a tag the attributes 'id' and 'class'. You can also add the style instead of class attribute.
Write a javascript method that looks for this a tag i.e. with getElementById() or getElementsByTagname("a")[0] (in case there is only one a tag in your form or on your site).
After that add the specific css class name or appropiate style attributes to your a tag.
Make sure that this function contains a return true; at the end of function body.
You could create a function like this.
function makeActive() {
document.getElementById("InsertIdOfHref").className += ' active';
}
Then just add onClick="makeActive();" and set a deafult class to your <a>. like class="AMAGAD"
Next time, Just google it :)
Did some edits. Thanks for the comments

How do I change the value of an input element?

is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);
If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.
You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit
//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});

Categories