<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Corner</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://vm-services.tech/developerCorner/parsley/parsley.css">
<!-- Js -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Registration form</h2>
<form id="formSubmit">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required value="[email protected]">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control pwd" id="exampleInputPassword1" placeholder="Password" required value="123456">
</div>
<div class="form-group">
<label for="exampleInputPassword2">Confirm Password</label>
<input type="password" name="password_confirmation" class="form-control pwd" id="exampleInputPassword2" placeholder="Conirm Password" required value="123456">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" onclick="togglepassword()">
<label class="form-check-label" for="exampleCheck1">Show Password</label>
</div>
<div class="form-group">
<label for="exampleInputPassword2">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter Name" required value="developer">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
<script src="https://vm-services.tech/developerCorner/parsley/parsley.min.js"></script>
<script>
$("#formSubmit").submit(function(e) {
const startTime = performance.now();
e.preventDefault()
if ($(this).parsley().validate()) {
var url = "{{ url('registration_process') }}";
$.ajax({
url: url,
data: $('#formSubmit').serialize(),
type: 'post',
success: function(result) {
if (result.status == 200) {
console.log("Sumbit Successfully");
} else {
console.log(result);
}
const endTime = performance.now();
const total = endTime - startTime ;
console.log("Total Time "+ total +" in milliseconds");
}
});
}
});
function togglepassword() {
var x = document.getElementsByClassName("pwd");
$.each(x, function(key, val) {
if (val.type === "password") {
val.type = "text";
} else {
val.type = "password";
}
})
}
</script>
