输入时，正在删除输入框文本

On enter input box text is being deleted

本文关键字：输入 文本 删除      更新时间：2023-09-26

我有一个使用引导程序构建的表单，在输入时它通过 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>

Track_User功能

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
}

如果需要，开发页面的网址：http://crew-cut.com.au/bootstrap/loltimeplayed/index.php

对不起，网址很长

更改：

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

这将做到。不再通过表单提交，而是使用跟踪按钮启动 Ajax 调用。问题在于提交表格。它只是将表单发布到任何地方，而从未调用过ajax请求。现在它确实触发了 ajax 调用。

相关文章：