I have got the HTML but I am not sure on how to get the input box into the span. I tried using document.getElementById but that didn't work. Any help would be great!

Name:
<p>
  <input type="text" name="fname" id="name">
<p>
  <button id= "button" onclick="namejs">Go</button>
<p>
  <span id= "namespan">Name</span>

I have got the HTML but I am not sure on how to get the input box into the span. I tried using document.getElementById but that didn't work. Any help would be great!

Name:
<p>
  <input type="text" name="fname" id="name">
<p>
  <button id= "button" onclick="namejs">Go</button>
<p>
  <span id= "namespan">Name</span>

Share Improve this question edited Jul 31, 2016 at 7:01 nnnnnn 150k30 gold badges209 silver badges247 bronze badges asked Jul 31, 2016 at 6:57 hamish 691 silver badge6 bronze badges

Presumably you want to do this in response to a click on the button? What is the namejs in your button's onclick? – nnnnnn Commented Jul 31, 2016 at 7:01
1 are you using plain javascript or jquery – R4nc1d Commented Jul 31, 2016 at 7:02
@R4nc1d javascript – hamish Commented Jul 31, 2016 at 7:24
@hamish, ok cool you can look at my answer then. I also added and fiddle for you – R4nc1d Commented Jul 31, 2016 at 7:28

Add a ment |

6 Answers 6

Sorted by: Reset to default 1

You can try the following, this is plain Javascript Getting values you can use

document.getElementById("myspan").innerHTML="value";

For modern browsers

document.getElementById("myspan").textContent="value";

CODE

Name:
<p>
<input type="text" name="fname" id="name">
  <p>
<button id= "button" onclick="myFunction()">Go</button>
  <p>
  <span id="namespan">Name</span>

function myFunction() {
  var name = document.getElementById("name").value;
  document.getElementById("namespan").textContent=name;
}

Added a fiddle

You can user innerHTML attribute for span tag, like below :

var name = document.getElementById("name").value; //get name from TextBox
document.getElementById("namespan").innerHTML=name ; //write in span

Hope this will help you.

<!DOCTYPE html>
<html>
<head>
    <script>
    function showInput() {
        document.getElementById('display').innerHTML =
            document.getElementById("user_input").value;
    }
</script>
</head>
<body>
<form>
    <label><b>Enter a Message</b></label>
    <input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();">
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>

If you use jquery , you can smoothly update span on real-time when you write in input :

$('#namespan').html($('#name').val()); // GET Value of INPUT --> SET IT as inner HTML of span

DEMO :

$('#name').keyup(function(){
      $('#namespan').html($(this).val()); // GET Value of INPUT --> SET IT as inner HTML of span
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Name:
<p>
  <input type="text" name="fname" id="name">
  </p>
<p>
  <button id= "button" onclick="namejs">Go</button>
  </p>
<p>
  <span id= "namespan">Name</span></p>

Add an onkeyup event handler

document.getElementById('name').onkeyup = function() {
  document.getElementById('namespan').innerHTML = this.value;
}

Name:
<p>
  <input type="text" name="fname" id="name">
</p>
<p>
  <button id="button" onclick="namejs">Go</button>
</p>
<p>
  <span id="namespan">Name</span>
</p>

You can simply:

Html:

Name:
<p><input type="text" name="fname" id="name"><p>
<p><button id= "button">Go</button></p>
<p><span id= "namespan">Name</span></p>

jQuery:

$('#button').click(function(){
$('#namespan').text($('#name').val()); 
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get text from input box to a span - Stack Overflow

6 Answers 6

DEMO :

与本文相关的文章

评论列表(0)