i want a popup box with link to home page by clicking submit button only after validation.
How to create a popup box with a link to home page, triggered by a submit button only after validation in HTML, and JavaScript?
validation is working in this form but popbox is not working. i cnt find why this is not working?
var subObject = {
"place1": ["place1", "place2", "place3"],
"place2": ["place4", "place4"],
}
window.onload = function() {
var distSel = document.getElementById("district");
var citySel = document.getElementById("city");
for (var x in subObject) {
distSel.options[distSel.options.length] = new Option(x, x);
}
distSel.onchange = function() {
citySel.length = 1;
var z = subObject[distSel.value];
for (var i = 0; i < z.length; i++) {
citySel.options[citySel.options.length] = new Option(z[i], z[i]);
}
}
}
function valid() {
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
if (f1.username.value == "") {
alert('enter the name');
f1.username.focus();
return false;
} else if (f1.date.value == "") {
alert('enter your date of birth');
f1.date.focus();
return false;
} else if (f1.gender.value == "") {
alert('Select gender');
f1.gender.focus();
return false;
} else if (f1.district.value == "") {
alert('select your district');
f1.district.focus();
return false;
} else if (f1.city.value == "") {
alert('select your city');
f1.city.focus();
return false;
} else {
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
}body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text],
input[type=date] {
width: 75%;
padding: 5px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #FF5733;
color: white;
padding: 10px 15px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100px;
border-radius: 15px;
}
button:hover {
opacity: 0.8;
}
select {
height: 30px;
width: 75%;
padding: 0 15px;
text-align: center;
}
form {
padding-left: 290px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 10px 15px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 10px 15px;
text-align: center;
}<!--model div open-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Application Accepted</h2>
<span class="close">×</span>
</div>
<div class="modal-body">
<p>Go Back To Home Page <a href="home">Home</a></p>
</div>
</div>
</div>
<!--model div close-->
Form code:
<form method="post" name="f1" action="">
<h2 style="padding-left:50px">Application Form</h2>
<table>
<tr>
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username" required>
</td>
</tr>
<tr>
<td>
<label for="date">Date Of Birth</label>
</td>
<td>
<input type="date" id="date" name="date" required> </td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="female" name="gender" required> Female</label>
<label>
<input value="male" type="radio" name="gender"> Male</label>
</td>
</tr>
<tr>
<td>
<label for="district">District</label>
</td>
<td>
<select name="district" id="district">
<option value="">---Select District---</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="city">City</label>
</td>
<td>
<select name="city" id="city">
<option value="">---Select District First---</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit" id="myBtn" class="cancelbtn" onclick="return valid()">SUBMIT</button>
</td>
</tr>
</table>
</form>You are adding event handlers in your else part in valid function you just need to show the modal in the else.
var subObject = {
"place1": ["place1", "place2", "place3"],
"place2": ["place4", "place4"],
}
window.onload = function() {
var distSel = document.getElementById("district");
var citySel = document.getElementById("city");
for (var x in subObject) {
distSel.options[distSel.options.length] = new Option(x, x);
}
distSel.onchange = function() {
citySel.length = 1;
var z = subObject[distSel.value];
for (var i = 0; i < z.length; i++) {
citySel.options[citySel.options.length] = new Option(z[i], z[i]);
}
}
}
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function valid() {
if (f1.username.value == "") {
alert('enter the name');
f1.username.focus();
return false;
} else if (f1.date.value == "") {
alert('enter your date of birth');
f1.date.focus();
return false;
} else if (f1.gender.value == "") {
alert('Select gender');
f1.gender.focus();
return false;
} else if (f1.district.value == "") {
alert('select your district');
f1.district.focus();
return false;
} else if (f1.city.value == "") {
alert('select your city');
f1.city.focus();
return false;
} else {
modal.style.display = "block";
return false; // added return false here because form will try to refresh and submit at this point.
}
}body {
font-family: Arial, Helvetica, sans-serif;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text],
input[type=date] {
width: 75%;
padding: 5px 10px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #FF5733;
color: white;
padding: 10px 15px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100px;
border-radius: 15px;
}
button:hover {
opacity: 0.8;
}
select {
height: 30px;
width: 75%;
padding: 0 15px;
text-align: center;
}
form {
padding-left: 290px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 10px 15px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 10px 15px;
text-align: center;
}<!--model div open-->
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Application Accepted</h2>
<span class="close">×</span>
</div>
<div class="modal-body">
<p>Go Back To Home Page <a href="home">Home</a></p>
</div>
</div>
</div>
<!--model div close-->
<form method="post" name="f1" action="">
<h2 style="padding-left:50px">Application Form</h2>
<table>
<tr>
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username" required>
</td>
</tr>
<tr>
<td>
<label for="date">Date Of Birth</label>
</td>
<td>
<input type="date" id="date" name="date" required> </td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="female" name="gender" required> Female</label>
<label>
<input value="male" type="radio" name="gender"> Male</label>
</td>
</tr>
<tr>
<td>
<label for="district">District</label>
</td>
<td>
<select name="district" id="district">
<option value="">---Select District---</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="city">City</label>
</td>
<td>
<select name="city" id="city">
<option value="">---Select District First---</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<button type="submit" id="myBtn" class="cancelbtn" onclick="return valid();">SUBMIT</button>
</td>
</tr>
</table>
</form>