Develop Reference

Finding Certain Element Using XPATH with Not Contains

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))]

How can i click a button with a custom ID that is not recognized in Javascript? If there is not a name or tag or ID, can it be done?

There is a website I am trying automate using JavaScript to apply a discount code. I need to know an alternative method to get this specific button to submit() or click() it. I already found a way to input a code because there is an ID for that element. However, that is not the case for this button. When i used the data-trekkie-id ID, "apply_discount_button", it wouldn't recognize the ID.
<button name="button" type="submit" class="field__input-btn btn btn--disabled" data-trekkie-id="apply_discount_button" aria-busy="false">
<span class="btn__content visually-hidden-on-mobile" aria-hidden="true">
Apply
</span>
<span class="visually-hidden">
Apply Discount Code
</span>
<svg class="icon-svg icon-svg--size-16 btn__icon shown-on-mobile" aria-hidden="true" focusable="false"> <use xlink:href="#arrow" /> </svg>
<svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button" /> </svg>

I'm not getting 100% about what you're looking for. But I guess you want to select the button with the custom html5 data attribute (data-trekkie-id).
You can select the button in javascript using the following line:
const discountButton = document.querySelector('[data-trekkie-id="apply_discount_button"]');
It will return the first match with the attribute data-trekkie-id="apply_discount_button".
Then you can listen events on this element by attaching addEventListener method.
Like if you want to listen for click event on this element, the code will be:
discountButton.addEventListener('click', function(){
alert('Discount button was clicked.'); // Replace this line with your code
});

Because of HTMl's flexibility you can create your own attributes and use them and you want; if you have ever used bootstrap you will see that they add some attributes to html tags
You can do the same.
To capture the click event on the button with the data-trekkie-id attributes, you can we jQuery do something like:
$("[data-trekkie-id=apply_discount_button]").click(function(){
//some stuff
})
or simply:
$("[data-trekkie-id]").click(function(){
//some stuff
})

Adding "jumpid" to HTML button with jQuery

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.

How will hide label using div in javascript?

I want hide a label according to a dropdown button. I am using a div with JavaScript. My code is:
<div id="ime" name="ime">
<h3 class="ms-standardheader">
<label>
<nobr>IEMI No</nobr>
</label>
</h3>
</div>
For hiding through JavaScript,which I am using:
ime.style.display='none';
document.getElementById("ime").style.display='none';
document.getElementsByName("ime").style.display='none';
But this code is not working.

On page load id to this div is not assigned that's way it is not working. Use this after body tag at the end of page.
write this way
<html>
<body>
.
.
.
.
.
</body>
<script type="text/javascript">
document.getElementById('ime').style.visibility = 'hidden';
</script>
</html>

What if you just use document.getElementById("ime").style.display='none'; without the other two lines (which will not work)?
I expect that the first line will throw an error, because ime is not defined, which will prevent execution of the next two lines.
The third line will not work, because it returns an array of objects, which individually have a style attribute, but not together...
// this would work on the first `ime` tag
document.getElementsByName("ime")[0].style.display='none';

Try this it will work
document.getElementById("ime").style.display='none';

jquery before() is out of order?

I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a
<ul></ul>
after my input in order to do a .load inside the list.
The relevant code I have is:
var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
$(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
$('.add_keyword').focus();
addKeywordId++;
});
The problem is, that my HTML structure ends up looking like this:
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />
INSTEAD OF
<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
Anybody know why my HTML is added out of the order I specified??
Thanks
EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(

This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I've seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.
You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.
$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');
Happy haxin.
_wryteowl