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

Question

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

Answer 1

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>

Answer 2

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>