Javascript not getting new value of text box

java

#1

hi,
in my servlet i have introduced a text box that takes the value dynamically from a variable.
this has no issues and the text box is being updated.

however the javascript right after this textbox sticks to the first value that has been assigned to the text box.

the code runs in a loop, thus each time the percentage value is being updated.

any thoughts?

out.println("<input type=\"text\" id=\"hid1\"  value=\""+percentage2+"\">");
out.println("<script type=\"text/javascript\">");
out.flush();
out.println("var e1=\"\";");
out.flush();
out.println("var e2=\"\";");
out.flush();
out.println("e1=document.getElementById(\"hid1\").value");
out.flush();
out.println("e2=e1+\"%\"");

#2

When generating HTML, we can preserve the double quotes on attributes by using single quotes to wrap the expression (or escape the printable characters).

out.println("<input type=\“text\” id=\“hid1\” value=\""+percentage2+"\">");

or,

out.println('<input type=“text” id=“hid1” value="'+percentage2+'">');

#3

I am not sure why my scriplet didnt show my escape characters. I have already have this set in my code.

The issue is not with the text box. The text box is successfully loading the updated percentage value.

The issue is with the js.

The e1 var is only sticking to the first value that the input textbox has.

Saying this, if percentage2 first value is 1 and in the second iteration the value is 2.
In the js it is always taking value 1


#4

When your post is formatted, the escapements are there. What we don’t see is the </script> tag.


#5

There is a /script but i didnt include it.
The function is being parsed correctly.
The problem is with the value as i mentioned.
Do you have any thoughts.


#6

In a separate script that is not in the loop, declare your variables, as well as cache your node object

'var e1, e2;'
'var el = document.getElementById("hid1");'

Then inside loop, remove the two lines that declare them. You can update the variables with,

'e1 = el.value;'
'e2 = e1 + "%";'

#7

The script not able to read the var e1, e2 and el using the above code.


#8

Did you generate the same as the rest (out.println())? Be sure it is in a script, and follows the HTML (just before </body>.


#9

Sure i did this and had the problem i mentioned


#10
'var el = document.getElementById("hid1");'

That’s ee-el. This would be more explicit…

'var h1d1 = document.getElementById("hid1");'

The HTML needs to be parsed before any script is run. If the script runs before the HTML is loaded, the input element will not be present.


#11

The html is surely parsed before.
As mentioned the text box is getting the updated percentage as a value.
But the js after this textbox is only considering the first value. It is not taking into consideration the updated percentage


#12

Is your page segment just a stack of static input controls? I’m still a little bit lost about what the overall page is doing.


#13

Can you please clarify by what you mean?
This is a servlet code executing java/js


#14

But what is the purpose and the general output supposed to look like? In other words, the raw, static HTML that is generated. What are the dynamics?


#15

I need to output a progress bar in an html format in a div
Therefore all what i need is to set the width of the progress bar dynamically.

I am calling the js to do this. But as mentioned it is keeping the initial value without being updated with the new percentage value.


#16

So somewhere along the line you are updating a CSS width property?

HTML

<div>
  <div id="progress" style="background-color: #006; width: 0; height: 100%">
  </div>
</div>
const progressBar = document.getElementById('progress')

The above would be cached at load time.

Inside your loop, the CSS would be updated with the style attribute…

progressBar.style.width = e2    // assumes something like '25%'

#17

Exactly…
But the js is failing to update the value


#18

Perhaps a mockup of the raw HTML will be helpful. Let us see the entire document (only the HTML and JS, not the Java). It may be that `progressBar’ is not updating in the loop?


#19

Actually there isnt much in the html.

I have included most of the code. Just trying to alert the value of the percentage for now before proceeding with the progress bar update to check the value.


#20

Literally, the raw HTML that you wish to generate is what we need to see. Java will not be running once the static document is generated. It’s that static document we need, in its entirety.