Adding dynamically text in JavaScript

Question

Javascript:

function changeIt()
{
    var i = 1;
    var j = 1;
    my_div.innerHTML = "<br><br><input type='text' name='mytext' + i  value='pleaseEnter malzeme' >   <input type='text' name='mytet2'+j value='please quantity'> "
}

HTML:

<input type="button" value="Add Ingredients" onClick="changeIt()" />
<div id="my_div"></div>

I have these code piece to add textbox dynamically in my HTML file. Problem is that I cannot reach text.

System.out.print(request.getParameter("mytext1")); //doesnt work to reach mytext1 value.

How can I solve this problem? Thanks in advance.

You don't seem to have a function `request.getParameter` nor do you have `out.print`. Have you tried looking in your console? (hit F12) you'll see a bunch of errors in there. — Mike Cluck, Apr 22 '16 at 22:12
Is this a Java question or a JavaScript question? Either way, you aren't showing us enough code. — 4castle, Apr 22 '16 at 22:15
@MikeC That is Java code. They are showing the back-end, which has no F12. — 4castle, Apr 22 '16 at 22:19
out.print(request.getParameter("mytext1")) returns null value, but when i change to out.print(request.getParameter("mytext")) returns not null value. I think problem is on concatenation . — HelloWorld, Apr 22 '16 at 22:27

score 1 · Answer 1 · answered Apr 22 '16 at 22:14

1

Try changing your innerHTML to this:

my_div.innerHTML ="<br><br><input type='text' name='mytext" + i + "' value='pleaseEnter malzeme' >   <input type='text' name='mytet2" +j + "' value='please quantity'> "

answered Apr 22 '16 at 22:14

zack.lore

527
5
10

score 1 · Accepted Answer · answered Apr 22 '16 at 22:26

Okay, first to get a reference of an element in JavaScript you need to call document.getElementById("my_div"). There is no such thing as automatic global scope population with IDs in JS.

Then your HTML string contains variables which are written as part of the string. Concatenation in JS works with the plus sign (+). So your string should be:

"<br><br><input type='text' name='mytext" + i + "' value='pleaseEnter malzeme'><input type='text' name='mytet2" + j + "' value='please quantity'>"

Everything assembled together:

<script type="text/javascript">
function changeIt() {
    var i = 1;
    var j = 1;
    document.getElementById("my_div").innerHTML = "<br><br><input type='text' name='mytext" + i + "' value='pleaseEnter malzeme'><input type='text' name='mytet2" + j + "' value='please quantity'>"
}
</script>

<input type="button"  value="Add Ingredients" onClick="changeIt()">
<div id="my_div"></div>

Regarding the print I have no idea what you're actually trying there...

really thanks for this answer. Nearly 5-6 hours, i tried to solve this problem. — HelloWorld, Apr 22 '16 at 22:28
**There is no such thing as automatic global scope population with IDs in JS.** See http://stackoverflow.com/questions/6381425/is-there-a-spec-that-the-id-of-elements-should-be-made-global-variable — Barmar, Apr 22 '16 at 22:52
Interesting. Thanks for the info. However I think JS starters are better off not knowing something like this exists. ;-) — Hubert Grzeskowiak, Apr 22 '16 at 22:57

Adding dynamically text in JavaScript

2 Answers2