Use JavaScript to write string in textbox

Question

I need to pass some text into a hidden input when certain part of the page are clicked.

The simplest version of this (with input="text" to check if it works) would look like this :

function myFunct(the_text) {
  document.getElementById('id01').value = the_text;
  return;
}

<input type="text" id="id01" value="write here" />

<a href="#" onclick( "myFunct("this text should go on the box ");"); /> click me </a>
</br>
<a href="#" onclick( "myFunct("or this one ");"); /> No! Click me </a>
</br>

I don't know how to properly pass the string as the parameter of the function.

Anup pandey · Accepted Answer · 2017-10-25 09:18:14Z

2

Hi try the below code:-

<input type="text" id="id01" value="write here" />

<a href="#" onclick="myFunct('this text should go on the box')" /> click me </a> </br>
<a href="#" onclick="myFunct('or this one ')" /> No! Click me </a> </br>

<script>
    function myFunct(the_text) {
        document.getElementById('id01').value = the_text;
    return;
    }
</script>

answered Oct 25, 2017 at 9:18

Anup pandey

4372 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Francisco Arandano Over a year ago

Thank you, this code is similar to the ones proposed above and it does work, thank you

Daniel Diekmeier · Accepted Answer · 2017-10-25 09:17:24Z

0

You had some mistakes in your HTML code. It should be like onclick="sth", instead of the brackets. I think I got the example working, check out the code below:

<input type="text" id="id01" value="write here" />
<div id="id02"></div>

<a href="#" onclick="myFunct('this text should go on the box')" /> click me </a> </br>
<a href="#" onclick="myFunct('or this one')" /> No! Click me </a> </br>

<script>
    function myFunct(the_text) {
        document.getElementById('id01').value = the_text;
        document.getElementById('id02').innerHTML = the_text;
    }
</script>

answered Oct 25, 2017 at 9:17

Daniel Diekmeier

3,46420 silver badges37 bronze badges

1 Comment

Francisco Arandano Over a year ago

Thank you very much

David · Accepted Answer · 2017-10-25 09:23:48Z

You're mixing syntax between JavaScript and HTML. The onclick you're trying to use is an HTML attribute like any other, and would take the form:

onclick=""

So your element might look something like this:

<a href="#" onclick="myFunct('or this one ')" />

Note also the use of different quotes for the string. JavaScript can use single-quotes or double-quotes, so by using single-quotes here it doesn't interfere with parsing the double-quoted HTML attribute.

Alternatively, you might remove the JavaScript from the HTML entirely. Give your elements id values:

<a href="#" id="someID" /> click me </a> </br>

And use those to identify them for adding click handlers:

document.getElementById('someID').onclick = function()
{
    myFunct('or this one ');
};

The same approach can be used with jQuery (since you have that tag in the question). Ideally you'd want to move in the general direction of separating markup from code, whether you use jQuery or not.

leesinlor · Accepted Answer · 2017-10-25 09:31:35Z

0

There is syntax error.

<a href="#" onclick='myFunct("this text should go on the box")' /> click me </a> </br>
<a href="#" onclick='myFunct("or this one ")' /> No! Click me </a>

answered Oct 25, 2017 at 9:31

leesinlor

13 bronze badges

Comments

Marvin Lacuna · Accepted Answer · 2017-10-25 09:40:07Z

Don't get confused. The onclick must be an HTML syntax onclick=and used like this

onclick="myFunct('text')"

Try this:

function myFunct(the_text) {
			alert(the_text);
        document.getElementById('id01').value = the_text;
    return;
    }

<input type="text" id="id01" value="write here" />

<a href="#" onclick="myFunct('this text should go on the box');" /> click me </a> 
</br>
<a href="#" onclick="myFunct('or this one');" /> No! Click me </a> </br>

Another option is to use JQuery "Who's your real girlfriend?" as an example.

$("#me").click(function() {
  $("#target").text( "Sorry, he picked me." );
});

$("#otherme").click(function() {
  $("#target").text( "I know you'll choose me." );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="target">
  Who's your real girlfriend?
</div>

</br>
<a href="#" id="me">Choose Me</a>
</br>
<a href="#" id="otherme">Please choose Me</a>

Milan Chheda · Accepted Answer · 2017-10-25 09:44:50Z

0

function myFunct(the_text) {
  $("#id01").val(the_text);
  return true;
  return;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="id01" value="write here" />

<a href="#" onclick="myFunct('this text should go on the box');" ); /> click me </a>
</br>
<a href="#" onclick="myFunct('or this one ');" ); /> No! Click me </a>
</br>

You had some mistakes in your HTML code. It should be like onclick="some function", instead of the brackets. I think I got the example working, check out the code below: you jquery instead of javascript you will get the data

edited Oct 25, 2017 at 9:44

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

answered Oct 25, 2017 at 9:18

Dsv Infosolutions

12 bronze badges

Collectives™ on Stack Overflow

Use JavaScript to write string in textbox

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related