I need to change the value displayed in a form. For example:

<span id="copy" onClick="addValue()">**Text1**</span>
<span id="copy" onClick="addValue()">Text2</span>

Based from what I click, I want to move it to the input value like this:

<input id="paste" class="text" type="input" name="select" value="**Text1**"/>

Function

<script language="javascript" type="text/javascript">   
    <!--Hide Javascript         
      function addValue(){
         document.getElementById('paste').value = this.innerText;       
     }  
 -->  </script>

When I click on Text1 in value fild I get "undefined" instead of "Text1" ...

I need to change the value displayed in a form. For example:

<span id="copy" onClick="addValue()">**Text1**</span>
<span id="copy" onClick="addValue()">Text2</span>

Based from what I click, I want to move it to the input value like this:

<input id="paste" class="text" type="input" name="select" value="**Text1**"/>

Function

<script language="javascript" type="text/javascript">   
    <!--Hide Javascript         
      function addValue(){
         document.getElementById('paste').value = this.innerText;       
     }  
 -->  </script>

When I click on Text1 in value fild I get "undefined" instead of "Text1" ...

• javascript
• text
• onclick

Share Improve this question Follow edited Aug 13, 2022 at 22:50 DevWL asked Aug 6, 2013 at 23:26 DevWLDevWL 18.9k66 gold badges9797 silver badges9292 bronze badges 2

• 1 Please explain this a little more. I don't know what is moving where, or what is being changed, when, or why. – user2625787 Commented Aug 6, 2013 at 23:28
• 1 Please discuss the research you have done on this before asking the question. Showing code you have tried would be great. – user2625787 Commented Aug 6, 2013 at 23:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Give this a go.

You need to pass the element into your function so you can access it's properties to assign them to your form input.

HTML:

<form name="myForm">
    <span onclick="copyText(this)" >Text1</span>, <span onclick="copyText(this)" >Text2</span>
    <br>
    <input name="myField"></input>
</form>

Javascript:

function copyText(element) {
   document.myForm.myField.value = element.innerHTML;
}

I'd use:

 function addValue(el) {
     document.getElementById('paste').value = el.innerText || el.textContent || el.outerText;
 }

And set the HTML tag like so:

 <span id="copy" onClick="addValue(this)">**Text1**</span>

document.myForm.myField.value = "I'm a different value now!";

Is this what you're looking for?

Form and input should have a "name" property, like:

<form name="myForm">
    <input name="myField" />

in the case above.