I am trying to pass values from Database to js. But i am getting an error of stepup?

Question

I have got my lat and lng values in database and trying to get them to my javascript on click of a button with id("track"). but the following code throws an error of "stepUp" called on an object that does not implement interface HTMLInputElement. how to solve this

Thanks in advance.

Create.js

document.getElementById("track").onclick=function tracking(){
    console.log("Tracking");
    var tname=document.getElementsByName("frname");
    var params ={
            trname:tname,
            bt:"I"  
    }
    $.get("SC",$.param(params),function(responsetext){
        var a=responsetext;
        console.log(a);
    });
}

ServerConnect.java

if(bt1.equals("I")){
            String tname=request.getParameter("tname");
            String uname=(String)session.getAttribute("uname");
            try {
                cords =requestingclass.getupdatedlocation(tname,uname);
                String lat=cords.get(1);
                String lng=cords.get(2);
                response.setContentType("text/plain");
                response.setCharacterEncoding("UTF-8");
                response.getWriter().write(lat);
                response.getWriter().write(lng);
            } catch (ClassNotFoundException | SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }

requestingclass.java

public static ArrayList<String> getupdatedlocation(String tname, String uname) throws ClassNotFoundException, SQLException {
        Connection con = ConnectionUtility.connect();
        PreparedStatement ps =con.prepareStatement("select lat,lng from requesttable where requester=? and requested=?");
        ps.setString(1, uname);
        ps.setString(2, tname);
        ArrayList<String> cords=null;
        ResultSet rs= ps.executeQuery();
        while(rs.next()){
             cords=new ArrayList<String>();
             cords.add(rs.getString(1));
             cords.add(rs.getString(2));
        }
        return cords;


    }

Answer 1

It's this line causing the problem:

var tname = document.getElementsByName("frname");

tname holds an Element object. You then attempt to send it in the data of the request, so jQuery tries to serialise it, causing the problem.

I presume from the context you instead want to get the value of the element, so use this instead:

var tname = document.getElementsByName("frname").value;