Get value of Span Text

Question

I have a span with class="span" and a hidden field class="dropdown".

The span text changes, and I need to grab the text and set it as the value of the hidden field's value.

I will then use php (I already have) and use the name of the hidden field to email me the text.

How do I do it?

John Conde · Accepted Answer · 2012-04-27T02:37:23.497

95

<script type="text/javascript">
document.getElementById('button1').onChange = function () {
    document.getElementById('hidden_field_id').value = document.getElementById('span_id').innerHTML;
}
</script>

edited Apr 27 '12 at 02:37

answered Apr 27 '12 at 02:01

John Conde

217,595
99
455
496

1

Before your closing `` tag – John Conde Apr 27 '12 at 02:02
i have a submit button called "button1". Can you make that an on click function, and can you use the classes and id's i have in my question please :) – Hunter Mitchell Apr 27 '12 at 02:03
8

@HunterMitchell: Can't *you* do that? – Colin Brock Apr 27 '12 at 02:05
Well, i am 15, i really am having a hard time with Javascript, and i am trying to learn. – Hunter Mitchell Apr 27 '12 at 02:05
1

If this is a span element how is the onchange event going to fire? – scunliffe Apr 27 '12 at 02:05
When the "button1" is clicked, then the event needs to fire – Hunter Mitchell Apr 27 '12 at 02:07
document.getElementById('button1').onClick = function () { document.getElementById('hidden_field_id').value = document.getElementById('span_id').innerHTML; } --- is that what i need? Will it work? – Hunter Mitchell Apr 27 '12 at 02:08
1

I don't believe attaching `onchange` to a `` will work. – Ry- Apr 27 '12 at 02:36
They said it was editable so I went with that assumption. Their solution in the comments shows they will be using a button instead. – John Conde Apr 27 '12 at 02:37

score 60 · Answer 2 · edited Apr 11 '19 at 13:42

60

var span_Text = document.getElementById("span_Id").innerText;

console.log(span_Text)

<span id="span_Id">I am the Text </span>

edited Apr 11 '19 at 13:42

GuCier

6,919
1
29
36

answered Jun 13 '14 at 06:43

maxspan

13,326
15
75
104

@MichaelStalcup The page you linked to says `innerText` has been adopted by all major browser vendors and is part of the HTML standard. Support is excellent: `IE 6 +` – Kilmazing Jan 04 '17 at 17:42
@Kilmazing thanks for pointing that out, I'll delete my old comment since I can't edit it. Mozilla must have updated their page since when I was looking at it! Or else I misread something. There's some interesting additional reading about innerText on [Mozilla's dev site](https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText) now if you look at Specification > Comment – Michael Stalcup Jan 05 '17 at 16:06
This is better if your `span` element has child elements and you only need the text – Novastorm May 04 '17 at 15:17
based on your posting, I used the command `document.getElementById("span_Id").innerText;` by itself in KeyboardMaestro to pull span fields in for automation - works great. Thanks @maxspan – AFK Dec 20 '20 at 23:50

score 15 · Answer 3 · answered Jul 29 '16 at 16:43

The accepted answer is close... but no cigar!

Use textContent instead of innerHTML if you strictly want a string to be returned to you.

innerHTML can have the side effect of giving you a node element if there's other dom elements in there. textContent will guard against this possibility.

score 5 · Answer 4 · edited Jan 05 '17 at 18:15

5

You need to change your code as below:

<html>
<body>

<span id="span_Id">Click the button to display the content.</span>

<button onclick="displayDate()">Click Me</button>

<script>
function displayDate() {
   var span_Text = document.getElementById("span_Id").innerText;
   alert (span_Text);
}
</script>
</body>
</html>

edited Jan 05 '17 at 18:15

demongolem

9,474
36
90
105

answered Jan 05 '17 at 17:54

Vishal Thakur

1,564
16
25

score 2 · Answer 5 · edited May 23 '17 at 10:31

Judging by your other post: How to Get the inner text of a span in PHP. You're quite new to web programming, and need to learn about the differences between code on the client (JavaScript) and code on the server (PHP).

As for the correct approach to grabbing the span text from the client I recommend Johns answer.

These are a good place to get started.

JavaScript: https://stackoverflow.com/questions/11246/best-resources-to-learn-javascript

PHP: https://stackoverflow.com/questions/772349/what-is-a-good-online-tutorial-for-php

Also I recommend using jQuery (Once you've got some JavaScript practice) it will eliminate most of the cross-browser compatability issues that you're going to have. But don't use it as a crutch to learn on, it's good to understand JavaScript too. http://jquery.com/

Get value of Span Text

5 Answers5

Linked