Untitled

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

  $servername = "localhost";
  $username = "root";
  $password = "root";
  $dbname = "mycms";
  $uname = $_POST['user'];
  $pword = $_POST['password'];
  $fname = $_POST['firstname'];
  $lname = $_POST['lastname'];
  $gender = $_POST['gender'];
  $agegroup = $_POST['ageGroup'];
  $province = $_POST['province'];

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
  }

  $sql = "INSERT INTO users (user, password, firstname, lastname, gender, ageGroup, province)
  VALUES ('$uname', '$pword', '$fname', '$lname', '$gender', '$agegroup', '$province')";

  if ($conn->query($sql) === TRUE) {
      header('Location: welcome.php');
      die();
  } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
  }

  $conn->close();

}

?>
<!DOCTYPE html>
<html>

    <head>
        <title>Sign UP Form</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

 <table align="center" width="500px">
 <form id="myform" action="signup.php" method="post" onSubmit="return validateForm();">

<tr>
<td colspan="2"><div id="errmsg"></div></td>
</tr>

<tr>
<td><label>Username</label></td>
<td><input type="text" id="user" name="user"></td>
</tr>

<tr>
<td><label>Password</label></td>
<td><input type="password" id="password" name="password"></td>
</tr>

<tr>
<td><label>Confirm Password</label> </td>
<td><input type="password" id="confirmpwd" name="confirmpwd"></td>
</tr>

<tr>
<td><label>First Name</label> </td>
<td><input type="text" id="firstname" name="firstname"></td>
</tr>

<tr>
<td><label>Last Name</label> </td>
<td><input type="text" id="lastname" name="lastname"></td>
</tr>


<tr>
<td><label id="genderlabel">Gender</label> </td>
<td><input type="radio" name="gender" value="male"> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
</td>
</tr>
<!-- How to connect gender?-->

<tr>
<td><label>Province</label></td>
<td><select name="province">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="ON" selected>Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
</td>
</tr>

<tr>
<td>Age Group</td>
<td><select id="age" name="ageGroup">
<option value="0-12">Upto 12</option>
<option value="Above12">Above 12</option>
</select>
</td>
</tr>

<tr>
<td colspan="2"><input type="submit" value="Sign Up"></td>
<td>
</td>


</form>


</table>
        <script>
            function validateForm()
            {

                    var username = myform.user.value;
                    var pwd = myform.password.value;
                    var confirmpwd = myform.confirmpwd.value;
                    var fname = myform.firstname.value;
                    var lname = myform.lastname.value;
                    var gender = myform.gender.value;
                    var age = myform.ageGroup.value;
                    var province = myform.province.value;


                    var genderval = document.getElementsByName("gender");

                    for(var i = 0; i < genderval.length; i++) {
                        if(genderval[i].checked == true) {
                            var genderchoice = genderval[i].value;
                        }
                    }

                    var province = myform.province.value;

                    var age = myform.age.value;


                    //validating form data

                    var errmsgs=new Array();
                    var flag=true;

                    if(username == null || username == ""){
                        errmsgs.push("Please Enter Username");
                        flag=false;
                    }
                    if(username.length < 6 || username.length > 30){
                        errmsgs.push("Length of User name must be between 6 to 30");
                        flag=false;
                    }
                    if(pwd == null || pwd == ""){
                        errmsgs.push("Please enter the Password");
                        flag=false;
                    }
                    if(pwd.length < 8 || pwd.length > 20){
                        errmsgs.push("Password length must be between 8 to 20");
                        flag=false;
                    }
                    if(confirmpwd != pwd){
                        errmsgs.push("Passwords not match");
                        flag=false;
                    }
                    if(fname == null || fname == ""){
                        errmsgs.push("First name cannot be empty");
                        flag=false;
                    }
                    if(lname == null || lname == ""){
                        errmsgs.push("Last name cannot be empty");
                        flag=false;
                    }
                    if(gender == null){
                        errmsgs.push("Please select the gender");
                        flag=false;
                    }
                    if(province == null){
                        errmsgs.push("Province must be selected");
                        flag=false;
                    }

                    if(age == null || age=="0-12"){
                        errmsgs.push("You must be older than 12");
                        flag=false;
                    }

                    else
                        {
                        flag=true;
                    }


                var allerrors="<ul>";
                for(var x in errmsgs)
                    {
                        allerrors += "<li>" + errmsgs[x] + "</li>";
                    }
                allerrors+="</ul>";

                if(flag==false){
                    document.getElementById('errmsg').innerHTML=allerrors;
                }

                return flag;

}
        </script>

    </body>
</html>