<?php
session_start();
$host = "localhost";
$username = "root";
$password = "";
$db = "linkway";
$con = mysqli_connect($host , $username , $password , $db);
switch (isset($_POST['type'])) {
case 'AddMember':
extract($_POST);
print_r($_POST);
$UtimePage1 = date("Y-m-d H:i:s");
$query = "INSERT INTO NewMembers( `UtimePage1`,`IpAddress`, `Firstname`, `Lastname`, `Country`,`Gender`, `Age`) VALUES ('$UtimePage1' , '$ipaddress' , '$FirstName' , '$LastName' , '$country','$gender' , '$age')";
$result = mysqli_query($con , $query);
if($result){
$_SESSION["insert_id"] = $con->insert_id;
header("location:JobA2.php");
}else{
$response = array('status' => 500 , 'message' => 'Internal Server');
}
echo json_encode($response);
break;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JobAplication</title>
<style type="text/css">
#apDiv1 {
position: absolute;
width: 300px;
height: 304px;
z-index: 1;
left: 35px;
top: 35px;
background-color: #00CCFF;
}
#apDiv2 {
position: absolute;
width: 400px;
height: 71px;
z-index: 2;
background-color: #00FF00;
left: 34px;
top: 10px;
}
#apDiv2 p strong {
font-family: Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<div id="apDiv1">
<form id="form1" name="form1" method="post" action="/JobApplicationStep2.php" >
<p>
<label for="Gender"></label>
<label for="Gender2"></label>
</p>
<table width="300" border="2">
<tr>
<td align="right">IP Address</td>
<td colspan="2" id="IpAddress"><input type="text" autocomplete="off" name="ipaddress" value="192.168.2.175"/></td>
</tr>
<tr>
<td height="35" align="right">Country: </td>
<td height="35" id="country"><input type="text" autocomplete="off" name="country" value="canada"> </td>
<td height="35"> </td>
</tr>
<tr>
<td width="113" align="right">Gender::</td>
<td width="71"><select name="gender" id="gender">
<option selected value="0">Please Select</option>
<option value="f">Female</option>
<option value="M">Male</option>
</select></td>
<td width="49"></td>
</tr>
<tr>
<td align="right"> First Name:</td>
<td colspan="2"><label for="FirstName3"></label>
<input name="FirstName" type="text" autocomplete="off" id="FirstName3" size="25" maxlength="25" /></td>
</tr>
<tr>
<td align="right"> Last Name:</td>
<td colspan="2"><label for="LastName2"></label>
<input name="LastName" onkeyup="check_fill()" autocomplete="off" type="text" id="LastName2" size="25" maxlength="25" /></td>
</tr>
<tr>
<td align="right">Current Age:
<label for="Age2"></label></td>
<td colspan="2" align="left"><select name="age" id="Age2">
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="26">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
</select></td>
<input type="hidden" name="type" value="AddMember">
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" disabled name="Next" id="Continue" value="Continue" /></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
<p><br />
<label for="FirstName"></label>
<br />
<label for="LastName"></label>
<br />
<label for="Age"></label>
</p>
<p> </p>
<p> </p>
</form>
</div>
</body>
</html>
<script>
/** FOR VALIDATION */
const submitBtn = document.getElementById('Continue')
const gender = document.getElementById('gender');
const firstname = document.getElementById('FirstName3');
const lastname = document.getElementById('LastName2');
// const cBox = document.getElementById('c-box')
// run this function whenever the values of any of the above 4 inputs change.
// this is to check if the input for all 4 is valid. if so, enable submitBtn.
// otherwise, disable it.
const checkEnableButton = () => {
console.log(gender.value);
submitBtn.disabled = !(
firstname.value &&
lastname.value &&
gender.value !== '0'
)
}
gender.addEventListener('change', checkEnableButton)
firstname.addEventListener('change', checkEnableButton)
lastname.addEventListener('change', checkEnableButton)
function check_fill(){
checkEnableButton();
}
/** SUBMIT DATA */
</script>