Widget:MapData

<script> function updateTemplate() {

 var parameters = ;
 
 var selectedGame = document.getElementById("game").value;
 var size = document.getElementById("size").value;
 var p1Value = document.getElementById("p1").value;
 var p2Value = document.getElementById("p2").value;
 var apiValue = document.getElementById("api").value;

 var contentContainer = document.getElementById("dynamicContent");

 if (p1Value ===  || p2Value ===  || apiValue === ) { 
   alert('Please fill all fields')
   return
 }
 parameters = `|size=${size}|game=${selectedGame}|p1=${p1Value}|p2=${p2Value}|api=${apiValue}`
 
 // Use the selected template as a parameter in the parser function
 var parserFunction = "Template:MapData" + parameters + "";

 // Replace the content in the dynamic content container with the parsed template
  $.get(mw.util.wikiScript('api'), { action: 'parse', format: 'json', text: parserFunction }, function(data) {
   var parsedContent = data.parse.text['*'];
   contentContainer.innerHTML = parsedContent;

}); } </script>

<form>

   <select id='size'>
     <option value='team'>Team</option>
     <option value='solo'>Solo</option>
   </select>
   <select id='game'>
     <option value='Dota2'>Dota2</option>
   </select>

     <label for='p1'>P1</label>
     <input type="text" id="p1" placeholder="P1">

     <label for='p2'>P2</label>
     <input type="text" id="p2" placeholder="P2">

     <label for='api'>API ID</label>
     <input type="text" id="api" placeholder="API ID">

 </form>

<button style="align-self:center;" onclick="updateTemplate()">Search</button>