We Keep Coding

Why the output from javascript just shown for a short period of time?

I am developing a Registration form for my assignment. All things are working but when I click on the submit button, the warning messages on the label are just shown for a very short period of time. I am using eclipse and apache tomacat. here is my code.
JSP Code:
<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid"/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname"/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname"/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email"/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" onclick="validate()"/>
</form>
Javascript Code:
function validate()
{
var itemid=document.getElementById("itemid").value;
var itemname=document.getElementById("itemname").value;
var uname=document.getElementById("uname").value;
var email=document.getElementById("email").value;
var amount=document.getElementById("amount").value;
var autoincrement=document.getElementById("autoincrement");
var flag=true;
if(itemid.length==0){
flag=false;
document.getElementById("itemid_l").innerHTML="<b>Required field!</b> Item Id: ";
}
if(itemname.length==0){
flag=false;
document.getElementById("itemname_l").innerHTML="<b>Required field!</b> Item Name: ";
}
if(uname.length==0){
flag=false;
document.getElementById("uname_l").innerHTML="<b>Required field!</b> Your Name: ";
}
if(email.length==0){
flag=false;
document.getElementById("email_l").innerHTML="<b>Required field!</b> Your Email Address: ";
}
if(amount.length==0){
flag=false;
document.getElementById("amount_l").innerHTML="<b>Required field!</b> Amount Bid: ";
}
if(!autoincrement.checked){
flag=false;
document.getElementById("autoincrement_l").innerHTML="<b>Required field!</b> Auto-increment to match other bidders:: ";
}
if(flag==true){
alert('Good job!!');
return true;
}
else
{
document.getElementById("msg").innerHTML="Required data is missing. Please fill";
return false;
}
}
Any suggestion will help me a lot..

You can use onsubmit event so that whenever user click on submit button this gets call and if the function validate() return true form will get submitted else it will not submit form .
Demo code :
function validate() {
var itemid = document.getElementById("itemid").value;
var itemname = document.getElementById("itemname").value;
var uname = document.getElementById("uname").value;
var email = document.getElementById("email").value;
var amount = document.getElementById("amount").value;
var autoincrement = document.getElementById("autoincrement");
var flag = true;
if (itemid.length == 0) {
flag = false;
document.getElementById("itemid_l").innerHTML = "<b>Required field!</b> ";
} else {
//if fill remove error any
document.getElementById("itemid_l").innerHTML = ""
}
if (itemname.length == 0) {
flag = false;
document.getElementById("itemname_l").innerHTML = "<b>Required field!</b> ";
} else {
//if fill remove error any
document.getElementById("itemname_l").innerHTML = "";
}
if (uname.length == 0) {
flag = false;
document.getElementById("uname_l").innerHTML = "<b>Required field!</b> ";
} else {
document.getElementById("uname_l").innerHTML = "";
}
if (email.length == 0) {
flag = false;
document.getElementById("email_l").innerHTML = "<b>Required field!</b> ";
} else {
document.getElementById("email_l").innerHTML = "";
}
if (amount.length == 0) {
flag = false;
document.getElementById("amount_l").innerHTML = "<b>Required field!</b>";
} else {
document.getElementById("amount_l").innerHTML = "";
}
if (!autoincrement.checked) {
flag = false;
document.getElementById("autoincrement_l").innerHTML = "<b>Required field!</b>";
} else {
document.getElementById("autoincrement_l").innerHTML = "";
}
if (flag == true) {
document.getElementById("msg").innerHTML = "";
alert('Good job!!');
flag = true; //do true
} else {
document.getElementById("msg").innerHTML = "Required data is missing. Please fill";
flag = false; //do false
}
return flag; //return flag
}
<!--add onsubmit -->
<form method="post" id="forms" onsubmit="return validate()">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--give id to span instead of label-->
<label> <span id="itemid_l"></span>Item Id:</label> <input type="text" name="itemid" id="itemid" /><br/>
<label><span id="itemname_l"></span>Item Name:</label> <input type="text" name="itemname" id="itemname" /><br/>
<label><span id="uname_l"></span>Your Name:</label> <input type="text" name="uname" id="uname" /><br/>
<label><span id="email_l"></span>Your Email Address:</label> <input type="text" name="email" id="email" /><br/>
<label><span id="amount_l"></span>Amount Bid:</label> <input type="number" name="amount" id="amount" /><br/>
<label><span id="autoincrement_l"></span>Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement"><br/>
<input type="submit" value="Submit Bid" />
</form>
Also , if you just need to check for empty field you can just use required attribute on input tag like below :
<form method="post">
<h2>Welcome to AP Auctions. Please Enter Bid</h2>
<span id="msg" style="color:red;font-size:25px"></span><br/>
<!--added required attribute-->
<label id="itemid_l">Item Id:</label> <input type="text" name="itemid" id="itemid" required/><br/>
<label id="itemname_l">Item Name:</label> <input type="text" name="itemname" id="itemname" required/><br/>
<label id="uname_l">Your Name:</label> <input type="text" name="uname" id="uname" required/><br/>
<label id="email_l">Your Email Address:</label> <input type="text" name="email" id="email" required/><br/>
<label id="amount_l">Amount Bid:</label> <input type="number" name="amount" id="amount"required/><br/>
<label id="autoincrement_l">Auto-increment to match other bidders:</label><input type="checkbox" name="autoincrement" id="autoincrement" required><br/>
<input type="submit" value="Submit Bid"/>
</form>

How to get this form validation script working

I have created a form and a form validation script that checks if all fields are filled in, the name and city fields contain only letters, the age and phone fields contain only numbers and if the entered email is a valid one. When used in the console, all of the statements work, but when I fill in every field, or fill in invalid values in the email field or phone number and age field, I still get an error message saying that the name and city field must contain only letters.
I have tried writing out every statement alone and also checking them one by one.
HTML & JS
<form>
<div class="form-group">
<label for="inputName">Name</label>
<input type="name" class="form-control" id="inputName" placeholder="Enter name">
</div>
<div class="form-group">
<label for="inputName">Age</label>
<input type="age" class="form-control" id="inputAge" placeholder="Enter age">
</div>
<div class="form-group">
<label for="inputCity">City</label>
<input type="city" class="form-control" id="inputCity" placeholder="Enter city">
</div>
<div class="form-group">
<label for="InputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<!-- <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="inputPhone">Phone number</label>
<input type="phone" class="form-control" id="inputPhone" placeholder="Phone number">
</div>
<button type="button" class="btn btn-primary submit">Submit</button>
<button type="button" class="btn btn-primary erase">Erase</button>
</form>
<script>
function validateForm() {
var name_cityRegex = /^[a-zA-Z]+$/;
var emailRegex = /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
var age_phoneRegex = /^\d+$/;
var nameValue = $('#inputName').val();
var cityValue = $('#inputCity').val();
var ageValue = $('#inputAge').val();
var phoneValue = $('#inputPhone').val();
var nameResult = name_cityRegex.test(nameValue);
var cityResult = name_cityRegex.test(cityValue);
var ageResult = age_phoneRegex.test(ageValue);
var phoneResult = age_phoneRegex.test(phoneValue);
var mailValue = $('#InputEmail1').val();
var mailResult = emailRegex.test(mailValue);
$(".btn.btn-primary.submit").click(function () {
$('.form-control').each(function () {
if ($(this).val() == "") {
$('.alert.alert-danger').show();
}
else if (nameResult == false || cityResult == false) {
$('.alert.alert-danger').text("Please use letters only in the fields 'Name' and 'City'");
$('.alert.alert-danger').show();
return false;
}
else if (ageResult == false || phoneResult == false) {
$('.alert.alert-danger').text("Please use digits only in the fields 'Age' and 'Phone number'");
$('.alert.alert-danger').show();
return false;
}
else if (mailResult == false) {
$('.alert.alert-danger').text("Please enter a valid email adress");
$('.alert.alert-danger').show();
return false
}
return true;
})
});
</script>
When I leave all fields empty the warning is ok. But when I do anything else I only get the warning that I can only use letters in the fields Name and City.
All help is greatly appreciated for a beginner!

I think you are failing to reassign the variables outside of the onClick function. I have tested below code and it works for me, i admit it is probably not a perfect solution reassigning all the variables each time and perhaps you could place some in global scope such as the RegEx statements. I also removed the loop as i don't think you need to loop over everything 5 times to check.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter name">
</div>
<div class="form-group">
<label for="inputName">Age</label>
<input type="text" class="form-control" id="inputAge" placeholder="Enter age">
</div>
<div class="form-group">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity" placeholder="Enter city">
</div>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" class="form-control" id="InputEmail" aria-describedby="emailHelp" placeholder="Enter email">
<!-- <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="inputPhone">Phone number</label>
<input type="phone" class="form-control" id="inputPhone" placeholder="Phone number">
</div>
<button type="button" class="btn btn-primary submit">Submit</button>
<button type="button" class="btn btn-primary erase">Erase</button>
</form>
<script>
$(".btn.btn-primary.submit").click(function () {
let name_cityRegex = /^[a-zA-Z]+$/;
let emailRegex = /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
let age_phoneRegex = /^\d+$/;
let nameValue = $('#inputName').val();
let cityValue = $('#inputCity').val();
let ageValue = $('#inputAge').val();
let phoneValue = $('#inputPhone').val();
let nameResult = name_cityRegex.test(nameValue);
let cityResult = name_cityRegex.test(cityValue);
let ageResult = age_phoneRegex.test(ageValue);
let phoneResult = age_phoneRegex.test(phoneValue);
let mailValue = $('#InputEmail').val();
let mailResult = emailRegex.test(mailValue);
if (nameValue == '' || cityValue == '' || ageValue == '' || phoneValue == '' || mailValue == '') {
$('.alert.alert-danger').show();
}
else if (nameResult === false || cityResult === false) {
$('.alert.alert-danger').text("Please use letters only in the fields 'Name' and 'City'");
$('.alert.alert-danger').show();
return false;
}
else if (ageResult == false || phoneResult == false) {
$('.alert.alert-danger').text("Please use digits only in the fields 'Age' and 'Phone number'");
$('.alert.alert-danger').show();
return false;
}
else if (mailResult == false) {
$('.alert.alert-danger').text("Please enter a valid email adress");
$('.alert.alert-danger').show();
return false
}
return true;
// })
});
</script>
</body>
</html>

I don't really know why your tests gives you an error, but I think your $('.form-control').each is useless.
In this foreach you test all your fields for each field.
Maybe try without this foreach, just test all your fields when you click on the button by removing this bit of code :
$('.form-control').each(function () {
if ($(this).val() == "") {
$('.alert.alert-danger').show();
}
})
I don't see any other problem.

You have a syntax error I corrected that check below code.
function validateForm() {
var name_cityRegex = /^[a-zA-Z]+$/;
var emailRegex = /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
var age_phoneRegex = /^\d+$/;
var nameValue = $('#inputName').val();
var cityValue = $('#inputCity').val();
var ageValue = $('#inputAge').val();
var phoneValue = $('#inputPhone').val();
var nameResult = name_cityRegex.test(nameValue);
var cityResult = name_cityRegex.test(cityValue);
var ageResult = age_phoneRegex.test(ageValue);
var phoneResult = age_phoneRegex.test(phoneValue);
var mailValue = $('#InputEmail1').val();
var mailResult = emailRegex.test(mailValue);
$('.form-control').each(function () {
if ($(this).val() == "") {
$('.alert.alert-danger').show();
}
else if (nameResult == false || cityResult == false) {
$('.alert.alert-danger').text("Please use letters only in the fields 'Name' and 'City'");
$('.alert.alert-danger').show();
return false;
}
else if (ageResult == false || phoneResult == false) {
$('.alert.alert-danger').text("Please use digits only in the fields 'Age' and 'Phone number'");
$('.alert.alert-danger').show();
return false;
}
else if (mailResult == false) {
$('.alert.alert-danger').text("Please enter a valid email adress");
$('.alert.alert-danger').show();
return false
}
return true;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" name="name" class="form-control" id="inputName" placeholder="Enter name">
</div>
<div class="form-group">
<label for="inputName">Age</label>
<input type="text" name="age" class="form-control" id="inputAge" placeholder="Enter age">
</div>
<div class="form-group">
<label for="inputCity">City</label>
<input type="text" name="city" class="form-control" id="inputCity" placeholder="Enter city">
</div>
<div class="form-group">
<label for="InputEmail1">Email address</label>
<input type="text" name="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="inputPhone">Phone number</label>
<input type="text" name="phone" class="form-control" id="inputPhone" placeholder="Phone number">
</div>
<button type="button" class="btn btn-primary submit" onClick="validateForm()">Submit</button>
<button type="button" class="btn btn-primary erase">Erase</button>
</form>

Trying to store a completed form into an array

I'm creating a registration page and am currently attempting to store the inputs of the form into an array. I'm using
var form_inputs = document.getElementsByClassName("form_input");
to store the inputs in the same place, however if I try to alert form_inputs to test if anything is actually being stored, it just alerts "Undefined".
function validate_form(event) {
var forename = document.getElementById("forename");
var surname = document.getElementById("surname");
var username = document.getElementById("username");
var password = document.getElementById("password");
var re_password = document.getElementById("re_password");
var email = document.getElementById("email");
var errors = 0
var special_chars = "<>#!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";
var form_inputs = document.getElementsByClassName("form_input");
if (forename.value == "") {
//document.getElementById("forename").style.background = "red";
forename_confirmation.style.visibility = 'visible';
var errors = errors + 1
} else
for (var i = 0; i < forename.value.length; i++) {
if (special_chars.indexOf(forename.value.charAt(i)) != -1) {
forename_chars.style.visibility = 'visible'
}
}
if (surname.value == "") {
//document.getElementById("surname").style.background = "red";
surname_confirmation.style.visibility = 'visible';
var errors = errors + 1
} else
for (var i = 0; i < surname.value.length; i++) {
if (special_chars.indexOf(surname.value.charAt(i)) != -1) {
surname_chars.style.visibility = 'visible'
}
}
if (username.value == "") {
//document.getElementById("username").style.background = "red";
username_confirmation.style.visibility = 'visible';
var errors = errors + 1
} else
for (var i = 0; i < username.value.length; i++) {
if (special_chars.indexOf(username.value.charAt(i)) != -1) {
username_chars.style.visibility = 'visible'
}
}
if (password.value == "") {
//document.getElementById("password").style.background = "red";
pass_confirmation.style.visibility = 'visible';
var errors = errors + 1
}
if (password.value != re_password.value) {
//document.getElementById("re_password").style.background = "red";
repass_confirmation.style.visibility = 'visible';
var errors = errors + 1
}
if (email.value == "") {
//document.getElementById("email").style.background = "red";
var errors = errors + 1
}
if (errors != "0") {
alert("Whoops! Looks like you didn't enter your details properly");
console.log(form_inputs);
event.preventDefault(); // Prevent the form from submitting
}
if (!email.value.includes("#") || !email.value.includes(".")) {
//document.getElementById("email").style.background = "blue";
email_confirmation.style.visibility = 'visible';
return false;
}
return (true);
}
<!DOCTYPE html>
<html>
<head>
<title>Login form</title>
<link rel="stylesheet" type="text/css" href="Login Form CSS.css">
<script src="Registration function.js" defer></script>
<body>
<div class="loginbox">
<img src="Logo.jpg" class="avatar">
<h1> Create Account </h1>
<form name="login-form">
<div id="forename_confirmation"> Please fill in this box </div>
<div id="forename_chars"> Don't use special characters</div>
<p>Forename
<p>
<input class="form_input" type="text" name="forename" id="forename" placeholder="Enter Forename here">
<div id="surname_confirmation"> Please fill in this box </div>
<div id="surname_chars"> Don't use special characters</div>
<p>Surname
<p>
<input class="form_input" type="text" name="surname" id="surname" placeholder="Enter Surname here">
<div id="username_confirmation"> Please fill in this box </div>
<div id="username_chars"> Don't use special characters</div>
<p>Username
<p>
<input class="form_input" type="text" name="username" id="username" placeholder="Enter Username here">
<div id="pass_confirmation"> Please fill in this box </div>
<div id="pass_chars">Don't use special characters</div>
<p>Password
<p>
<input class="form_input" type="password" name="password" id="password" placeholder="Enter Password here">
<div id="repass_confirmation"> Passwords do not match </div>
<p>Re-enter Password
<p>
<input class="form_input" type="password" name="re_password" id="re_password" placeholder="Re-enter your password here">
<div id="email_confirmation"> Please enter a valid email </div>
<p>Email
<p>
<input class="form_input" type="email" name="email" id="email" placeholder="Enter Email here">
<!--
<p>Gender<p>
<input type="radio" id="Male" name="Gender" value="Male">Male</input>
<input type="radio" id="Female" name="Gender" value="Female">Female</input>
-->
<button onclick="validate_form(event)" type="Submit" value="True" name="button-submit"> Submit </button>
<br />
<br />
Forgot your password?
<br />
Already got an account?
<br /><br />
</form>
<!-- <button onclick="validate_form()" type="submit"> Validate </button> -->
</div>
</body>
</head>
<script>
forename_confirmation.style.visibility = 'hidden'
forename_chars.style.visibility = 'hidden'
surname_confirmation.style.visibility = 'hidden'
surname_chars.style.visibility = 'hidden'
username_confirmation.style.visibility = 'hidden'
username_chars.style.visibility = 'hidden'
pass_confirmation.style.visibility = 'hidden'
pass_chars.style.visibility = 'hidden'
repass_confirmation.style.visibility = 'hidden'
email_confirmation.style.visibility = 'hidden'
</script>
</body>

Array.from(document.getElementsByClassName("form_input")).forEach(
function(element, index, array) {
alert(element.innerHTML)
}
);
this will alert you of those elements

Building array in javascript

I'm trying to build an array in javascript from user input on my HTML form. It seems the array is building fine until it gets to the .push, I then get an error
employeeid undefined
, even though I know it's being populated and I can see this when I run debug mode.
HTML
<div class="wel" align="left">
<form class="form-signin">
<p>
<input type="text" class="form-control" id="EmployeeID" name="EmployeeID" placeholder="EmployeeID" required="" autofocus="" />
</p>
<p>
<input type="text" class="form-control" id="fullname" name="fullname" placeholder="FullName" required="" autofocus="" />
</p>
<p>
<input type="text" class="form-control" id="username" name="username" placeholder="UserName" required="" autofocus="" />
</p>
<p>
<input type="email" class="form-control" id="Email" name="Email" placeholder="Email" required="" autofocus="" />
</p>
<p>
<input type="password" class="form-control" id="Password" name="Password" placeholder="password" required="" autofocus="" />
</p>
<p>
<input type="password" class="form-control" id="Password1" name="ConfirmPassword" placeholder="password" required="" autofocus="" />
</p>
<a id='subButton' class="btn btn-primary btn-lg" style="vertical-align: bottom">submit</a>
</form>
</div
javascript
$(document)
.ready(function() {
var arrayDetails = new Array();
var holdingArray = new Array();
function newEntry(employeeId, fullname, username, email, password) {
this.employeeId = employeeId;
this.fullname = fullname;
this.username = username;
this.email = email;
this.Password = password;
}
$("#subButton")
.click(function () {
debugger;
var success = true;
var password = document.getElementById("Password");
var password1 = document.getElementById("Password1");
if (password.value !== password1.value)
{
alert("Password do not match");
}
else
{
var employeeIdEntered = document.getElementById("EmployeeID").value;
if (employeeIdEntered === "") {
success = false;
}
var fullnameentered = document.getElementById("fullname").value;
if (fullnameentered === "") {
success = false;
}
var usernameEntered = document.getElementById("username").value;
if (usernameEntered === "") {
success = false;
}
var emailEntered = document.getElementById("Email").value;
if (emailEntered === "") {
success = false;
}
var passwordEnterned = document.getElementById("Password").value;
if (passwordEnterned === "") {
success = false;
}
var entry = newEntry(employeeIdEntered,
fullnameentered,
usernameEntered,
emailEntered,
passwordEnterned);
arrayDetails.push(entry);
};
if (success)
{
sendToController();
} else
{
alert("");
}
});

Your newEntry() function is missing a return statement. Don't add the attributes to this, do instead a
function newEntry(employeeId, fullname, username, email, password) {
var res = {};
res.employeeId = employeeId;
res.fullname = fullname;
res.username = username;
res.email = email;
res.Password = password;
return res;
}

javascript: submit button pulls all values from the textboxes and displays them in a p tag

So what I am trying to do here is when the submit button is clicked pull all of the values from the textboxes and display them in a p tag that I have on my html page. I have been tring to figure this out for days. Can somebody let me know what I am doing wrong?
/* JavaScript */
$("#submit").click(function(){
var doc = $("#doctorate").val()
var Name = $("#first_name").val();
var Last = $("#last_name").val();
var T = Doc + " "+ Name + " " + Last
break
var Certs = $("#certs").val()
break
var Title = $("#title").val()
break
var Department = $("#department").val()
break
var Numb = $("#number").val()
break
var Web = $("#website").val()
break
var Ema = $("#email").val()
document.getElementById('output').innerHTML = T;
})
HTML unchanged

The big problem I see is that you keep assigning the same thing to your output. Try something like this (reduced for brevity):
function myOut() {
var output = document.getElementById("certs").value;
output = output + document.getElementById("title").value;
if (certs != null) {
document.getElementById("output").innerHTML = output;
}
}
<input type="text" id="certs" />
<input type="text" id="title" />
<p id="output"></p>
<button onclick="myOut()">
Sub
</button>

Here you can try this one.
var role = document.getElementById("role").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var doctorate = document.getElementById("doctorate").value;
var certs = document.getElementById("certs").value;
var title = document.getElementById("title").value;
var department = document.getElementById("department").value;
var number = document.getElementById("number").value;
var website = document.getElementById("website").value;
var email = document.getElementById("email").value;
var output = document.getElementById("output").value;
$("#submit").click(function(){
var N = $("#first_name").val();
var L = $("#last_name").val();
var T = N + " " + L;
if (doctorate.checked) {
document.getElementById('output').innerHTML = T;
}
if (first_name != null) {
document.getElementById('output').innerHTML = T;
}
if (last_name != null) {
document.getElementById('output').innerHTML = T;
}
if (certs != null) {
document.getElementById('output').innerHTML = T;
}
if (title != null) {
document.getElementById('output').innerHTML = T;
}
if (department != null) {
document.getElementById('output').innerHTML = T;
}
if (number != null) {
document.getElementById('output').innerHTML = T;
}
if (website != null) {
document.getElementById('output').innerHTML = T;
}
if (email != null) {
document.getElementById('output').innerHTML = T;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset id="role">
<legend>My Role</legend>
<label for="faculty">
<input type="radio" name="role" id="faculty" value="faculty" />
Faculty
</label>
<label for="staff">
<input type="radio" name="role" id="staff" value="staff" />
Staff
</label>
</fieldset>
<fieldset id="userinformation">
<legend>User Information</legend>
<label for="doctorate">
Doctorate?
<input type ="checkbox" id="doctorate" value="" />
</label>
<label>
First Name:
<input type="text" name="name" id="first_name" required />
</label>
<label>
Last Name:
<input type="text" name="name" id="last_name" required />
</label>
<label>
Certifications:
<input type="text" name="cert" id="certs" />
</label>
<label>
Title:
<input type="text" name="title" id="title" required />
</label>
<label>
Department:
<select id="department" required>
<option disabled selected value>-Select a Department-</option>
<option>School of Information Technology</option>
<option>Mathematics</option>
<option>English</option>
<option>History</option>
<option>Natural Sciences</option>
<option>Psychology</option>
<option>School of Health Sciences</option>
</select>
</label>
<label>
Primary Phone #:
<input type="tel" name="number" id="number" placeholder="444-123-1234" pattern="^\d{3}-\d{3}-\d{4}$"/>
</label>
<label>
Email:
<input type="email" name="email" id="email" placeholder="JDoe#example.com" required />
<span id="err3"></span>
</label>
<label>
Website:
<input type="text" name="website" id="website" placeholder="http//:www.example" pattern="https?://.+" />
</label>
</fieldset>
<fieldset id = "results">
<p id="output"></p>
</fieldset>
<fieldset id="submit_button">
<input type="button" id="submit" value="submit" />
</fieldset>