I have made some updates to your code, check this fiddle for the revised version Ajax call on button click

Please test if the changes meet your requirements.

Below are the modifications I implemented in your code:

• The event "keydown" has been replaced with "keyup" event to capture key press values correctly.
• I divided the function calls between search button click event and input key event for clarity.
• An ID has been assigned to the search input field to access its value during "requestData()" function execution.
• If there is an "input type = 'button'" inside a form, clicking the button will submit the form.
• Added "event.preventDefault()" as the first line in "requestData()" to prevent automatic form submission when pressing Enter.
• Included a paragraph to display result statistics.
• Changed the line from document.myForm.innerHTML += to

  document.getElementById("results_stats").innerHTML

  .

Hope these updates prove useful.

HTML :-

<div class="container-wrapper">
<header>
  <h1> Wikipedia Viewer </h1>
  <form action="" name="myForm">
    <input type="text" name="search" id="txt_search" /><input type="button" name="searchBtn" value="Search"/>
    <br>
    <input type="button" name="btnRandom" class="random" value="Random Article"/>
  <p id="results_stats"></p>
  </form>
</header>

<div class="container">
    <ul id="list"></ul>
</div>

JAVASCRIPT :-

    var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=10&origin=*&search=';
var inputSearch = document.myForm.search;
var searchBtn = document.myForm.searchBtn;
var list = document.getElementById("list");
var random = document.getElementsByClassName('random')[0];

random.addEventListener("click" , function(){
  window.open("https://en.wikipedia.org/wiki/Special:Random");
});

function getDataFromInputBox(e){
  console.log("Value Entered"+inputStr);

  if ( e.keyCode === 13 ) {
      requestData(e);
  }
}
function requestData(e) {
  e.preventDefault();
  console.log(e.target);
    var inputStr = document.getElementById("txt_search").value;
  if(inputStr != ""){
    console.log(inputStr);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    if ( request.readyState === 4 ) {
      if ( request.status === 200 ) {
        var dataObj = JSON.parse(request.responseText);
        var titles = dataObj[1];
        var descriptions = dataObj[2];
        var links = dataObj[3];
        document.getElementById("results_stats").innerHTML = "<h2><span>" + links.length + "</span> results for \"" + "<span>" + inputStr + "</span>" +"\" </h2>"; 
        list.innerHTML = "";
        for ( var i = 0; i < titles.length; i++ ) {
          var li = "<li><a target='_blank' href=" + links[i] + ">" + titles[i] + "</a></li>";
          list.innerHTML += li;
        }
      }
      else {
        console.log("Server responded with following error code : " + request.status);
      }
    }
  };
  request.open("GET" , url + inputStr);
  request.send(null);
  //e.preventDefault(); 
  }
  else{
    document.getElementById("results_stats").innerHTML;
    list.innerHTML = "";
    alert("Enter a value");
  }
}

inputSearch.addEventListener("keyup" , getDataFromInputBox);
searchBtn.addEventListener("click" , requestData);
document.myForm.addEventListener("submit",requestData);

CSS :-

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS reset ends here */

body {
    font-size: 16px;
    font-family: 'Oxygen', sans-serif;

}

.container-wrapper {
    margin: 0 auto;
    text-align: center;
    height: 100vh;

}

header {
    /*background-color: #fc3e5b;*/
    padding: 80px 0;
}

header h1 {
    font-family: 'Anton', sans-serif; 
    font-size: 70px;
    padding: 30px 0 80px 0;
    color: #fc3e5b;
}

form input , form button {
    padding: 10px 8px;
    font-size: 22px;
    border: 1px solid #fc3e5b;
    outline: 0;
    display: inline;
    margin: 0;
}

form button {
    background-color: #fc3e5b;
    color: #fff;
}

h2 {
    font-size: 25px;
    margin-top: 32px;
}

h2 span {
    font-weight:bold;
    color: #fc3e5b;
}
.random {
    padding: 22px 7px;
    border-radius: 100%;
    margin: 20px 0 15px 0;
}

.random:hover {
    border: 5px solid #fc3e6b;
}

#list {
    width: 75%;
    margin: 0 auto;
}

#list li {
    padding: 16px 8px;
    background-color: #fc3e5b;
    margin: 12px 0;
    text-align: left;
    font-size: 22px;
}

#list li a {
    text-decoration: none;
    color: #fff;
}