I have spent the last few days searching for this answer with no luck at all. I am simply trying to add a tracking id to an HTML button.
Existing button
<a class="button" href="/home">This Button</a>
After "jumpid" has been added with jQuery.
<a jumpid="someValue" class="button" href="/home">This Button</a>
So far I've tried using "add", which doesn't work. I've also tried "append" and "HTML" which seems to only replace the button text for example...
<a class="button" href="/home">jumpid="someValue"</a>
I've also tried "insert before", and targeted the class.
$("jumpid=\"someValue\"").insertBefore(".button");
I wanted to also add that I am new to jQuery and if I haven't found the right documentation because I don't know the appropriate language please just let me know.
All you need to do is set the attr in jQuery, below is an example...
$(function(){
$('.button').attr('jumpid','test');
});
Example fiddle here. jQuery docs on attr is here for your reference.
Related
I am trying to search for a specific object inside a html website that the only difference is a disabled="". I have attempted to several attempts but none have been successful.
Problem:
There is two buttons displayed one that is active and the other one is disabled. My goals is to try to find the xpath only for the one that is enabled. I have attached the HTML for both buttons below.
HTML:
<button _ngcontent-skh-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327109">submit </button>
<button _ngcontent-ylw-c131="" type="submit" class="mbsp-button btn-submit ng-star-inserted" id="price-submit-21C327008" disabled="">submit </button>
Xpath:
//*[(contains(#id, 'price-submit-')and not(contains(#disabled," ")))]
This XPATH returns a finding of two elements when I am expecting only one.
Any help would be appreciated.
The problem is your xpath isn't expressing what you really want. You're asking for elements that do not have a disabled attribute whose value contains a single space. Both do not, so both are selected.
It seems like what you really want is the element that has no disabled attribute whatsoever. Try this:
//*[(contains(#id, 'price-submit-')and not(#disabled))]
or
//button[(contains(#id, 'price-submit-')and not(#disabled))]
I am totally fresher in JavaScript and jQuery can anyone help me or suggest regarding this task how can I do this.
I have a task, I want want get dynamic id of input field on button click, I have 100 dynamic input field
<input id="ProgressBar_1" type="text" name="dProgressBar_1" class="form-control bulk-pricing-streetProgressBar">
<input id="ProgressBar_2" type="text" name="dProgressBar_2" class="form-control bulk-pricing-streetProgressBar">
these are my id's, I want to get these id's on button click there code I have mention below.
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id=" "></button>
Finally I want store these getting id's in another button.
<button id="" class="btn btn-danger handleIncorrectNoBtn" type="button">Remove House</button>
Finally I Want to perform some task on this button.
Ill give you a couple of hints, though i find it very hard to fully understand what you are trying to achieve here. Maybe rewrite your question, provide some specifics and be more clear if possible.
[From what i understand]
your first part is a button that when clicked will retrieve the ids of input fields?
lets say this is your button:
<button type="button" class="btn fa fa-arrow-right next-stepBulkProgressBar btn-success __web-inspector-hide-shortcut__" id="myButton"></button>
the click code would look similar to (i'm kind of pseudo coding this af you have provided no example or demo i can use to test, my apologies if this is not correct):
function {
var ids = [];
$('#myButton').on('click', function() {
ids = [];
$("input .classOnAllInputIdsYouWantToGet").each(function(e){
ids.push(e.attr("id"));
});
// store in a variable here or continue using the ids variable
// created above - this can be used anywhere within this function
});
function myOtherFunctionINeedIds(){
// Use ids here
}
}
im not sure if this is what you are after, if not please update or amend your question and i will change my answer to try get exactly what you are after.
good luck.
I have a built a small form on a Drupal site with the following code:
<form id="form">
<button class="btn calc" id="calculator" onclick="return false">Submit</button>
<div class="calcAnswer">£ <span id="result">no value</span></div>
</form>
I would like to use JavaScript to automatically replace the #result element with a value once the button is clicked.
I'm trying this code (but can't seem to get it working:
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").replaceWith('<span id="result">A new value</span>');
});
});
I have been testing in a JSFiddle (http://jsfiddle.net/NFQpw/8/) but am getting nowhere.
Actually, the problem with your fiddle is that you have "No-Library (pure JS)" specified. You need to include jQuery, and your script will work as expected (on the left bar, under "Frameworks & Extensions", select a version of jQuery). There's nothing wrong with your jQuery.
That said, I agree with #Stijn Martens, using .html('A new value') is cleaner; there's no reason to use .replaceWith in this instance.
You can see it working here: http://jsfiddle.net/Jammerwoch/NFQpw/12/
You just need to set the html inside the #result span. Using the .html() function.
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").html('A new value');
});
});
http://jsfiddle.net/Stijntjhe/NFQpw/10/
try this one. just include JS: link
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").replaceWith('<span id="result">A new value</span>');
});
});
It's working, but you're testing with pure Javascript, not jQuery
set on Frameworks & Extensions in the left menu the option jQuery 1.10.1
and it will work
I'm trying to make simple image gallery with html/css and a bit of javascript.It's all up and working, but one function.
I want that when I open the index.html 'All' would be already highlighted by my custom style and if pushed on another button highlight would go to that particular button.
html of a button looks like this
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
edit: I ended up using OnResolve's method and it worked just fine!(even for someone who doesn't know any JS) Thank you all for help :)
Assuming your highlighted class is called activeButton, you could do the following with jQuery
$(function () {
$(".cat-itemem").click(function () {
$(".cat-itemem").removeClass('activeButton');
$(this).addClass('activeButton');
}
})
I've created an example with jsfiddle for you with simple jQuery. You can see each aspect (markup, css, and jquery).
http://jsfiddle.net/p5ZUv/7/
You can certainly append styles on button click via pure css, but to unhighlight others you need javascript.
HTML:
<input type='button' value='All' class="cat-itiem highlighted" id='filterAll'>
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
<input type='button' value='Logo' class="cat-itiem" id='filterLogo'>
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'>
CSS (Add yours)
.cat-itiem{}
.highlighted{background:green}
JS (Jquery is used)
$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}
This post is linked to my previous one.
I was able thanks to Pointy's answer to use properly RemoveClass with MooTools but unfortunately I still have a problem : even after removing the class from the HTML element the HTML element still has an empty class (class="").
I'm wondering if there's a way to avoid this and to remove completely the class.
my code :
<script type="text/javascript">
window.addEvent('domready', function(){
$('votconj').addEvent('click', function() {
$('first_name_conjoint').addClass("validate['required','nodigit']");
$('last_name_conjoint').addClass("validate['required','nodigit']");
$('jj_conjoint').addClass("validate['required']");
$('mm_conjoint').addClass("validate['required']");
$('aaaa_conjoint').addClass("validate['required']");
$('conjoint_regime').addClass("validate['required']");
new FormCheck('formulaire');
});
$('votconj_no').addEvent('click', function() {
$('first_name_conjoint').removeClass("validate\\['required','nodigit'\\]");
$('first_name_conjoint').removeProperty('class');
$('last_name_conjoint').removeClass("validate\\['required','nodigit'\\]");
$('last_name_conjoint').removeProperty('class');
$('jj_conjoint').removeClass("validate\\['required'\\]");
$('jj_conjoint').removeProperty('class');
$('mm_conjoint').removeClass("validate\\['required'\\]");
$('mm_conjoint').removeProperty('class');
$('aaaa_conjoint').removeClass("validate\\['required'\\]");
$('aaaa_conjoint').removeProperty('class');
$('conjoint_regime').removeClass("validate\\['required'\\]");
$('conjoint_regime').removeProperty('class');
new FormCheck('formulaire');
});
new FormCheck('formulaire');
});
</script>
radio button code
<label>Conjoint :</label>
<input type="radio" name="votconj" id="votconj" value="oui" onclick="affich_conj();">oui
<input type="radio" name="votconj" id="votconj_no" value="non" checked="checked" onclick="affich_conj();">non
Use removeAttribute provided by JavaScript itself. It will completely erase the attribute from the tag:
Hay
<script>
var link = $('link');
link.removeAttribute('class');
console.log(link); // <a id="link" href="">
</script>
Example: http://jsfiddle.net/LDBUy/
You should be able to use the .removeProperty() method to remove the class attribute.
http://mootools.net/docs/core/Element/Element#Element:removeProperty
Their example:
HTML
<a id="myAnchor" href="#" onmousedown="alert('click');"></a>
JavaScript
//Eww... inline JavaScript is bad! Let's get rid of it.
$('myAnchor').removeProperty('onmousedown');
Resulting HTML
<a id="myAnchor" href="#"></a>
Just swap 'onmousedown' for 'class' in your own code and you should be golden.
EDIT: I updated the jsfiddle from your other question with an example of this (removing the red color from the header) and it works fine. Can you post more of your code to see if the problem is elsewhere?
http://jsfiddle.net/FrT6V/1/