使用按钮提交Ajax
[英]Ajax submit using a button
问题描述
I am using the code from this page: http://www.w3schools.com/ajax/ajax_database.asp to build my ajax solution. 
我正在使用此页面中的代码： http ： //www.w3schools.com/ajax/ajax_database.asp来构建我的ajax解决方案。
I am getting there, but this code use onchange , I would like to use a button to submit, instead. 我到了那里，但是这段代码使用onchange ，我想用一个按钮来提交。
One of my tries: 我的一个尝试：
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
<input name="Submit1" type="submit" onclick="showCustomer(this.value)" />
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
3 个解决方案
解决方案1
1 已采纳 2014-03-11 20:02:25
onchange is an event on a select element. onchange是select元素的事件。
Just tie that event into a button element. 只需将该事件绑定到按钮元素即可。
<button onclick="showCustomer()">Submit</button>
and then get the desired customer in the showCustomer() method 然后在showCustomer（）方法中获取所需的客户
function showCustomer()
{
var str = document.getElementById("customers").value;
.
.
.
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
解决方案2
1 2014-03-11 20:11:08
they have the event attached to the select so you can just move it to the form instead 他们将事件附加到选择，因此您可以将其移动到表单
<form action="" onsubmit="showCustomer(document.getElementById('customers')).value);return false">
<select id="customers" name="customers">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
<input type="submit"/>
</form>
Edit: 编辑：
Oh, and add a submit button 哦，并添加一个提交按钮
解决方案3
0 2014-03-11 20:11:08
Something like that : 像这样的东西：
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer()
{
var xmlhttp;
var str = document.getElementById("customers").value;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<select name="customers">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
<input name="Submit1" type="button" onclick="showCustomer()" />
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
But you should try Jquery to avoid verbose syntax document.getElementById 但是你应该尝试使用Jquery来避免冗长的语法document.getElementById
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.