Getting elements by id

Thanks for the hint Marc i've solved it. thank you once again i got a problem, i want to use this ID in my js as document.getElementbyId(), here what should i take in the braces.

Thanks

You can make the id attribute the same as the name attribute.

What have you tried so far?

Marc Peabody wrote:You can make the id attribute the same as the name attribute.

But this does not always work because names are not unique. id values must be.

In the future, please start new topics for new questions. I've split this one off form the original topic and moved it to a more appropriate forum.

You also need to spell getElementById() correctly.

Thank you bear for moving it to a new topic.
Marc i tried document.getElementById("temp")( this is wrong as i took id in input type as <input type="button" value="Update Answer" name="<%=temp2%>" id="temp2<%=i%>"> here i is taken from iteration). please suggest how do i approach with it.

Thanks

id="temp2<%=i%>

What does this end up as at the browser? Do a View Source to see. Posting the JSP markup is not useful for dealing with client-side issues.

Whatever the actual id value is, is what you need to use.

P.S. Why are you still using scriptlets in 2012?

That's technology that has been obsolete for over 10 years! See this JspFaq entry.

hi bear,
sorry for delay in my reply in the browser it shows id="temp12"(here i is used for a loop) and the source screen is as below.
i want this id to be used in java script, but i'm not knowing how to do it.

Thanks

Post the code, not a photo it.

You are acting like x is a DOM node, when it is a string.

Hi Eric,
below is the code.

<%@include file="DBCon.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
    <head><script type="text/javascript">
        
        function invoke(but)
            {
                if(but==5)
                {
                    document.abc.action="Users_2.jsp";
                }
                else if(but==6)
                {
                    document.abc.action="Up_Query_DB.jsp";
                }
                    document.abc.submit();
            }
           function UnBloc1()
            {
                i++;
                var y=document.getElementById("temp4").value;
                var x=document.getElementById("temp2").value;
                x.style.display="block";
                y.style.display="block";

}
        </script> </head>
<body>
    <table border="1px">
<%
try{
    int i=0;
    int temp=0, temp1=0,temp2=0, temp3=0, temp4=0;
    ps=con.prepareStatement("Select DBID,Query_Raised,TR from Scope1 where TR!='null' AND (Query_Answered is null OR Count1 is null)");
    rs=ps.executeQuery();
    out.println("<b>QueryRaised</b>");
       while(rs.next())
                   
        {
           temp=temp+1;
           temp1=temp1+1;
           temp2=temp2+1;
           temp3=temp3+1;
           temp4=temp4+1;        
           i++;
           %>
                      
                      <tr><form name="abc" method="post" action="Up_Query_DB.jsp">
                      <td><input type="text" value="<%=i%>" name="id1" id="id1"></td>
                      <td><center><input type="text" value="<%=rs.getString("DBID")%>" readonly="readonly" id="abc<%=i%>" name="abc<%=i%>" size="100"></center></td>
                      <td><input type="Submit" value="Resume" name="temp1<%=i%>" id="temp1<%=i%>"></td>
                      <td><input type="button" value="Update Answer"  name="temp2<%=i%>" id="temp2<%=i%>" onClick="UnBloc1()"></td>
                      <td><input type="text" name="temp3<%=i%>" id="temp3<%=i%>" style="border:hidden" style="display: none"/></td> 
                      <td><input type="Submit" value="Submit Answer" name="temp4<%=i%>" id="temp4<%=i%>" style="display: none" onClick="invoke(6)"/>
                      </td>
                      </form></tr>
    
        <% }
rs.close();
con.close();
}
catch(Exception e)
               {
    
    out.println(e);
    
}
%>  
        </table></body></html>

Rakesh Keerthi wrote:Hi Eric,
below is the code.

And my answer above is still the same.

Hi Eric,

i did not get you. i'm not understanding what you are saying. DOM and String. If you dont mind, could you please let me know it briefly, i'll solve it myself.

Thanks

In other words, if you are trying to grab the element, why are you using .value?

Ok thankyou Bear and Eric for the answer, but how do i get the value of the following input in document.getElementById();

what should i use for getting document.getElementById("temp2<%=i%>"); .
It is not accepted in js.

How do i get it?

what should i use for getting document.getElementById("temp2<%=i%>"); .

Again, what does that turn into on the browser? The JSP source is uninteresting and irrelevant.

It is not accepted in js.

Please read ItDoesntWorkIsUseless

How do i get it?

If the id passed to the getElementById is valid, it will work.

Hi Bear and Eric,

I'm unable to get what should be sent here. please give me a hint i'll solve it. i don't need the solution.

Thanks

i tried to move javascript to the body part and the result source code is as below.

<!DOCTYPE html>
<html>
    <head>
       
    </head>
    <body>
     
 
                  <tr><form name="abc" method="post" action="">
                  <td><input type="text" value="0" name="id1" id="id1"></td>
                  <td><input type="text" value="a" readonly="readonly" id="abc" name="abc"></td>
                  <td><input type="Submit" value="Resume" name="temp1" id="temp1" onclick="invoke(5)"></td>
                  <td><input type="button" value="Update Answer" id="temp20" name="temp20" onclick="UnBloc1(0)"></td>
                  <td><input type="text" name="temp30" id="temp30" style="display: none"></td>           
                  <td><input type="Submit" name="temp40" value="Submit Answer" id="temp40" style="display: none"></td>
                  <script type="text/javascript">
        
        function invoke(but)
            {
                
                if(but==5)
                {
                    document.abc.action="Users_2.jsp";
                }
                else if(but==6)
                {
                    document.abc.action="Up_Query_DB.jsp";
                }
                    document.abc.submit();
            }
            function UnBloc1(0)
            {
                                 
                
                document.getElementById("temp30").style.display='block';
                document.getElementById("temp30").value='abc0';
                document.getElementById("temp40").style.display='block';
                
 
            }
        </script>
                  </form></tr>
                  
 
    
 
                  <tr><form name="abc" method="post" action="">
                  <td><input type="text" value="1" name="id1" id="id1"></td>
                  <td><input type="text" value="a" readonly="readonly" id="abc" name="abc"></td>
                  <td><input type="Submit" value="Resume" name="temp1" id="temp1" onclick="invoke(5)"></td>
                  <td><input type="button" value="Update Answer" id="temp21" name="temp21" onclick="UnBloc1(1)"></td>
                  <td><input type="text" name="temp31" id="temp31" style="display: none"></td>           
                  <td><input type="Submit" name="temp41" value="Submit Answer" id="temp41" style="display: none"></td>
                  <script type="text/javascript">
        
        function invoke(but)
            {
                
                if(but==5)
                {
                    document.abc.action="Users_2.jsp";
                }
                else if(but==6)
                {
                    document.abc.action="Up_Query_DB.jsp";
                }
                    document.abc.submit();
            }
            function UnBloc1(1)
            {
                                 
                
                document.getElementById("temp31").style.display='block';
                document.getElementById("temp31").value='abc1';
                document.getElementById("temp41").style.display='block';
                
 
            }
        </script>
                  </form></tr>
                  
 
    
 
                  <tr><form name="abc" method="post" action="">
                  <td><input type="text" value="2" name="id1" id="id1"></td>
                  <td><input type="text" value="a" readonly="readonly" id="abc" name="abc"></td>
                  <td><input type="Submit" value="Resume" name="temp1" id="temp1" onclick="invoke(5)"></td>
                  <td><input type="button" value="Update Answer" id="temp22" name="temp22" onclick="UnBloc1(2)"></td>
                  <td><input type="text" name="temp32" id="temp32" style="display: none"></td>           
                  <td><input type="Submit" name="temp42" value="Submit Answer" id="temp42" style="display: none"></td>
                  <script type="text/javascript">
        
        function invoke(but)
            {
                
                if(but==5)
                {
                    document.abc.action="Users_2.jsp";
                }
                else if(but==6)
                {
                    document.abc.action="Up_Query_DB.jsp";
                }
                    document.abc.submit();
            }
            function UnBloc1(2)
            {
                                 
                
                document.getElementById("temp32").style.display='block';
                document.getElementById("temp32").value='abc2';
                document.getElementById("temp42").style.display='block';
                
 
            }
        </script>
                  </form></tr>

here it is showing everything correctly corresponding to the button. but the button action is not happening.

Your html markup is invalid

Hi Eric,

i have removed <!DOCTYPE html>, but still the same problem. button action not getting triggered.

Rakesh Keerthi wrote:
i have removed <!DOCTYPE html>

What does that help? if your HTML is invalid, removing the DOCTYPE directive isn't going to make it any more valid.

Validate your HTML and fix the problems with it.

Search for "HTML Validator" for online validation tools.

Hi Bear,
i have validated my code using a html validator and changed the below highlighted code. It is giving 0 errors and 0 warnings . but the problem is not solved.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
       
    </head>
    <body>
     <%
try{
int i;
int temp=0, temp1=0,temp2=0, temp3=0, temp4=0;
for(i=0;i<14;i++)

{
            
       
       
       %>
[color=red]<form name="abc" method="post" action=""><table>[/color]
                  <tr>[strike]<form name="abc" method="post" action="">[/strike]
                  <td><input type="text" value="<%=i%>" name="id1" id="id1"></td>
                  <td><input type="text" value="a" readonly="readonly" id="abc" name="abc"></td>
                  <td><input type="Submit" value="Resume" name="temp1" id="temp1" onclick="invoke(5)"></td>
                  <td><input type="button" value="Update Answer" id="temp2<%=i%>" name="temp2<%=i%>" onClick="UnBloc1(<%=i%>)"></td>
                  <td><input type="text" name="temp3<%=i%>" id="temp3<%=i%>" style="display: none"></td>           
                  <td><input type="Submit" name="temp4<%=i%>" value="Submit Answer" id="temp4<%=i%>" style="display: none"></td>
                  <script type="text/javascript">
        
        function invoke(but)
            {
                
                if(but==5)
                {
                    document.abc.action="Users_2.jsp";
                }
                else if(but==6)
                {
                    document.abc.action="Up_Query_DB.jsp";
                }
                    document.abc.submit();
            }
            function UnBloc1(<%=i%>)
            {
                
                              window.alert(<%=i%>);

}
        </script>
                  </tr>

<% }

}
catch(Exception e)
           {

out.println(e);

}
%>  
    </table> </form> </body>
</html>

JSP markup is irrelevant to client-side problems.

But Bear, when i view the source in the browser everything is showing fine and as expected. where am i going wrong?

It has nothing to do with the doc type. A form is not a child element of a table. It can not wrap tr elements.

Eric

Eric, But , i think table can be a child of form. correct me if I'm wrong. and i added <table> inside a <form>, but still i don't see any difference.

Look at your code, you are writing tons of functions with the same exact name. Does Java or any other langauge let you do that? No. The funcitons override each other. You really need to figure out a new way of doing this. What you have done is bad.

Eric