CODEWITHSUNDEEP
javascripthtml
Muz Zaden
Muz Zaden

Reputation: 33

How to add span into input text box in HTML

I can print information out from JavaScript, how can I add the information to textbox

the following code displays information relation to description12 from JavaScript 

<h6> Description : </h6>  <span id="Description12"> </span><br />

I am now trying to get the information into textbox

<input name="reportnoss" type="text" id="Description12">

which does not work.

Upvotes: 2

Views: 10194

Answers (3)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

First, you cannot have 2 elements in the same document that have the same id. Remove the input's id or change it to another id.

<h6> Description : </h6>  <span id="Description12"> </span><br />
<input name="reportnoss" type="text" id="Input_Description12">

Then, to get the text in the textbox and put it into the span:

var txt = document.querySelector("#Input_Description12").value;  //get the text
document.querySelector("#Description12").innerText = txt;        //put it in

  -and the opposite-

var txt = document.querySelector("#Description12").innerText;
document.querySelector("#Input_Description12").value = txt;

Demo: http://jsfiddle.net/DerekL/bFZMb/

Method used:

Upvotes: 0

hop
hop

Reputation: 2558

As other answers say, you can't have same id.

<h6> Description : </h6>  <span id="Description12"> </span><br />

<input name="reportnoss" type="text" id="DescriptionTextBox">

Javascript to set the span's text to input text:

document.getElementById("DescriptionTextBox").value=document.getElementById("Description12").innerText;

Note you should use .value and not .innerText for input type="text"

If this is not what you were asking for leave a comment.

Upvotes: 1

Chris K
Chris K

Reputation: 550

You can't give two controls on the same page identical IDs - they must be unique.

The ID you give the input text box should be for that control.

You will need to use javascript or jQuery to do this if you must do it client-side.

Something like:

document.getElementById("reportnoss").innerText=document.getElementById("Description12").innerText; would work if you gave the input field the ID reportnoss

Upvotes: 1

Related Questions