Javascript 输入框中的文本将被删除

我有一个使用bootstrap构建的表单，在输入时，它通过ajax提交数据，有时可以工作，有时输入框变空，什么也没有发生

            <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>

如果需要，开发页面的url：

抱歉，url更改太长：

        <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>

奥西
NA
欧盟
欧
跟踪

您考虑过使用jquery吗？这是一个几乎所有人都同意的非常有用的框架，有助于使通过ajax提交表单变得非常简单。如果你感兴趣，我可以通过发布代码来帮助你做你需要的事情。你的HTTP请求代码对我来说很好。你能给我们看一下Update_help_Output（）函数的代码示例吗？@dewd通过普通JavaScript提交ajax非常简单。这里的问题是使用表单。OP需要使用

e.preventDefault（）

阻止默认操作。将

e

作为参数添加到

Track\u用户

function@Mouser可以说这很容易。我不同意。在javascript中有许多事情比XHR更容易。@dewd jQuery允许轻松的DOM操作。然而，

querySelector

和

queryselectoral

使得用普通JavaScript操作DOM变得非常容易。如果我试着用我自己的话解释一下你做了什么，谢谢你，这似乎很有效。Ur使用jquery将操作绑定到submit按钮，当单击submit按钮（或点击enter…（不确定这将如何考虑enter））时，调用函数。谢谢你的帮助，只是想更好地了解你是如何修复的：）@crashkid。这不是使用jquery，而是使用纯javascript。脚本在类为

.form inline

的第一个表单中，使用

.btn

类向第一个元素添加单击事件侦听器。单击

.btn

时，调用

Track\u User

函数，并向其传递事件详细信息：

e

。您可以将e重命名为更可读的名称，如event或evt，但e是常见的

e.preventDefault（）

停止默认表单提交，允许XHR调用。当调用成功返回时，

Update\u help\u Output

被调用，其中包含从服务器传入的数据rtnd。@crashkid关于输入，您可以更改事件侦听器以侦听表单提交：

submit

，而不是单击按钮<代码>文档.querySelector（“.form inline”）.querySelector（“.btn”）.addEventListener（“单击”，跟踪用户，false）变成

document.querySelector（“.forminline”）.addEventListener（“提交”，跟踪用户，false）嘿，dewd，我使用了mousers代码，它适用于enter，这有点奇怪，哈哈，好吧，所以它根本不是javascript，我只是将一个侦听器绑定到一个元素。谢谢，我现在理解得相当清楚：）@crashkid。这个解决方案是纯JavaScript。没有使用外部库。JavaScript可以将侦听器绑定到DOM元素。
        <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>