error with document.getElementById()

Question

I am trying to write a jdo query in which I have to get a set of values based on the category that the user selects on the jsp...my query looks like this

Query query2 = pm.newQuery("select from " + ProductDB.class.getName()+ "where pCategory = " document.getElementById("cname").text);

Now on my jsp page, I have a dynamic drop-down box and in the tag I have given the id tag as "cname". So when I execute the above query I am hoping it will get the category that the user selects.

However I am getting this error:

Syntax error on token "document", delete this token

My select tag looks like this :

<select name = "cname" id="cname">
.
.
.
</select>

What am i missing here?

UPDATE :

I am putting my entire code for the jsp file below :

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="java.util.*"%>
<%@ page import="javax.jdo.Query"%>
<%@ page import="javax.jdo.PersistenceManager"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.datastore.Key"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="java.net.*"%>
<%@ page import="javax.servlet.http.HttpServletRequest"%>
<%@ page import="com.nerdy.needs.*"%>
<html>
<head>
<title>Product Inventory</title>
<META HTTP-EQUIV="Refresh" CONTENT="450">
<link rel="stylesheet" href="login.css" type="text/css" />
</head>
<h1 align="center">Product Inventory</h1>
<body>
<form>
<table>
    <tr>
        <td>View</td>
        <td><select name="cname" id="cname">
            <option value="all">All</option>
            <%
                PersistenceManager pm = PMF.get().getPersistenceManager();
                Query query = pm.newQuery("select cname from "
                        + CategoryDB.class.getName());
                List<String> categories = new ArrayList<String>();
                categories = (List<String>) query.execute();
                String[] c = categories.toArray(new String[categories.size()]);
                for (int i = 0; i < c.length; i++) {
                    String s = c[i];
            %>
            <option value="<%=s%>"><%=s%></option>
            <%
                }
            %>
        </select></td>
        <td>Products</td>
    </tr>
</table>
</form>
<%
    if (document.getElementById("cname").value == "all") {
        PersistenceManager pm1 = PMF.get().getPersistenceManager();
        Query query1 = pm1.newQuery("select * from "
                + ProductDB.class.getName());
        List<ProductDB> prods1 = (List<ProductDB>) query1.execute();
        if (prods1.isEmpty()) {
%>
<table class="items">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <tr class="lightBlue">
        <td class="actions" colspan=100%>
        <p>No items were found.</p>
        </td>
    </tr>
</table>
<%
    } else {
%>
<table class="topics">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <%
        for (ProductDB p : prods1) {
    %>
    <tr>
        <td>
        <p><b> <img width="100" height="100"
            src="http://localhost:8888/serve?id= <%=p.getProductImage()%>">
        </b></p>
        </td>
        <td>
        <p><b><%=p.getProductCategory()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductName()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductPrice()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductDescription()%></b></p>
        </td>
    </tr>
    <%
        }
    %>
</table>
<%
    pm1.close();
        }
    } else {
        PersistenceManager pm2 = PMF.get().getPersistenceManager();
        Query query2 = pm.newQuery("select * from "
                + ProductDB.class.getName() + "where pCategory = "
                + document.getElementById("cname").value);
        List<ProductDB> prods2 = (List<ProductDB>) query2.execute();
        if (prods2.isEmpty()) {
%>
<table class="items">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <tr class="lightBlue">
        <td class="actions" colspan=100%>
        <p>No items were found.</p>
        </td>
    </tr>
</table>
<%
    } else {
%>
<table class="topics">
    <tr>
        <th class="main">Image</th>
        <th class="main">Category</th>
        <th class="main">Name</th>
        <th class="main">Price</th>
        <th class="main">Description</th>
    </tr>
    <%
        for (ProductDB p : prods2) {
    %>
    <tr>
        <td>
        <p><b> <img width="100" height="100"
            src="http://localhost:8888/serve?id= %=p.getProductImage()%>">
        </b></p>
        </td>
        <td>
        <p><b><%=p.getProductCategory()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductName()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductPrice()%></b></p>
        </td>
        <td>
        <p><b><%=p.getProductDescription()%></b></p>
        </td>
    </tr>
    <%
        }
    %>
</table>
<%
    pm2.close();
        }
    }
%>
</body>
</html>

I am getting "document cannot be resolved" errors in two places - one at the if statement

if(document.getElementById("cname").value=="all")

and the other at the query statement

Query query2 = pm.newQuery("select * from " + ProductDB.class.getName()+ "where pCategory = " + document.getElementById("cname").value);

Can anyone help me to figure out what is wrong?

lol..i had put the jdo tag initially but DataNucleus removed the tag! — Shanky, Feb 16 '12 at 08:40

score 1 · Accepted Answer · edited May 23 '17 at 12:27

Your concrete problem is that you're mixing Java/JSP with JavaScript. You seem to expect that they run in sync and you seem to expect that JavaScript's document object variable is also present in JSP scriptlet code.

This is wrong. Java/JSP is a HTML code generator. It runs in webserver upon a HTTP request and generates HTML/JS code and sends it back to webbrowser as HTTP response. All the webbrowser retrieves is plain HTML/JS code. Rightclick the page in webbrowser and do View Source to see it yourself.

Your concrete functional requirement seems to be that you need to grab the the submitted value of

<select name="cname">

in the Java/JSP side.

You need to get it as a request parameter by HttpServletRequest#getParameter(). So, replace

<%
    if (document.getElementById("cname").value == "all") {
        // ...
    }
%>

by

<%
    if ("all".equals(request.getParameter("cname"))) {
        // ...
    }
%>

That said, writing Java code in JSP files is a poor practice. Work on that as well. Note that this problem is unrelated to JDO.

wow! thanks for the detailed answer...i shall try this method and get back if i have probs. appreciate the help — Shanky, Feb 18 '12 at 06:27

score 0 · Answer 2 · answered Feb 16 '12 at 05:14

0

You forgot the plus mark before the document.getElementById.

The correct code would be

Query query2 = pm.newQuery("select from " + ProductDB.class.getName() + "where pCategory = " + document.getElementById("cname").text);

Also, although that will fix the syntax error, the code still won't work. According to W3C DOM specification, the <select/> element doesn't have the text attribute; you should use the value, or selectedIndex in conjunction with options instead.

answered Feb 16 '12 at 05:14

penartur

9,792
5
39
50

hey ! i tried your method too..as in i put the .value bit the same error persists..any chance something else might be creating this prob ? i tried it with .value and .selectedIndex but no go – Shanky Feb 16 '12 at 06:42
Did you fix the syntax error (the absence of a `+` sign)? What is the exact code you're trying to run now, and what is the exact error message you're receiving? – penartur Feb 16 '12 at 06:54
yes i fixed the absence of + sign.. thanks for that! my error message now says Multiple annotations found at this line: - Syntax error on token "document", delete this token - document cannot be resolved there are two places where i am using the document.getElementById() method...in that order i am getting these error messages.. do you want me to put the code ? – Shanky Feb 16 '12 at 07:54
<% if(document.getElementById("cname").value=="all") { PersistenceManager pm1 = PMF.get().getPersistenceManager(); Query query1 = pm1.newQuery("select * from " + ProductDB.class.getName()); List prods1 = (List) query1.execute(); this is the place where the first error is showing.. cannot be resolved... – Shanky Feb 16 '12 at 08:16
Query query2 = pm.newQuery("select * from " + ProductDB.class.getName()+ "where pCategory = " + document.getElementById("cname").value); this is where the second error is showing..delete this token... – Shanky Feb 16 '12 at 08:17
1

@Shanky: the problem is opening and closing tags **<%** and **%>** – Siva Charan Feb 16 '12 at 08:23
@Shanky: jsp tags should be declared between tags **<%** and **%>** and other html tags should be outside. – Siva Charan Feb 16 '12 at 08:24

Siva Charan · Answer 3 · 2012-02-16T14:53:12.347

0

Try this way:-

var i = document.getElementById("cname").selectedIndex;

document.getElementById("cname").options[i].text;

OR

document.getElementById("cname").value

UPDATE:

Column names are missing too. It should be either * or specific column names.

Query query2 = pm.newQuery("select * from " + ProductDB.class.getName()+ "where pCategory = " + document.getElementById("cname").value);

As per your error update

your code should be as follows:-

if(document.getElementById("cname").value=="all") 
{ 
 <%
 PersistenceManager pm1 = PMF.get().getPersistenceManager(); 
 Query query1 = pm1.newQuery("select * from " + ProductDB.class.getName()); 
 List<ProductDB> prods1 = (List<ProductDB>) query1.execute(); 
%>
}

JSP tags should be declared between tags <% and %> and other html tags should be outside.

As per your Code:

The problem is document.getElementById("cname").value calling inside the JSP tags. That is wrong.

Here either you can pass cname value as query string and get value through the parameter OR Assign document.getElementById("cname").value value to JSP variable and process it.

edited Feb 16 '12 at 14:53

answered Feb 16 '12 at 05:17

Siva Charan

17,940
9
60
95

hi! it still doesnt seem to work :( tried the above methods u mentioned..but not working – Shanky Feb 16 '12 at 06:43
your query is seems not correct. It should be this way **"Query query2 = pm.newQuery("select * from " + ProductDB.class.getName()+ "where pCategory = " + document.getElementById("cname").value); "** – Siva Charan Feb 16 '12 at 06:50
umm..i dont think we need to put any * in the query coz i ran a similar query elsewhere in my program and it worked fine..i put the errors that i am getting in my comment on the previous answer..check it out..i am thinking there is some import that i need to mention ?? can that be it? – Shanky Feb 16 '12 at 08:08
yes!! there does seem to be probs with my jsp tags...well the error at the if statement is not there anymore..as for the second error in the query line..thats still there..i am new to this site and i dont know how to do that update u did earlier..i would like to put the entire code..i am sure theres some error with the tags.. – Shanky Feb 16 '12 at 08:31
@Shanky: At your question, you will see **edit** link. Click on the **edit** link, paste your code at the bottom of your question. If any formattings, we can help you. – Siva Charan Feb 16 '12 at 09:23
well this is nuts! after putting up the code here..i just tried validating my code in eclipse...the errors are gone! however when i run the jsp file..the same errors at the same lines as i mention appear! – Shanky Feb 16 '12 at 09:35

error with document.getElementById()

3 Answers3

UPDATE:

As per your error update

As per your Code: