I want to check if the username existed in my database against the input of the user after the button is clicked.
If the username existed, it will show "Username Not Avaliable" in the span and the username textbox will be highlighted in red. I tried to use ajax for the function and bootstrap "has-error" to achieve my highlight the textbox in red when the username is found in my database but I still don't understand how to piece everything together to achieve my desired output as I only begin to learn ajax and javascript recently.
Please help. thanks.
home.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>E-Commence J2EE</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/navbarscroll.js"></script> <script type="text/javascript" src="assets/js/bootstrap.js"></script> <script src="js/alert-modal.js"></script> <script>
function checkAvail() {
var xhttp;
var v=document.myForm.username.value;
var url="checkAvail.jsp?val="+v;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var existed = this.responseText;
if(existed === 'true') {
$('form').validate({
highlight: function(element) {
var id_attr = "#" + $(element).attr("username");
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
$(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
}
},
});
}
}
};
xhttp.open("POST",url, true);
xhttp.send();
}
</script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <form role="form" onsubmit="return validateForm()" name="myForm"
action="RegistrationCheck" method="POST"> <div class="form-group row"> <label for="regUsername " class="col-md-2">Username</label> <div class="col-md-10"> <input type="text" class="form-control" id="username"
name="username" onblur="checkAvail()" /> <span id="wes"></span> </div> <div style="text-align: center;"> <button a id="checkAvailBtn" href="javascript:;" type="submit"
class="btn btn-default">check Avalibility</button> </div> </div> </form> </body> </html>checkAvail.jsp
<%@ page import="java.sql.*"%> <%
String s = request.getParameter("val");
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager
.getConnection(
"jdbc:mysql://localhost:3306/ecommencedb?autoReconnect=true&useSSL=false",
"root", "1234");
PreparedStatement ps = con
.prepareStatement("SELECT uname FROM member WHERE uname= ?");
ps.setString(1, s);
ResultSet rs = ps.executeQuery();
while (rs.first()) {
out.print(rs.getString(1));
}
con.close();
} catch (Exception e) {
e.printStackTrace();
}
%>