Grab Location from Input Fields and Pass it on the MapBox Map

I'm creating a website that grabs the location input (Origin & Destination) and relays it to the map which in turn would show the path using the MapBox API. So the problem I'm facing here is that how do I grab the input values and convert them to coordinates and show them on the map. Later on, the program will calculate the distance between the two endpoints and put it out there.

Here's my HTML code which contains the input fields:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta charset="utf-8">
  <title>Distance btw Cities App</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="styling.css" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

  <div class="jumbotron">
    <div class="container-fluid">
      <h1>Distance between cities App.</h1>
      <p>Our app will help you calculate travelling distances.</p>
      <form class="form-horizontal">
        <div id='geocoder-container' class="form-group">
          <label for="from" class="col-xs-2 control-label">From:</label>
          <div class="col-xs-10">
            <input type="text" id="from" placeholder="Origin" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <label for="to" class="col-xs-2 control-label">To:</label>
          <div class="col-xs-10">
            <input type="text" id="to" placeholder="Destination" class="form-control">
          </div>
        </div>
      </form>

      <div class="col-xs-offset-2 col-xs-10">
        <button class="btn btn-info btn-lg" onclick="calcRoute();">Submit</button>
      </div>
    </div>
    <div class="container-fluid">
      <div id="googleMap">

      </div>
      <div id="output">

      </div>
    </div>

  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  <script
    src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
  <link rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css">
  <!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->

  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
  <script src="javascript.js"></script>
</body>

</html>

And here's my JS code:

mapboxgl.accessToken = 'Token';


// Get Current Location
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, { enableHighAccuracy: true })


// Live Coordinates
function successLocation(position) {
    setupMap([position.coords.longitude, position.coords.latitude])
}

// Default Coordinates if location fails
function errorLocation() {
    setupMap([38.189980, 24.023176])
}
// Create Map
function setupMap(center) {
    var map = new mapboxgl.Map({
        container: 'googleMap',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: center,
        zoom: 12,
    })
    // Navigation Controls
    const nav = new mapboxgl.NavigationControl()
    map.addControl(nav)

    var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
    document.getElementById('from').appendChild(geocoder.onAdd(map))
}

Also, I dunno how to tell the program which input is my origin and which one is the destination. On following this code, . This is really messed up cuz I'm not able to make my input fields as my location finder. Neither this location will reflect on the map. Please someone help me solve this issue, It's really frustrating.