jQuery Display Form Text Input

Question

I'm pretty new to jQuery so I'm a little confused on how to make this work. Basically I have a form that has input fields such as Student ID, Student Name, Student DOB, and Student Age. Once the user has input their information into the fields, I want the input to show below the form in the format:
Student ID: (input value)
Student Name: (input value), etc.

This is my code so far:

$(document).ready(function() {
$("#submitButton").on("click", function(e) {
  e.preventDefault();
  var input = $("#q1").val()
  $("#show").html(input)
})

$("#submitButton").on("click", function(e) {
    e.preventDefault();
    var input = $("#q2").val()
    $("#show").html(input)
  }) });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form">
<table>
    <tr>
      <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br>
      <label>Student Name <input id="q2" type="text" placeholder="required"/>*</label><br>
      <label>Student DOB <input id="q3" type="datetime" placeholder="required"/>*</label><br>
      <label>Student Age <input id="q4" type="number" placeholder="required"/>*</label><br>
    </tr>
</table>
<button type="button" id="submitButton" class="button">Login</button>
<span id="show"></span>

As of right now, when you press "submit" only the second value entered is shown, not the first. I eventually need to have all fields showing on the bottom, but the second value is currently on the left side of the form. Any help/guidance is appreciated!

Answer 1

You just need a single handler for the click, and use that one function to put together the string you desire from both values. Here's one way of writing it:

$(document).ready(function() {
  $("#submitButton").on("click", function(e) {
    e.preventDefault();
    var studentId = $("#q1").val();
    var studentName = $("#q2").val();
    $("#show").html(`Student ID: ${studentId}, Student Name: ${studentName}`);
  });
});

Note that the construct in that last line, with the backticks and ${...} syntax, is a template literal, which will not work if you have to run this on really old browsers like IE. (You really should't have to do that in this day and age, but since you're still using var to declare variables I feel I might have to cover this case.) In that case you can easily recreate the same string, it'll just be a little less nice to read, as "Student ID: " + studentId + ", Student Name: " + studentName.

Answer 2

I set the span as a div, and I just loop through the input elements and grab the label text and input value. You also only need a single click handler.

$("#submitButton").click(function(){
  output = "";
  $("input").each(function(){
    output += $(this).parent("label").text().replace("*","") + ": " + $(this).val() + "<br>";
  });
  
  $("#show").html(output);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<table>
    <tr>
      <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br>
      <label>Student Name <input id="q2" type="text" placeholder="required"/>*</label><br>
      <label>Student DOB <input id="q3" type="datetime" placeholder="required"/>*</label><br>
      <label>Student Age <input id="q4" type="number" placeholder="required"/>*</label><br>
    </tr>
</table>
<button type="button" id="submitButton" class="button">Login</button>
<div id="show"></div>

Answer 3

What you are doing is creating two separate event handlers for the form submit, one for the id and one for the name. So, on form submit, two functions will be called and step on each other's feet, one of them canceling the action of the other.

You should group your functionality into one event handler.

Now, a clean way I'd highly recommend to get the form input values is to assign names to the inputs, and use the form's onsubmit event, e.g. for the age:

<input id="q4" type="number" placeholder="required" name="age"/>

And then, inside the form's onsubmit event handler, the form is accessible by the keyword this as I explain in the snippet's comments. This way, the entered age can be accessed via this.age.value. Pretty neat!

Putting things together:

$("#form").on("submit", function(e) {
  //prevent form submit from refreshing the page or redirecting
  e.preventDefault();
  
  //get form input values
  //inside an event handler, `this` points to the element 
  //to which the event handler is attached (in this case the form)
  
  
  //dispplay results in span
  $("#show").html(`Name: ${this.name.value}, DOB: ${this.dob.value}, Age: ${this.age.value}`);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<table>
    <tr>
      <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br>
      <label>Student Name <input id="q2" type="text" placeholder="required" name="name"/>*</label><br>
      <label>Student DOB <input id="q3" type="datetime" placeholder="required" name="dob"/>*</label><br>
      <label>Student Age <input id="q4" type="number" placeholder="required" name="age"/>*</label><br>
    </tr>
</table>
<button type="submit" id="submitButton" class="button">Login</button>
<span id="show"></span>

Answer 4

Problem is resolved

$( document ).ready(function() {
   $("#submitButton").on("click", function(e) {
    e.preventDefault();
    var input = 'Std ID -  '+$("#q1").val() +'</br> Std ID -  '+$("#q2").val() +'</br> Std ID -  '+$("#q3").val() +'</br>Std ID -  '+$("#q4").val() +'</br>';
  
    $("#show").html(input);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<div>Table</div>
<table>
    <tr>
      <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br>
      <label>Student Name <input id="q2" type="text" placeholder="required"/>*</label><br>
      <label>Student DOB <input id="q3" type="datetime" placeholder="required"/>*</label><br>
      <label>Student Age <input id="q4" type="number" placeholder="required"/>*</label><br>
    </tr>
</table>
<button type="button" id="submitButton" class="button">Login</button>
<br><br>
<span id="show"></span>

Answer 5

it's so easy to do with just javascript (and a little css - the real hard part)

In a form, the names attributes are used to directly identify each elements (no need to put IDs)

you also have to use the submit event by the <form> itself (not the button)

const myForm  = document.getElementById('my-form')
  ,   showDiv = document.getElementById('show-div')
  ;

myForm.onsubmit = e =>
  {
  e.preventDefault()
  showDiv.innerHTML = 
    `Student Id..: ${myForm.Student_Id.value} <br>
     Student Name: ${myForm.Student_Name.value} <br>
     Student DOB.: ${myForm.Student_DOB.value} <br>
     Student Age.: ${myForm.Student_Age.value} `
  }
  
// suggestion for init
myForm.Student_DOB.valueAsDate = new Date()  // today!
myForm.Student_Age.valueAsNumber = 20       // less or more...

label {
  width:   20em;
  display: block;
  float:   left;
  clear:   both;
  line-height: 2.7em;
  }
label:before {
  content: '*';
  float:   right;
  }
input {
  float: right;
  margin-right: .4em;
  width: 12em;
  height: 1.2em;
  margin: .3em;
  }
button {
  display: block;
  float:   left;
  clear:   both;
  margin-top: 1em;
  }
#show-div {
  float:       left;
  clear:       both;
  margin:      1em;
  font-family: monospace;
  }

<form id="my-form">
  <label>
    Student Id 
    <input name="Student_Id" type="text" placeholder="required"/> 
  </label>
  <label>
    Student Name
    <input name="Student_Name" type="text" placeholder="required"/>
  </label>
  <label>
    Student DOB
    <input name="Student_DOB" type="date" placeholder="required"/>
  </label>
  <label>
    Student Age
    <input name="Student_Age" type="number" placeholder="required"/>
  </label>
  <button type="submit">Login</button>
</form>
  
<div id="show-div"></div>