How do i validate form using javascript and send data to database?

I need a "JOIN US" form that can validate using javascript and be able to connect with and post data into a database.

The details to be validated and posted into the database are: FIRST NAME, LAST NAME, EMAIL ADDRESS, PHONE NUMBER, ADDRESS, CITY

Kindly assist. Thanks

View Answers

April 12, 2011 at 1:30 PM

1)joinus.jsp:

<html>
<center>
<h2>JOIN US</h2>
</center>
<script>
function ValidPhone(aphone)
{
    var valid = "0123456789";
         if(aphone=="")
         {
    alert ("This field is required. Please enter phone number without dashes!")
         return false
         }
         if(aphone.length !=10)
         {
    alert("Invalid phone number length! Please try again.")
         return false
         }
         for (var i=0; i < aphone.length; i++)
         {
         temp = "" + aphone.substring(i, i+1);
         if (valid.indexOf(temp) == "-1")
         {
    alert("Invalid characters in your field. Please try again.")
          return false;
         }

    }
    return true
}
function validate(){
var fname=document.form.fname.value;
var lname=document.form.lname.value;
var email=document.form.email.value;
var phone=document.form.contactNo.value;
var address=document.form.address.value;
var city=document.form.city.value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if(fname==""){
    alert("Please enter first name!");
    document.form.fname.focus();
    return false;
}
 if(lname==""){
    alert("Please enter last name!");
    document.form.lname.focus();
    return false;
}
 if(email==""){
    alert("Please enter email id!");
    document.form.email.focus();
    return false;
  }

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
  {
  alert("Invalid Email ID");
  return false;
  }
   if(!ValidPhone(phone))
         {
         document.form.contactNo.focus()
         return false
         }
         if(address==""){
    alert("Please enter address!");
    document.form.address.focus();
    return false;
}
if(city==""){
    alert("Please enter city!");
    document.form.city.focus();
    return false;
}
return true;

}
</script>

<form name="form" method="post" action="insert.jsp" onsubmit="return validate();">
<center>
<table>
<tr><td> First Name</td><td><input type="text" name="fname"></td></tr>
<tr><td> Last Name</td><td><input type="text" name="lname"></td></tr>
<tr><td> Email</td><td><input type="text" name="email"></td></tr>
<tr><td> Contact No</td><td><input type="text" name="contactNo"></td></tr>
<tr><td> Address</td><td><input type="text" name="address"></td></tr>
<tr><td> City</td><td><input type="text" name="city"></td></tr>

<tr><td><input type="submit" value="Save"></td><td><input type="reset" value="Reset"></td></tr>
</table>
</center>
</form>
</html>

2)insert.jsp:

<%@page import="java.sql.*,java.util.*"%>
<table>
<%
String fname=request.getParameter("fname");
String lname=request.getParameter("lname");
String email=request.getParameter("email");
String phone=request.getParameter("contactNo");
String address=request.getParameter("address");
String city=request.getParameter("city");
        try{
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "root");
        Statement st=con.createStatement();
        int i=st.executeUpdate("insert into login(firstname,lastname,email,contactNo,address,city) values('"+fname+"','"+lname+"','"+email+"','"+phone+"','"+address+"','"+city+"')");
        out.println("Data is successfully inserted!");
        }
        catch(Exception e){
        System.out.print(e);
        e.printStackTrace();
        }
        %>