On enter input box text is being deleted

Question

I have a form that i built using bootstrap, on enter it submits data via ajax, sometimes this works and other times the input box just goes empty and nothing happens.

            <form class="form-inline" onsubmit="return Track_User()">
              <div class="form-group">
                <input type="text" class="form-control input-md" placeholder="Summoner Name" id="Summoner_Name">
                <select class="form-control" id="Server_Name">
                    <option value="oce">OCE</option>
                    <option value="na">NA</option>
                    <option value="eue">EUE</option>
                    <option value="EUW">EUW</option>
                </select>
              </div> 
              <button type="submit" class="btn btn-default btn-md">Track</button>
              <div id="Helpful_Output"></div>
            </form>

Track_User function

function Track_User(){
    // XML request for check summoner name
    Summoner_Name = document.getElementById('Summoner_Name').value;
    Server_Name = document.getElementById('Server_Name').value;

    // Retrieves data about members in the group using ajax
    var xmlhttp = new XMLHttpRequest();
    var url = "check_summoner_name.php?Summoner_Name=" + Summoner_Name + "&Server_Name=" + Server_Name;

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            Update_Helpful_Output(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    // Run php script to confirm a few things
    // 1. Do we already know this summoner name + server?
    // 2. If we don't know the summoner, look it up, if false, return error message that summoner name is invalid
    // 3. If summoner name is valid, check if we already know this summoner id + server_name combination
    // 4. If we don't, create a new user
    // 5. -- Finally we redirect to the graph page
}

If needed url of development page: http://crew-cut.com.au/bootstrap/loltimeplayed/index.php

Sorry for long url

Answer 1

Changes:

        <form class="form-inline" onsubmit="Track_User()">
          <div class="form-group">
            <input type="text" class="form-control input-md" placeholder="Summoner Name" id="Summoner_Name">
            <select class="form-control" id="Server_Name">
                <option value="oce">OCE</option>
                <option value="na">NA</option>
                <option value="eue">EUE</option>
                <option value="EUW">EUW</option>
            </select>
          </div> 
          <button type="submit" class="btn btn-default btn-md">Track</button>
          <div id="Helpful_Output"></div>
        </form>

 function Track_User(e){ e.preventDefault(); // XML request for check summoner name Summoner_Name = document.getElementById('Summoner_Name').value; Server_Name = document.getElementById('Server_Name').value; // Retrieves data about members in the group using ajax var xmlhttp = new XMLHttpRequest(); var url = "check_summoner_name.php?Summoner_Name=" + Summoner_Name + "&Server_Name=" + Server_Name; xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { Update_Helpful_Output(xmlhttp.responseText); } else if (xmlhttp.readyState == 4 && xmlhttp.status == 404) { alert("Yeah I'm working, but I returned a 404.") } } xmlhttp.open("GET", url, true); xmlhttp.send(); } document.querySelector(".form-inline").querySelector(".btn").addEventListener("click", Track_User, false); 

  <form class="form-inline" > <div class="form-group"> <input type="text" class="form-control input-md" placeholder="Summoner Name" id="Summoner_Name"> <select class="form-control" id="Server_Name"> <option value="oce">OCE</option> <option value="na">NA</option> <option value="eue">EUE</option> <option value="EUW">EUW</option> </select> </div> <button type="submit" class="btn btn-default btn-md">Track</button> <div id="Helpful_Output"></div> </form> 

This will do it. No longer submitting via form, but using the track button to start the Ajax call. The problem lay in submitting the form. It just posted the form to nowhere without ever calling the ajax request. Now it does fire the ajax call.