how to update records into mysql database using jquery?

Question

I have a userdetails table in mysql database into which i have inserted records onsubmit using jquery.(user_id , name , age , phone , email , text) Now the same records can be viewed in a list using jquery in a html page , when i click on user_id ("1" which i have made as a href) , so when i click on 1 , the details which 1 contains which will be viewed in my user_details.html page like

http://localhost:8082/JqueryForm/html/user_details.html?user_id=1

Name : abc ----------> textarea in my html page

Phone : 1000000

email : abc@gmail.com

age : 20

text : abcdefghij

Now when my user_details.html opens with the details of a particular user only , i can edit the values as it is a textarea and update the values in my database for the same user_id , with the help of a update button

I have written a update query

public void update_UserDetails(int user_id ,String user_name, String age, 
        String mobile_no, String email_id,
        String ck_text) {
    try {
        prep = (PreparedStatement) connection
                .prepareStatement("update user_details set 
        user_name=?,user_age=?,mobile_no=?,email_id=?,ck_text=? where 
        user_id=?");
        prep.setInt(1, user_id);
        prep.setString(2, user_name);
        prep.setString(3, age);
        prep.setString(4, mobile_no);
        prep.setString(5, email_id);
        prep.setString(6, ck_text);
        prep.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    }
}

and called the method in my user_details.jsp page

<%
    Sql_Server server = new Sql_Server();
    String name = request.getParameter("name");
    String age = request.getParameter("age");
    String email = request.getParameter("email");
    String phone = request.getParameter("phone");
    String ck_text = request.getParameter("ck_text");
    String user_id = request.getParameter("user_id");
    int userid = Integer.parseInt(user_id);
    server.update_UserDetails(userid,name, age, phone, email,ck_text);
%>

Now when i am calling the jsp page in my jquery , the values are not getting updated , can anyone help me to understand why isnt the values getting updated ?

$(document).ready(function(){
    $("#update").click(function(e) {
        var name = $("#nametext").val();
        var age = $("#agetext").val();
        var email = $("#emailtext").val();
        var phone = $("#phonetext").val();
        var ck_text = $("#textarea").val();
        var dataString = '&name=' + name + '&age=' + age + '&email=' + email + '&phone=' + phone + '&ck_text=' + ck_text;

            $.ajax({
                type : "POST",
                url : 
             "http://localhost:8082/JqueryForm/html/jsp/update_userdetails.jsp",
                data : dataString,
                cache : false,
                success : function(result) {
                         alert("Records Updated Successfully");
                         }
            });
        return false;
    });
});

What does the console say? Any errors? Is the page found at all? If yes, what does it return? — Jeremy Thille, Mar 31 '15 at 11:30

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

i noticed that in your jquery, in your ajax call, the var dataString does not contain the user_id you need to execute your update. Also in your prepareStatement the order of your vars are not respected.

.prepareStatement("update user_details set user_name=?,user_age=?,mobile_no=?,email_id=?,ck_text=? where user_id=?");

prep.setInt(1, user_id); // should be in the last position

prep.setString(2, user_name);

prep.setString(3, age);

prep.setString(4, mobile_no);

prep.setString(5, email_id);

prep.setString(6, ck_text);

prep.executeUpdate();

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 31 '15 at 13:15

DDA

21
1

so sir , i need to have a user_id var inside my datastring right ? , can you tell me how to add it , because i dont have any textarea for user_id which i can call through id , the user_id is appended with my url http://localhost:8082/JqueryForm/html/user_details.html?user_id=1 – narahari_arjun Apr 01 '15 at 05:43

score 0 · Answer 2 · answered Mar 31 '15 at 12:57

Your problem probably has to do with the order of the values, you are setting the name to user_id and the id to ck_text:

prep = (PreparedStatement) connection
        .prepareStatement("update user_details set 
user_name=?,user_age=?,mobile_no=?,email_id=?,ck_text=? where 
user_id=?");
prep.setInt(1, user_id);
prep.setString(2, user_name);
prep.setString(3, age);
prep.setString(4, mobile_no);
prep.setString(5, email_id);
prep.setString(6, ck_text);

score 0 · Answer 3 · answered Mar 31 '15 at 13:09

0

you are assiging wrong values do as follows

    prep.setString(1, user_name);
    prep.setString(2, age);
    prep.setString(3, mobile_no);
    prep.setString(4, email_id);
    prep.setString(5, ck_text);
    prep.setInt(6, user_id);

answered Mar 31 '15 at 13:09

SpringLearner

13,738
20
78
116

score 0 · Answer 4 · edited May 23 '17 at 12:06

@DDA described the correct answer. Just complementing.

To get the query string from the url http://localhost:8082/JqueryForm/html/user_details.html?user_id=1 you can use the following code (see this post for more detailed discussion):

$(document).ready(function(){

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    $("#update").click(function(e) {
        var name = $("#nametext").val();
        var age = $("#agetext").val();
        var email = $("#emailtext").val();
        var phone = $("#phonetext").val();
        var ck_text = $("#textarea").val();

        var user_id = getParameterByName('user_id');

        var dataString = 'user_id=' + user_id + '&name=' + name + '&age=' + age + '&email=' + email + '&phone=' + phone + '&ck_text=' + ck_text;

        $.ajax({
            type : "POST",
            url : 
         "http://localhost:8082/JqueryForm/html/jsp/update_userdetails.jsp",
            data : dataString,
            cache : false,
            success : function(result) {
                     alert("Records Updated Successfully");
                     }
        });
        return false;
    });
});

And the update statement have to be changed to:

public void update_UserDetails(int user_id ,String user_name, String age, 
                               String mobile_no, String email_id,
                               String ck_text) {
    try {
        prep = (PreparedStatement) connection
                      .prepareStatement("update user_details set user_name=?,user_age=?,mobile_no=?,email_id=?,ck_text=? where user_id=?");

        prep.setString(1, user_name);
        prep.setString(2, age);
        prep.setString(3, mobile_no);
        prep.setString(4, email_id);
        prep.setString(5, ck_text);
        prep.setInt(6, user_id);

        prep.executeUpdate();
    } catch (SQLException e) {
        e.printStackTrace();
    }
}

how to update records into mysql database using jquery?

4 Answers4