[英]On enter input box text is being deleted
我有一个使用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>
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调用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.