How to show elements from form in html

Question

I have this:

     <form>
     Input name: <input type="text"/><br/>
     Input last name: <input type="text"/><br/>
     Your age: <input type="number"/><br/>
     Your points: <input type="number"/><br/>
     Overral: <input type="number"/><br/>
     <button type="submit">Submit</button><br>`

What I want to do, so, as you can so i have button sumbit, and I want when i click it to make numbered list of my form. Something like this:

1. Mark
2. Williams ....

Answer 1

Try this, it takes all inputs and appends into a list

$(document).ready(function(){
$('button').click(function(e){
e.preventDefault();
$('#a').append('<ol><li>'+$("#name").val()+'</li><li>'+$("#last").val()+'</li><li>'+$("#age").val()+'</li><li>'+$("#points").val()+'</li><li>'+$("#over").val()+'</li></ol>')
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
     Input name: <input type="text" id="name"/><br/>
     Input last name: <input type="text" id="last"/><br/>
     Your age: <input type="number" id="age"/><br/>
     Your points: <input type="number" id="points"/><br/>
     Overral: <input type="number" id="over"/><br/>
     <button type="submit">Submit</button><br></form>
     <div id="a"></div>

Answer 2

At the risk of overly complicated and wordy to newcomers (particularly when compared to 5 lines of jQuery) - here's a plain JavaScript approach with a bit of explanation as to what's going on at every step.

Adding people to the list:

<!-- 
  1 ) Add an ID so we can identify the form
-->
<form id="person-add">
     Input name: <input type="text"/><br/>
     Input last name: <input type="text"/><br/>
     Your age: <input type="number"/><br/>
     Your points: <input type="number"/><br/>
     Overral: <input type="number"/><br/>
     <!-- 2 ) Add an onclick event to run a JavaScript function.-->
     <button onclick="addPerson(event);">Submit</button><br>
</form>

<!-- 3 ) Add the list we'll add people to. This has an ID as well.-->
<ol id="person-list">
</ol>

<!-- 4 ) Then the JavaScript function that activates when the button is pressed. -->
<script type="text/javascript">

  // It accepts a parameter, 'event' - this is passed from the onclick event.
  function addPerson(event){
    // By default, clicking a button in a form submits the form to the server.
    // Since we're using JavaScript to create the list, we'll prevent that from happening.
    event.preventDefault();

    // Using querySelectorAll, we get all the input fields within '#person-add'
    var person_fields = document.querySelectorAll('#person-add input');

    // Here we get the #person-list element we'll be adding the person to.
    var person_list = document.getElementById('person-list');
    
    // Create a list item for the person, but don't put it in the list yet.
    var person = document.createElement('li');
    
    // Loop through the fields and add their value list item.
    for( var field = 0; field < person_fields.length; field++ ) {
    
      // Add the value of the field to the person list item.
      person.innerText += person_fields[field].value;
      
      // If the next item isn't the end of the list, we'll add a space.
      if( field + 1 !== person_fields.length ){
        person.innerText += ' ';
      }
    }
    
    // Lastly, add the person to the person_list.
    person_list.appendChild(person);
  }
</script>

---

Sorting the list by high score:

If you wanted to extend upon this, one thing to do would be to add field names to the input fields, so you could build an array of people and then list them in order of who has the most points.

I'm not going to tell you exactly how to implement this - but here's a few hints to get you started:

Setting field names

<input type="number" name="points"/>

Creating a list of people

// Create an empty list.
var people = [];

Creating an object to respresent a person

// Create an empty object.
var person = {}; 

Adding values to an object

// Add a property matching the field name with the field value.
person[ person_fields[field].getAttribute('name') ] = person_fields[field].value;

Adding an object to a list

// Add the person to the list of people.
people.push( person );

Draw the list in order of highest points to lowest
Check out Mozilla docs for a breakdown of JavaScript for array sorting.

function updateList(){

  // Here we get the #person-list element we'll be adding the person to.
  var person_list = document.getElementById('person-list');

  // Empty the person_list as we're redrawing it in order.
  person_list.innerHTML = '';

  // Sort the people list by highest points.
  people.sort( function( person1, person2 ) {
    return person2.points - person1.points;
  } );

  // Loop through the fields and add their value list item.
  for( var position in people ) {

    // Create a list item for the person, but don't put it in the list yet.
    var list_item = document.createElement('li');

    // Get the person.
    var person = people[position];

    // Add the value of the field to the person list item.
    list_item.innerText += person.firstname + ' ' + person.lastname;
    list_item.innerText += ' ( ' + person.points + ' points )';

    // Add the list item to the person_list.
    person_list.appendChild(list_item);

  }

}

Hope this helps!