Develop Reference

Dynamically display element/label when ratio button is clicked

I'm trying to hide mailingaddress box and label, and also hide comments box and label. They will only show up when I click on the radio button "mail" (the first choice), and when I switch to another button/choice, those labels and fields will be hidden again. Same for comments - when I click on "I accepted" of Terms of Services - the comments box and label will show up, if I uncheck it, the box and the label disappear. I successfully hide them but I cannot make them appear again when I click on the mail button, neither can I make the comments box and label appear when I click on "I accept" of Terms of Services. Where did I go wrong?
var $ = function(id) { return document.getElementById(id); };
var processEntries = function() {
var isValid = true;
// get values for user entries
var email = $("email_address").value;
var phone = $("phone").value;
var country = $("country").value;
var terms = $("terms").checked; //return true or false indicates whether a check box is checked or not
//remove validity messages if there is any
$("email_address").nextElementSibling.textContent = "";
$("phone").nextElementSibling.textContent = "";
$("country").nextElementSibling.textContent = "";
$("terms").nextElementSibling.textContent = "";
// check user entries for validity
if (email === "") {
$("email_address").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (phone === "") {
$("phone").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (country === "") {
$("country").nextElementSibling.textContent = "Please select a country.";
isValid = false;
}
if (terms === false) {
$("terms").nextElementSibling.textContent = "This box must be checked.";
isValid = false;
}
if(isValid)
{
$("registration_form").submit(); //submit registration form
}
};
var resetForm = function() {
$("registration_form").reset();
$("email_address").nextElementSibling.textContent = "*";
$("phone").nextElementSibling.textContent = "*";
$("country").nextElementSibling.textContent = "*";
$("terms").nextElementSibling.textContent = "*";
$("email_address").focus();
};
$("register").onclick = processEntries;
$("reset_form").onclick = resetForm;
//step 1: hide mailingaddress box and label, hide comments box and label
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
//step 2: define event handler function and add event listener to hide or show mailing address box and label when radio buttons are clicked.
//show mailing addess box and label only when mail button is clicked, when other buttons are clicked, hide mailing address box and label
document.getElementById("mail").addEventListener("click", displayMailOption);
function displayMailOption() {
if (documenet.getElementById("mail").checked){
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
//step 3: define event handler functionn and add event listener to hide or show comment box and label when check box is clicked.
//show comment box and label only when check box is checked. when check box is unchecked, hide comment box and label
document.getElementById("comments").addEventListener("click", displayCommentOption);
function displayCommentOption() {
if (documenet.getElementById("comments").checked){
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
html { background-image: url("ginkgo.jpg");}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 730px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
h2 {
font-size: 120%;
margin-bottom: .25em;
}
label {
float: left;
width: 9em;
}
input, select , textarea{
width: 20em;
margin-left: 1em;
margin-bottom: 1em;
}
input[type="checkbox"],[type="radio"] {
width: 1em;
}
#registration_form span {
color: red;
font-size: 80%;
}
.hide {display: none;}
input[type="button"] {
background-color: #000;
border-radius: 5px;
color: #fff;
font-size: 1.2em;
width: 100px;
margin-right: 1.4em;}
input[type="button"]:hover {
background-color: #666;
cursor: pointer;
text-shadow: 2px 2px 2px #000;
box-shadow: inset 0 2px 2px #000;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Account Registration</title>
<link rel="stylesheet" type="text/css" href="register.css">
</head>
<body>
<main>
<h1>Register for an Account</h1>
<form action="register_account.html" method="get"
name="registration_form" id="registration_form">
<label for="email_address">E-Mail:</label>
<input type="text" name="email_address" id="email_address">
<span>*</span><br>
<label for="phone">Mobile Phone:</label>
<input type="text" name="phone" id="phone">
<span>*</span><br>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="">Select an option</option>
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
<span>*</span><br>
<label>Contact me by:</label>
<input type="radio" name="contact" id="mail" value="mail">Mail
<input type="radio" name="contact" id="email" value="email">Email
<input type="radio" name="contact" id="mphone" value="mobilephone">Mobile Phone
<input type="radio" name="contact" id="none" value="none">Don't contact me
<br>
<label for="mailingaddress">Your Mailing Address:</label>
<textarea id="mailingaddress"></textarea><br>
<label>Terms of Service:</label>
<input type="checkbox" name="terms" id="terms" value="yes">I accept
<span>*</span><br>
<label for="comments">Comments:</label>
<textarea id="comments" cols='20' rows='10' ></textarea><br>
<label> </label>
<input type="button" id="register" value="Register">
<input type="button" id="reset_form" value="Reset">
</form>
</main>
<script src="register.js"> </script>
</body>
</html>

You don't have event listeners for other radio inputs, so no code will run.
Add these:
document.getElementById("email").addEventListener("click", displayMailOption);
document.getElementById("mphone").addEventListener("click", displayMailOption);
document.getElementById("none").addEventListener("click", displayMailOption);
Now on every radio input change, your displayMailOption function will run.
The displayMailOption function should look like this, after fixing the typo and selecting the correct element:
function displayMailOption() {
if (document.getElementById("mail").checked) {
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
}
}
Fix the comment listener ID:
document.getElementById("terms").addEventListener("click", displayCommentOption);
The displayCommentOption function should look like this:
function displayCommentOption() {
if (document.getElementById("terms").checked) {
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("comments").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}

Actually you don't need JavaScript to achieve that. You can do it in pure CSS. But to answer your question first, the problem is that you attach the click event the label and the function is called only when input is clicked. So if "email", "phone" or other labels are clicked the function is not called and therefore the elements are not hidden.
Here is an example of how to do it using only CSS:
var $ = function(id) {
return document.getElementById(id);
};
var processEntries = function() {
var isValid = true;
// get values for user entries
var email = $("email_address").value;
var phone = $("phone").value;
var country = $("country").value;
var terms = $("terms").checked; //return true or false indicates whether a check box is checked or not
//remove validity messages if there is any
$("email_address").nextElementSibling.textContent = "";
$("phone").nextElementSibling.textContent = "";
$("country").nextElementSibling.textContent = "";
$("terms").nextElementSibling.textContent = "";
// check user entries for validity
if (email === "") {
$("email_address").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (phone === "") {
$("phone").nextElementSibling.textContent = "This field is required.";
isValid = false;
}
if (country === "") {
$("country").nextElementSibling.textContent = "Please select a country.";
isValid = false;
}
if (terms === false) {
$("terms").nextElementSibling.textContent = "This box must be checked.";
isValid = false;
}
if (isValid) {
$("registration_form").submit(); //submit registration form
}
};
var resetForm = function() {
$("registration_form").reset();
$("email_address").nextElementSibling.textContent = "*";
$("phone").nextElementSibling.textContent = "*";
$("country").nextElementSibling.textContent = "*";
$("terms").nextElementSibling.textContent = "*";
$("email_address").focus();
};
$("register").onclick = processEntries;
$("reset_form").onclick = resetForm;
//step 1: hide mailingaddress box and label, hide comments box and label
/*
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
*/
//step 2: define event handler function and add event listener to hide or show mailing address box and label when radio buttons are clicked.
//show mailing addess box and label only when mail button is clicked, when other buttons are clicked, hide mailing address box and label
//document.getElementById("mail").addEventListener("click", displayMailOption);
/*
function displayMailOption() {
if (document.getElementById("mail").checked) {
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
//step 3: define event handler functionn and add event listener to hide or show comment box and label when check box is clicked.
//show comment box and label only when check box is checked. when check box is unchecked, hide comment box and label
document.getElementById("comments").addEventListener("click", displayCommentOption);
function displayCommentOption() {
if (document.getElementById("comments").checked) {
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}
*/
html {
background-image: url("ginkgo.jpg");
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 730px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
h2 {
font-size: 120%;
margin-bottom: .25em;
}
label {
float: left;
width: 9em;
}
input,
select,
textarea {
width: 20em;
margin-left: 1em;
margin-bottom: 1em;
}
input[type="checkbox"],
[type="radio"] {
width: 1em;
}
#registration_form span {
color: red;
font-size: 80%;
}
.hide {
display: none;
}
input[type="button"] {
background-color: #000;
border-radius: 5px;
color: #fff;
font-size: 1.2em;
width: 100px;
margin-right: 1.4em;
}
input[type="button"]:hover {
background-color: #666;
cursor: pointer;
text-shadow: 2px 2px 2px #000;
box-shadow: inset 0 2px 2px #000;
}
/* Hide elements on load */
#mailingaddress,
#mailadress-label,
#comments-label,
#comments {
display: none;
}
/* Show elements when #mail is checked */
#mail:checked~#mailingaddress,
#mail:checked~#mailadress-label {
display: block;
}
/* Show comments when #terms is checked */
#terms:checked~#comments-label,
#terms:checked~#comments {
display: block;
}
<main>
<h1>Register for an Account</h1>
<form action="register_account.html" method="get" name="registration_form" id="registration_form">
<label for="email_address">E-Mail:</label>
<input type="text" name="email_address" id="email_address">
<span>*</span><br>
<label for="phone">Mobile Phone:</label>
<input type="text" name="phone" id="phone">
<span>*</span><br>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="">Select an option</option>
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
<span>*</span><br>
<label>Contact me by:</label>
<input type="radio" name="contact" id="mail" value="mail">Mail
<input type="radio" name="contact" id="email" value="email">Email
<input type="radio" name="contact" id="mphone" value="mobilephone">Mobile Phone
<input type="radio" name="contact" id="none" value="none">Don't contact me
<br>
<label for="mailingaddress" id='mailadress-label'>Your Mailing Address:</label>
<textarea id="mailingaddress"></textarea><br>
<label>Terms of Service:</label>
<input type="checkbox" name="terms" id="terms" value="yes">I accept
<span>*</span><br>
<label for="comments" id='comments-label'>Comments:</label>
<textarea id="comments" cols='20' rows='10'></textarea><br>
<label> </label>
<input type="button" id="register" value="Register">
<input type="button" id="reset_form" value="Reset">
</form>
</main>

jQuery('input[type=radio]').change(function(){
if (document.getElementById("mail").checked){
document.getElementsByTagName("label")[4].style.display = "block";
document.getElementById("mailingaddress").style.display = "block";
} else {
document.getElementsByTagName("label")[4].style.display = "none";
document.getElementById("mailingaddress").style.display = "none";
}
})
document.getElementById("terms").addEventListener("click", displayCommentOption);
function displayCommentOption() {
if (document.getElementById("terms").checked){
document.getElementsByTagName("label")[6].style.display = "block";
document.getElementById("comments").style.display = "block";
} else {
document.getElementsByTagName("label")[6].style.display = "none";
document.getElementById("comments").style.display = "none";
}
}

PHP - how to display user inputs multiform before inserting to database

I'm new to PHP we have a school project Online Booking Appointment System.
I'm having issues on how can I display the user inputs on step 3 without clicking submit button?
When clicking "previous" button and update details how can I display the updated content on step 3?
Step 3 is the final step before inserting into the database.
Any help would be appreciated. Thank you.
Below is the source code.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
border: 3px solid #f1f1f1;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
select {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #2ea3f2;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
margin-top: 15px;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #2ea3f2;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
hr {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
background-color:#2ea3f2;
color:#2ea3f2;
}
</style>
<body>
<form id="regForm" action="insert.php" method="POST">
<h1>Book for Appointment</h1>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
<!-- One "tab" for each step in the form: -->
<div class="tab"><h3>Appointment Details</h3>
<hr>
<p><strong>Reason</strong><input placeholder="Reason..." oninput="this.className = ''" name="reason"></p>
<p><strong>Doctor</strong>
<select name="doctor">
<option value="Dr. Emma Blade">Dr. Emma Blade</option>
<option value="Dr. John Watson">Dr. John Watson</option>
<option value="Dr. Alexandra Smit">Dr. Alexandra Smith</option>
</select>
<br>
<br>
<label for="bday"><strong>Calendar</strong></label>
<input type="date" id="date" name="bookingdate">
</div>
<div class="tab"><h3>Personal Information</h3>
<hr>
<p><strong>First Name</strong><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
<p><strong>Last Name</strong><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
<p><strong>Gender</strong><input placeholder="Gender..." oninput="this.className = ''" name="gender"></p>
<p><strong>Email</strong><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
<p><strong>Phone</strong><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
</div>
<div class="tab"><h3>Confirm Appointment</h3>
<hr>
<h3>Booking Details</h3>
<hr>
<p><strong>Reason:</strong> </p><?php echo $_POST["reason"]; ?>
<p><strong>Doctor:</strong> </p><?php echo $_POST["doctor"]; ?>
<p><strong>Date: </strong></p><?php echo $_POST["bookingdate"]; ?>
<h3>Personal Information</h3>
<hr>
<p><strong>First Name: </strong></p><?php echo $_POST["fname"]; ?>
<p><strong>Last Name: </strong></p><?php echo $_POST["lname"]; ?>
<p><strong>Gender: </strong></p><?php echo $_POST["gender"]; ?>
<p><strong>Email: </strong></p><?php echo $_POST["email"]; ?>
<p><strong>Phone: </strong></p><?php echo $_POST["phone"]; ?>
</div>
<div style="overflow:au to;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Submit</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
</form>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
</body>
</html>

Hello Check below code it's working for me.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
border: 3px solid #f1f1f1;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
select {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #2ea3f2;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
margin-top: 15px;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #2ea3f2;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
hr {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
background-color:#2ea3f2;
color:#2ea3f2;
}
</style>
<body>
<form id="regForm" action="insert.php" method="POST">
<h1>Book for Appointment</h1>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
<!-- One "tab" for each step in the form: -->
<div class="tab"><h3>Appointment Details</h3>
<hr>
<p><strong>Reason</strong>
<input placeholder="Reason..." oninput="this.className = ''" name="reason" id="reason" onblur="getVal(this.id)"></p>
<p><strong>Doctor</strong>
<select name="doctor" id="doctor" onchange="getVal(this.id)">
<option value="Dr. Emma Blade">Dr. Emma Blade</option>
<option value="Dr. John Watson">Dr. John Watson</option>
<option value="Dr. Alexandra Smit">Dr. Alexandra Smith</option>
</select>
<br>
<br>
<label for="bday"><strong>Calendar</strong></label>
<input type="date" id="date" name="bookingdate" id="date" onblur="getVal(this.id)">
</div>
<div class="tab"><h3>Personal Information</h3>
<hr>
<p><strong>First Name</strong><input id="fname" onblur="getVal(this.id)" placeholder="First name..." oninput="this.className = ''" name="fname"></p>
<p><strong>Last Name</strong><input id="lname" onblur="getVal(this.id)" placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
<p><strong>Gender</strong><input id="gender" onblur="getVal(this.id)" placeholder="Gender..." oninput="this.className = ''" name="gender"></p>
<p><strong>Email</strong><input id="email" onblur="getVal(this.id)" placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
<p><strong>Phone</strong><input id="phone" onblur="getVal(this.id)" placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
</div>
<div class="tab"><h3>Confirm Appointment</h3>
<hr>
<h3>Booking Details</h3>
<hr>
<p><strong>Reason:</strong> </p><span id="id_reason"></span>
<p><strong>Doctor:</strong> </p><span id="id_doctor"></span>
<p><strong>Date: </strong></p><span id="id_date"></span>
<h3>Personal Information</h3>
<hr>
<p><strong>First Name: </strong></p><span id="id_fname"></span>
<p><strong>Last Name: </strong></p><span id="id_lname"></span>
<p><strong>Gender: </strong></p><span id="id_gender"></span>
<p><strong>Email: </strong></p><span id="id_email"></span>
<p><strong>Phone: </strong></p><span id="id_phone"></span>
</div>
<div style="overflow:au to;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Submit</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
</form>
<script>
//Get Value of input box.
function getVal(idInput){
//alert();
var valueOfInput = document.getElementById(idInput).value;
document.getElementById("id_"+idInput).innerHTML = valueOfInput;
}
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
</body>
</html>
I have added getVal function in js. and get values of input box.

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the crurrent tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
showData();
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
function showData(){
document.getElementById("reason").innerHTML=document.getElementsByName("reason")[0].value;
document.getElementById("doctor").innerHTML=document.getElementsByName("doctor")[0].value;
document.getElementById("bookingdate").innerHTML=document.getElementsByName("bookingdate")[0].value;
document.getElementById("fname").innerHTML=document.getElementsByName("fname")[0].value;
document.getElementById("lname").innerHTML=document.getElementsByName("lname")[0].value;
document.getElementById("gender").innerHTML=document.getElementsByName("gender")[0].value;
document.getElementById("email").innerHTML=document.getElementsByName("email")[0].value;
document.getElementById("phone").innerHTML=document.getElementsByName("phone")[0].value;
}
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
border: 3px solid #f1f1f1;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
select {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #2ea3f2;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
margin-top: 15px;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #2ea3f2;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
hr {
width: 100%;
margin-left: auto;
margin-right: auto;
height: 3px;
background-color:#2ea3f2;
color:#2ea3f2;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<form id="regForm" action="insert.php" method="POST">
<h1>Book for Appointment</h1>
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
<!-- One "tab" for each step in the form: -->
<div class="tab"><h3>Appointment Details</h3>
<hr>
<p><strong>Reason</strong><input placeholder="Reason..." oninput="this.className = ''" name="reason"></p>
<p><strong>Doctor</strong>
<select name="doctor">
<option value="Dr. Emma Blade">Dr. Emma Blade</option>
<option value="Dr. John Watson">Dr. John Watson</option>
<option value="Dr. Alexandra Smit">Dr. Alexandra Smith</option>
</select>
<br>
<br>
<label for="bday"><strong>Calendar</strong></label>
<input type="date" id="date" name="bookingdate">
</div>
<div class="tab"><h3>Personal Information</h3>
<hr>
<p><strong>First Name</strong><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
<p><strong>Last Name</strong><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
<p><strong>Gender</strong><input placeholder="Gender..." oninput="this.className = ''" name="gender"></p>
<p><strong>Email</strong><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
<p><strong>Phone</strong><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
</div>
<div class="tab"><h3>Confirm Appointment</h3>
<hr>
<h3>Booking Details</h3>
<hr>
<p><strong>Reason:</strong> <span id="reason">></span></p>
<p><strong>Doctor:</strong> <span id="doctor"></span></p>
<p><strong>Date: </strong><span id="bookingdate"></span>
</p>
<h3>Personal Information</h3>
<hr>
<p><strong>First Name: </strong><span id="fname"></span></p>
<p><strong>Last Name: </strong><span id="lname"></span></p>
<p><strong>Gender: </strong><span id="gender"></span></p>
<p><strong>Email: </strong><span id="email"></span></p>
<p><strong>Phone: </strong><span id="phone"></span></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Submit</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
</form>

Javascript logic not working

The if condition is not working while the else if and else are working:
function userchk() {
var un = $('#user_name').val();
if (un.length < 3 && un.length != 0) {
$("#validateUser").html("<span style='color:red' class='status-not-available'>User Name Shoul Be Greater Then 3.</span>");
}
else if (un.length == 0) {
$('#validationUser').html("<span style='color:red' class='status-not-available'> User Name Cannot Be Empty.</span>");
}
else {
$('#validationUser').html("");
}
}
$('#btnTest').on('click', function() {
userchk();
});
input {
width: 100%;
margin-top: 20px;
float: left;
}
button {
font-size: 20px;
background-color: #555;
color: #fff;
padding: 10px 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnTest">Test userchk()</button>
<input type="text" name="user_name" id="user_name" onBlur="userchk()" class="form-control" placeholder="Username" />
<div id="validationUser"></div>

Your if condition results in an element with id #validateUser being selected and manipulated.
Your else if and else target #validationUser
The Javascript logic conditions are sound but you are not getting your expected results because you are targeting a different element in your if block.

Force HTML form validation via JavaScript

I have created a HTML form which has two buttons (instead of a submit button), each programmatically sending the form to a unique form action address.
<form id="formExample">
<input type="text" id="input1" required>
<label type="button" onClick="form1()">Form Action 1</label>
<label type="button" onClick="form2()">Form Action 2</label>
</form>
The scripts:
form = document.getElementById("formExample");
function form1() {
form.action="example1.php";
form.submit();
}
function form2() {
form.action="example2.php";
form.submit();
}
Work well, responding to which button you press. However, the same html form validation that worked before (when using a 'submit' button), no longer shows a hint and the form sends regardless of whether there is input or not.
I have read that because I am calling the form.submit() programmatically, it bypasses the onSubmit() function of a form, which is where the validation takes place.
My question is: Can I programmatically force the onSubmit() so that I get the validation pop up? I must make clear that I am NOT wanting to create a JavaScript form validation, i.e. using an alert; rather, use JavaScript to enforce the HTML validation as found here, when you click submit: https://jsfiddle.net/qdzxfm9u/

You can merely change your button's type to submit and drop the form.submit() from your JS part.
So the HTML part becomes:
<form id="formExample">
<input type="text" id="input1" required>
<button type="submit" onClick="form1()">Form Action 1</button>
<button type="submit" onClick="form2()">Form Action 2</button>
</form>
This way, clicking any button does submit by itself, but before is executed the JS part:
form = document.getElementById("formExample");
function form1() {
form.action="example1.php";
}
function form2() {
form.action="example2.php";
}
EDIT
Warning: I originally based my solution on a copy of the OP HTML part, where the "pseudo-buttons" used a strange element <label type="input"...>, so I read (too quickly) as if it was <button type="button"...> and simply changed type from input to submit!
This way, it couldn't work as expected.
It is now corrected in the above code.

Maybe something like this :
var form = document.getElementById("formExample");
function form1() {
form.action="example1.php";
}
function form2() {
form.action="example2.php";
}
<form id="formExample">
<input type="text" id="input1" required>
<input type="submit" onClick="form1()" value="Form Action 1" />
<input type="submit" onClick="form2()" value="Form Action 2" />
</form>

How about making a dropdown list - could be radio buttons instead - containing the form two actions with one submit button like in this JS Fiddle, then having one function on form submit
var form = document.getElementById("formExample"),
select = document.getElementById("slct");
form.addEventListener('submit', function() {
if (select.value == 1) {
form.action = "example1.php";
} else {
form.action = "example2.php";
}
// alert for demo only
alert(form.action);
form.submit();
});
<form id="formExample">
<input type="text" id="input1" required>
<select id="slct" required>
<option></option>
<option value="1">Form Action 1</option>
<option value="2">Form Action 2</option>
</select>
<button type="submit">Submit</button>
</form>

function togglePassword(el){
var checked = el.checked;
if (checked) {
document.getElementById("password").type = 'text';
document.getElementById("toggleText").textContent= "Hide";
} else {
document.getElementById("password").type = 'password';
document.getElementById("toggleText").textContent= "Show";
}
}
function login()
{
var uname = document.getElementById("uname").value;
var password = document.getElementById("password").value;
if(uname === '')
{
alert("Please enter the user name.");
}
else if(password === '')
{
alert("Enter the password");
}
else
{
alert('Login Successful. Thank You!');
}
}
function clearFunc()
{
document.getElementById("uname").value="";
document.getElementById("password").value="";
<script type="text/javascript">
function togglePassword(el){
var checked = el.checked;
if (checked) {
document.getElementById("password").type = 'text';
document.getElementById("toggleText").textContent= "Hide";
} else {
document.getElementById("password").type = 'password';
document.getElementById("toggleText").textContent= "Show";
}
}
function login()
{
var uname = document.getElementById("uname").value;
var password = document.getElementById("password").value;
if(uname === '')
{
alert("Please enter the user name.");
}
else if(password === '')
{
alert("Enter the password");
}
else
{
alert('Login Successful. Thank You!');
}
}
function clearFunc()
{
document.getElementById("uname").value="";
document.getElementById("password").value="";
}
</script>
/* heading */
h1 {
display: block;
font-size: 2em;
font-weight: bold;
/* padding: 0% 1% 3% 6.5%; */
margin: 0% 35% -10% 36%;
}
h1:hover{
color:#4499d9 ;
transform: translateY(-5px);
}
/* bg image */
body {
background-image: url('img/bg4.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
/* Bordered form */
form {
/* border: 13px solid black; */
width: 27%;
height: auto;
position: absolute;
left: 10%;
margin-left: -3px;
top: 18%;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #17234b;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 49%;
}
/* Add a hover effect for buttons */
button:hover {
background-color: #4499d9;
transform: translateY(-5px);
box-shadow: 1px 3px 7px #6f6d72;
}
#toggleText {
display: block;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 30%;
border-radius: 20%;
box-shadow: 1px 3px 9px #6f6d72;
}
img.avatar:hover{
transform: translateY(-5px);
box-shadow: 7px 9px 9px #6f6d72;
}
/* Add padding to containers */
.container {
padding: 16px;
}
span.buttons{
width: 100%;
display: flow-root;
}
#toggleText{
float: left;
}
#toggle{
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>LOGIN PANEL</h1>
<!-- Login Form -->
<div class="form">
<form >
<div class="imgcontainer">
<img src="img/Login.jfif" alt="Login Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" id="uname" name="uname"/>
<label for="password"><b>Password</b></label>
<input type='password'placeholder="Enter Your Password" name="password" id='password'/>
<input type='checkbox' id='toggle' onchange='togglePassword(this)'><span id='toggleText'>Show</span>
<span class="buttons">
<button type="submit" value="Reset" onclick="clearFunc()" class="btn">Reset</button>
<button type="submit" value="Login" class="btn" onClick="login()">Login</button>
</span>
</div>
</form>
</div>
</body>
</html>

Does anyone know why my multi-phase form won't work?

I am making a multi-phase form but it is not acting normal
I have written a lot of diffrent code for it but don't know why it is not working the way I want it
It has been two days working with it I am feeling stupid now
here is the code
HTML:
<div id="form-container">
<div id="phase-1">
<h3>Phase 01</h3>
<form>
<input id="fname" type="text" placeholder="First name">
<input id="lname" type="text" placeholder="Last name">
<input id="email" type="text" placeholder="Email">
<button id="phase-1-btn">Next</button>
</form>
</div>
<div id="phase-2">
<h3>Phase 02</h3>
<form>
<input id="pass" type="text" placeholder="Password">
<input id="cpass" type="text" placeholder="Confirm Password">
<button id="phase-2-btn">Next</button>
</form>
</div>
<div id="phase-3">
<h2>Thank You for Testing my pen</h2>
</div>
</div>
CSS :
#form-container{
height: 350px;
width: 300px;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
background-color: #95a5a6;
font-family: "Slabo 27px";
position: relative;
box-shadow: 1px 1px 2px,
-1px -1px 2px;
}
#phase-1, #phase-2{
height: 100%;
width: 100%;
border-top: 3px solid #f39c12;
display: block;
}
#phase-1 h3, #phase-2 h3{
height: 10%;
width: 60%;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 23px;
color: #fff;
}
#phase-1 form, #phase-2 form{
display: block;
height: 75%;
padding: 0;
padding-top: 15px;
margin: 0;
}
input{
display: block;
width: 80%;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
button {
display: block;
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 10px 5px;
background-color: #f39c12;
color: #fff;
font-weight: 600;
border: none;
border-radius: 6px;
}
#phase-2{
display: none;
}
#phase-3{
display: none;
height: 0;
width: 100%;
color: #000;
position: absolute;
top: 0;
left: 0;
background: #f39c12
}
#phase-3 h2{
width: 200px;
height: 60px;
margin-left: auto;
margin-right: auto;
margin-top: 135px;
text-align: center;
}
JS :
var fname, lname, email, pass, cpass;
function id( id ) {
return document.getElementById(id);
}
function phase1 () {
fname = id("fname").value;
lname = id("lname").value;
email = id("email").value;
if ( fname.length > 2 && lname.length > 2 && email.length > 2 ) {
id("phase-1").style.display = "none";
id("phase-2").style.display = "block";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase1 function
// add the event to the phase-1-btn
id("phase-1-btn").addEventListener("click", phase1());
/* phase 02 */
function phase2 () {
pass = id("pass").value;
cpass = id("cpass").value;
if ( pass.length > 2 && cpass.length > 2 ) {
id("phase-2").style.display = "none";
id("phase-3").style.display = "block";
id("phase-3").style.height = "100%";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase2 function
id("phase-2-btn").addEventListener("click", phase2());

Let's try this one. Then tell me what you see in the console.
<script>
function phase1()
{
window.console.log('phase1 function called');
var fname_val = document.getElementById('fname').value;
var lname_val = document.getElementById('lname').value;
var email_val = document.getElementById('email').value;
// verify values
window.console.log('fname_val='+fname_val + ' lname_val='+lname_val + ' email_val='+email_val);
if( fname_val.length > 2 && lname_val.length > 2 && email_val.length > 2 )
{
window.console.log('validation!! :)');
document.getElementById("phase-1").style.display = "none";
document.getElementById("phase-2").style.display = "block";
}
else
{
alert("Please fill the Form");
}
}
function phase2()
{
window.console.log('phase2 function called');
}
document.addEventListener("DOMContentLoaded", function(event) {
window.console.log("DOM fully loaded and parsed");
document.getElementById("phase-1-btn").addEventListener("click", phase1);
document.getElementById("phase-2-btn").addEventListener("click", phase2);
});
</script>
<div id="phase-1">
<h3>Phase 01</h3>
<input id="fname" type="text" placeholder="First name" />
<input id="lname" type="text" placeholder="Last name" />
<input id="email" type="text" placeholder="Email" />
<input type="button" id="phase-1-btn" value="Next" />
</div>
<div id="phase-2">
<h3>Phase 02</h3>
<input id="pass" type="text" placeholder="Password" />
<input id="cpass" type="text" placeholder="Confirm Password" />
<input type="button" id="phase-2-btn" value="Next" />
</div>
<div id="phase-3">
<h2>Thank You for Testing my pen</h2>
</div>

To submit a form you want to use a submit button (not classic button).
Have all of your inputs within the form tags.
Add the appropriate form tag attributes such as (action & method)
Use one form tag that wraps around everything with the submit button on the inside.
CSS will have no effect so no need to share that part.
Last but not least - Dont call yourself stupid. Stupid people never ask for help. Reaching out for help is how you improve your skillset.
If you insist on using Javascript to submit the form that is fine, but you want to make sure the form works with classic HTML first.
To make this a multi-step process you should try doing 1 form per page. You will need to understand session handling. You can display portions of the form at a time with Javascript which gives an impression of doing steps but still using 1 form.
<form action="" method="POST">
<script>
function toggleSection(x){
document.getElementById('sec'+x).style.display = "block";
}
</script>
<div id="sec1">
section 1 stuff
<input type="button" value="Continue" onclick="toggleSection(2);" />
</div>
<div id="sec2" style="display:none;">
section 2 stuff
<input type="button" value="Continue" onclick="toggleSection(3);" />
</div>
<div id="sec3" style="display:none;">
section 3 stuff
<input type="submit" value="Submit" />
</div>
</form>

here it is with the changes you ordered
var fname, lname, email, pass, cpass;
function el( id ) {
return document.getElementById(id);
}
function phase1 () {
fname = el("fname").value;
lname = el("lname").value;
email = el("email").value;
if ( fname.length > 2 && lname.length > 2 && email.length > 2 ) {
el("phase-1").style.display = "none";
el("phase-2").style.display = "block";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase1 function
// add the event to the phase-1-btn
el("phase-1-btn").addEventListener("click", phase1);
/* phase 02 */
function phase2 () {
pass = el("pass").value;
cpass = el("cpass").value;
if ( pass.length > 2 && cpass.length > 2 ) {
el("phase-2").style.display = "none";
el("phase-3").style.display = "block";
el("phase-3").style.height = "100%";
// end of if
} else {
alert("Please fill the Form");
}
} // end of phase2 function
el("phase-2-btn").addEventListener("click", phase2);