CODEWITHSUNDEEP
javascriptjavajqueryhtmljsp
JasSy
JasSy

Reputation: 401

Unable to update value in a form and send to next jsp page

I have a form and trying to change a value in a hidden input element prior to submitting the data to another JSP file(db.jsp) for processing. Different value is stored depending on which button is clicked. But the change doesn't occur and the value is always sent over as the default value "abc" to the db.jsp file.

Form Page (index.jsp) and Javascript to change value depending on

<form method="post" action="db.jsp">
    <div class="form-group col-sm-3 col-lg-3">
        <button id="update" type="submit" >Update</button>
        <button id="delete" type="submit" >Delete</button>
        <input id="secret2" name="secret2" value="abc" type="hidden">
    </div>
</form>

<script>
    $("#delete").click(function(){
        //tried calling an alert here and no alert shows up. 
        document.getElementById("#secret2").value = "delete";
    });
    $("#update").click(function(){
        //tried calling an alert here and no alert shows up. 
        document.getElementById("#secret2").value = "update";
    });
</script>

db.jsp

<%
    String buttonId = request.getParameter("secret2");
    System.out.println(buttonId); //prints as "abc"
%>

More Details on first Page Body (index.jsp): 

<script>
        $(document).ready(function() {
            $("#delete").click(function(){
                document.getElementById("secret2").value = "delete";
            });
            $("#update").click(function(){
                document.getElementById("secret2").value = "update";
            });
        });
</script>
<body>
    <h1 class="k-h1-view-user">Users</h1>

    <%
        String dbURL = "jdbc:mysql://1.1.1.1:3306/db_name";
        String dbUser = "";
        String dbPass = "";
        Connection conn;

        try{
            DriverManager.registerDriver(new com.mysql.jdbc.Driver());
            conn = DriverManager.getConnection(dbURL, dbUser, dbPass);

            Statement statement = conn.createStatement();
            ResultSet resultset =
                    statement.executeQuery("select id, username, password, role from user");

            while(resultset.next()) {
    %>

    <form class="k-view-user-form k-form-margin-top" method="post" action="delete_user.jsp">
        <div class="form-group col-sm-3 col-lg-3">
            <input value="<%= resultset.getString(2) %>" type="text" class="form-control" id="usernameField" name="usernameField" placeholder="Username" style="margin: 0 auto">
        </div>
        <div class="form-group col-sm-3 col-lg-3">
            <input value="<%= resultset.getString(3) %>" type="password" class="form-control" id="passwordField" name="passwordField" placeholder="Password" style="margin: 0 auto">
        </div>

        <div class="form-group col-sm-3 col-lg-3">
            <select class="form-control" id="role" name="role" style="margin: 0 auto">
                <%
                    if(resultset.getString(4).equals("admin")){
                %>
                    <option value="admin" selected>Admin</option>
                    <option value="standard">Standard</option>
                <%
                    }
                    else{
                %>
                    <option value="admin">Admin</option>
                    <option value="standard" selected>Standard</option>
                <%
                    }
                %>
            </select>
        </div>

        <div class="form-group col-sm-3 col-lg-3">
            <button id="update" type="submit" class="btn k-login-btn" style="float: left">Update</button>
            <button id="delete" type="submit" class="btn k-del-btn" style="float: right">Delete</button>
            <input name="secret" value="<%= resultset.getString(1) %>"  type="hidden">
            <input id="secret2" name="secret2" type="hidden">
        </div>
    </form>

    <%}

    }catch (Exception e){
        e.printStackTrace();
    }

    %>
</body>

enter image description here

Upvotes: 0

Views: 2316

Answers (1)

spozun
spozun

Reputation: 882

when using getElementById, don't use a hashtag selector, just use the straight up id. Also don't do your bindings until the HTML is loaded, use $(document).ready()...

<script>
    $(document).ready(function() {
        $("#delete").click(function(){
            document.getElementById("secret2").value = "delete";
        });
        $("#update").click(function(){
            document.getElementById("secret2").value = "update";
        });
    }); 
</script>

Upvotes: 2

Related Questions