I want to be able to read in numbers put in form text fields before the form is submited

Question

I have a website that lets you create brackets by guessing scores and the winning teams for the world cup. Right now you just have to fill in the bracket by hand. I would like it to where it would be reading what they are inserting while they are inserting the scores and make some calculations to be able to put the winners for the groups instead of them having to calculate the points by hand. The scores and winners are inserted in input fields or select fields. Is there anyway to do that using php, html, or anything. I just cannot find anything and am looking for someone to just lead me in the right direction. Examples of my code will be put below just to help. Thanks!

Clarification: Okay so lets say the teams selects Brazil for the firstGroupA. How can i put that in a variable to use later before they actually submit. Like when you fill out a bracket and u choose a team it moves to next round automatically. Something like that. I want to grab the information to make the bracket filling more userfriendly but I dont know how to grab it until they click the submit button.

  <td><input type="number" name="home16" min="0" max="9" required>
-<input type="number" name="away16" min="0" max="9" required></td>

  <td><select name="firstGroupA" required>
  <option value="">Select</option>
  <option value="Brazil">Brazil</option>
  <option value="Croatia">Croatia</option>
  <option value="Mexico">Mexico</option>
  <option value="Cameroon">Cameroon</option>
  </select></td>

Answer 1

I think you want something like this:

document.getElementById('my_select')
  .addEventListener('change', function () {
    document.getElementById('from_sel').value = this.value;
}, false);

See this fiddle

Or, using JQuery:

$('#my_select').on('change', function() {
  $('#from_sel').val(this.value);
});

Fiddle with JQuery

Answer 2

Use JavaScript or jQuery to get the values.

For example, if you want to get the value from the firstGroupA using the select's onchange event:

<td><select id="firstGroupA" onchange="jsMethod()" name="firstGroupA" required>
<option value="">Select</option>
<option value="Brazil">Brazil</option>
<option value="Croatia">Croatia</option>
<option value="Mexico">Mexico</option>
<option value="Cameroon">Cameroon</option>
</select></td>

JavaScript:

function jsMethod(){
    var firstGroupA = document.getElementById("firstGroupA");
    var firstGroupVal = firstGroupA.options[firstGroupA.selectedIndex].value;

    // do whatever you want with the value in firstGroupVal
}