I am having troubles pulling the value from a link. It's a CSS formatted page and I would really prefer to use a <a> than a <button>.

<button value="1" onclick="showDetails(this.value)">This works</button>
<a value="2" onclick="showDetails(this.value)">This doesn't work</a>

};
        xmlhttp.open("GET","getdetails.php?q="+str,true);
        xmlhttp.send();

How can I get the value of <a> when it is clicked and not having it go somewhere?

I am having troubles pulling the value from a link. It's a CSS formatted page and I would really prefer to use a <a> than a <button>.

<button value="1" onclick="showDetails(this.value)">This works</button>
<a value="2" onclick="showDetails(this.value)">This doesn't work</a>

};
        xmlhttp.open("GET","getdetails.php?q="+str,true);
        xmlhttp.send();

How can I get the value of <a> when it is clicked and not having it go somewhere?

• javascript
• css
• html

Share Improve this question Follow edited Oct 18, 2018 at 2:34 Adriano 3,94455 gold badges3636 silver badges5656 bronze badges asked Oct 18, 2018 at 2:23 user4183285user4183285 1

• 3 .value will only grab the element's value if it's a valid property for that element type. <button>s have a value property, whereas <a>s do not. – Tyler Roper Commented Oct 18, 2018 at 2:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Only a select few elements, like <input>s, <textarea>s, and <button>s can have value properties:

console.log(
  document.querySelector('a').value
);

<a value="val">a</a>

If you have to use the value attribute, use the getAttribute method instead of dot notation:

console.log(
  document.querySelector('a').getAttribute('value')
);

<a value="val">a</a>

Another option would be to use data attributes instead, which would be more appropriate than value="s when working with an <a>:

console.log(
  document.querySelector('a').dataset.value
);

<a data-value="val">a</a>

(also make sure to attach your event handlers properly using Javascript if at all possible - inline handlers are generally considered to be pretty poor practice - try using addEventListener)

To use addEventListener, select your a, and call addEventListener on it. For example, if your <a> has an id of details:

const details = document.querySelector('#details');
details.addEventListener('click', () => {
  showDetails(details.dataset.value);
});

function showDetails(str) {
  console.log('showing details for ' + str);
}

<a id="details" data-value="thevalue">click for details</a>

You can write a Javascript function to get the value from the link as follows:

function showDetails(a){
  let value = a.getAttribute("value");
  // view value
  console.log(value)
}

<!--<button value="1" onclick="showDetails(this)">Button link</button>-->
<a value="2" onclick="showDetails(this)">Anchor link</a>

Your issues has 2 parts:

#1: Use of correct attribute

You should not use the value attribute in <a> tag, as it's not a valid attribute for HTML standard; try to use data-val instead. Attributes starting with data- allow us to store extra information on standard, semantic HTML elements without other hacks.

Example:

<a data-val="2" onclick="showDetails(this)">Test</a>

For the JS function, it can be written as:

function showDetails(obj) {
    console.log(obj.dataset.val); // 2
}

References: https://developer.mozilla/en-US/docs/Learn/HTML/Howto/Use_data_attributes

---

#2: Prevent the <a> gets redirected

The initial choice of using <a> is incorrect, as <a> is designed to: (1) redirect to other page via hyperlink specified; or (2) go to certain section in the page using anchor name.

However, you can still stop the redirection using JavaScript (though not suggested). Edit your onclick function as below:

<a data-val="2" onclick="showDetails(this); return false;">Test</a>

Note the return false is added.

p.s. for better coding standard, you should separate JS from HTML structure.

Anchor tag does not have a value attribute, you can read about it in mdn. If you need to assign a value to an anchor tag you can use custom data attribute data-*. In order to get values from data-* in your javascript function can try something like this

const anchor = document.querySelector('a');
const str = anchor.data.value;

And then use it in your ajax logic.

const url = 'getdetails.php';
const params = `q=${str}`;
const http = new XMLHttpRequest();

http.open('GET', `${url}?${params}`, true);
// ... other logic