I can't get Tag content with a Script/Function

Question

i'm with a ridiculous problem (i think). I just can't get a tag content using a Script/Function/document.getElementById. The alert tha i'm using to see the content of variable (wM) is always blank. I looked a lot of examples in the Web and all of them is similar, sometimes just like my code. See below:

    <!DOCTYPE html>
    <html lang ="pt-br">        
       <head>
          <title> loginServlet2 </title>
          <meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
          <link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>    

          <script type="text/javascript">
             function oMsg()
             {
                var wM = document.getElementById("wMsgB").textContent;
//              var wM = document.querySelector("span").textContent;
                alert("wM = "+ wM);

                if (wM == "Teste OK!")
                {
//               document.getElementById("wMsgA").innerHTML = "Test is OK";
                 document.getElementById("wMsgA").textContent = "Test is OK";
                }
                else
                {
                   alert("Test is not OK. Before set new msg");
                   document.getElementById("wMsgA").textContent = "Test is not OK";
                }
             }
          </script> 
       </head>

       <body>
          <h2> Login Page2 </h2>

          <p>Please enter your username and password</p>

          <form method="GET" action="loginServlet2">
             <p id="test2"> Username <input type="text" name="userName" size="50"> </p>

         <p> Password <input type="password" name="password" size="20"> </p>

             <p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p> 
          </form>

       <h3> MsgB : <span id="wMsgB"<%=request.getAttribute("wMsg")%></span></h3> 


          <p> MsgA : <span id="wMsgA"> </span> </p>

       </body>
    </html>

Could anyone help me, please? Thanks.

Most HTML elements do not have a `value` property. You might want `textContent`. — SLaks, Feb 05 '18 at 20:51
Possible duplicate of [Get the pure text without HTML element by javascript?](https://stackoverflow.com/questions/6743912/get-the-pure-text-without-html-element-by-javascript) — Tibrogargan, Feb 05 '18 at 21:18

Scott Marcus · Accepted Answer · 2018-02-05T23:31:40.823

1

You are trying to get the value of a p element, but p elements don't have a value property. Only form fields do. Non-form fields that contain text between their opening and closing tags have .textContent and .innerHTML properties you can use to get/set their contents.

If you want to give the user a place to type in some data, you need to create some input form fields and then you have to wait until they've done that before attempting to get the values.

Next, you have smart quotes “” instead of straight quotes "" which can cause encoding problems. Make sure you write your code in an editor that doesn't apply any formatting to the code. There are plenty of great free web editors out there.

You also have a reference to a .css file using a full local path, which isn't going to work when you deploy this code later. You should be using relative paths to reference files that are part of your system.

Finally, you are using some old HTML syntax in your meta, link and script tags, so take note of the modern versions of those in the snippet below.

<head>
      <title>loginServlet2</title>
      <meta charset=UTF-8”>
      <link rel="stylesheet" href="c:/java/html/css/estilo.css"/>    

      <script>
         function oMsg() {
            var wM = document.getElementById("wMsg").textContent;
            alert("wM = " + wM);

            if (wM == "Test OK!") {
               document.getElementById("wMsgA").textContent = "Test is OK";
            } else {
               alert("Test is not OK. Before set new msg");
               document.getElementById("wMsgA").textContent = "Test is not OK";
            }
         }
      </script> 
   </head>

   <body>
      <h2> Login Page2 </h2>

      <p>Please enter your username and password</p>

      <form method="GET" action="loginServlet2">
         <p id="test2"> Username <input type="text" name="userName" size="50"> </p>

     <p> Password <input type="password" name="password" size="20"> </p>

         <p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p> 
      </form>

      <h2>MsgB : <span id="wMsg"><%=request.getAttribute("wMsg")%></span> </h2> 

      <p>MsgA : <span id="wMsgA"> </span> </p>

edited Feb 05 '18 at 23:31

answered Feb 05 '18 at 20:58

Scott Marcus

64,069
6
49
71

Scott, actually the code above was simplified only to show it here because i thought that would be possible to get the content (value) of a tag.. My original code is trying to get the answer of a Servlet. Take a look below: – Lucio Tepe Jr. Feb 05 '18 at 21:18
@LucioTepeJr. I've explained (and demonstrated in my answer) how to get the contents of a tag, which is not the same thing as getting the value of a form element. Your question is not marked with Java or references any servlet, but that wouldn't change anything in my answer. – Scott Marcus Feb 05 '18 at 21:21
Scott, sorry. i've tried to respond to you and also to D.Braun but i'v failed. – Lucio Tepe Jr. Feb 05 '18 at 21:31
@LucioTepeJr. Why don't you just edit your question and update it with the code you are using? However, I still don't see how any of that changes my answer. – Scott Marcus Feb 05 '18 at 21:34
Sorry Scott, i'm a newbie here. Now you've my question updated with the full code. You can see now that i wanna call a Servlet, get his answer and use it in the Function oMsg(). You can see that i get the Servlet answer and put it in a tag P (wMsgB). I thought that i could use that tag P to my Function oMsg(), but now i know that is impossible. So, how can i "transfer" de Servlet answer to my Function? Thanks. – Lucio Tepe Jr. Feb 05 '18 at 23:02
@LucioTepeJr. Again, my answer explains what you need. You **can** place the answer into a `p` (actually, you are placing it into a `span` and that's fine too), but you'll need to use `.textContent` to pull the data out, not `.value`. My answer shows this as soon as you run it. – Scott Marcus Feb 05 '18 at 23:07
@LucioTepeJr. Look at the last 2 lines in my script. – Scott Marcus Feb 05 '18 at 23:09
Scott, i've made the changes (see my question). Now i've a H2 instead P and i changed the line with document.querySelector. But, i don't lnow why, i'm still not able to get the Servlet answer into the Function. – Lucio Tepe Jr. Feb 05 '18 at 23:26
@LucioTepeJr. I've updated my answer to use your latest code, but you can't use `.querySelector("h2")` because that gets the first `h2` in the document and that's not the one you want. I have wrapped your `%request...` in a `span` with an `id` and changed the selector to look for that element. Also, your `alert` has a syntax error in it so look at my corrected one. – Scott Marcus Feb 05 '18 at 23:33
Scott, actually the Function received "MsgB : null". I've changed again, including a span (see my question) to leave the response from Servlet isolated from Header tag. And, now, the Function get null. – Lucio Tepe Jr. Feb 05 '18 at 23:34
@LucioTepeJr. I think you need to verify what the servlet is sending back. This really is one of the simplest things you can do and I'm showing you the correct way. You can see from my code snippet when you run it that it does get the PHP code sitting in the `span`. Of course, in your case that `span` would be populated with your servlet's data. – Scott Marcus Feb 05 '18 at 23:43
Scott, my Servlet is answering correctly ("Teste OK!"). I can see that because that answer is copied to wMsgA and is showed perfectly. Also, the first alert is showing null in the wM variable. Ans running the snipped i see in the alert "wM = <%=request.getAttribute("wMsg")%>". – Lucio Tepe Jr. Feb 05 '18 at 23:49
@LucioTepeJr. I'm sorry. I don't know what else to tell you. I'm showing you a working code solution. – Scott Marcus Feb 05 '18 at 23:50
I'm using Chome. Could be that? I'll try with FireFox and IE. – Lucio Tepe Jr. Feb 05 '18 at 23:53
@LucioTepeJr. No, that would not have any impact. This is standard, simple code that works in all browsers. Have you actually run my code snippet? Did you fix your `alert()` syntax? – Scott Marcus Feb 05 '18 at 23:55
Scott, yes i fixed the alert tag (i've updated my question too). I ran your snippet here, clicking on "Run code snippet" and the Alert showed "wM = <%=request.getAttribute("wMsg")%>. Also, i copied your code and saved an other loginServlet2.jsp and tested it with Chrome. This time the Alert showed "null". The Servlet is running ok because the tag
MsgB : showed "Teste OK!". Exactly what Servlet returned. Is possible that the problem is the fact that onclick call oMsg() inside Form? For example, when oMsg wascalled the Servlet wasn't called yet?
– Lucio Tepe Jr. Feb 06 '18 at 16:31
@LucioTepeJr. You must absolutely make sure that you are not attempting to get the results before the servlet has fully executed. That's why, in my code snippet, you see the "placeholder" code that expects the results from the servlet - - In my code snippet, the servlet doesn't run, so you just see the text at that point. You would get the same result. But, since you are getting `null`, something else is going on. – Scott Marcus Feb 06 '18 at 16:42
Scott, is there a way to "force" onclick to call the Function only after the Submit call the Servlet and that Servlet has fully executed? The only explanation to what is happen is that oMsg() is running before Servlet, right? By the way, when i ran your snippet copied with name loginServlet2 .jsp, that code called my Servlet. I can see that because the span of wMsgB has the msg "Teste OK!". "Teste OK!" is sended by Servlet. – Lucio Tepe Jr. Feb 06 '18 at 17:11
@LucioTepeJr. Even if the call was being made before the call to the servlet, you would still get the same results as my code snippet `<%=request.getAttribute("wMsg")%>` because that is the text of the `span` at that point in time. You say you are getting `null`, which means there is something else going on. – Scott Marcus Feb 06 '18 at 17:13
Scott, is there a way to see eventually a System.out.println that i could put in my Servlet? I'm trying to be sure that Servlet is running after oMsg(). As i've an Alert tag inside Function oMsg() i think that the Alert will pop up before my Servlet print a message. I'm running Tomcat 7.0. – Lucio Tepe Jr. Feb 06 '18 at 17:29
@LucioTepeJr. I don't know anything about servlets. Sorry. – Scott Marcus Feb 06 '18 at 17:30
Scott, no problem, i'll search for something about that and i'll post here to update you about my issue. After all, there is a mystery here. But, you helped me a lot. Thank you. – Lucio Tepe Jr. Feb 06 '18 at 17:39
Scott, only to update you. I've found where the Tomcat log is. The log name is "tomcat7-stdout.YYYY-MM-DD where YYYY-MM-DD is the date when you're running your application. There is a log per day. So, i've checked my process and i pretty sure that onClick is running before Servlet. My alerts is been showed without any display of my Servlet in the log. Only after oMsg() is finished that i see in the log the displays from Servlet. I'm now trying to figure out how can i submit de form (call my servlet) before the onClick has been executed. Anyway, you helped me a lot. Thank you very much. – Lucio Tepe Jr. Feb 06 '18 at 19:37

I can't get Tag content with a Script/Function

1 Answers1

MsgB : showed "Teste OK!". Exactly what Servlet returned. Is possible that the problem is the fact that onclick call oMsg() inside Form? For example, when oMsg wascalled the Servlet wasn't called yet?