1 pièce(s) jointe(s)
[AJAX] Sélection et changement balise input
Bonjour, j'espère m'être mis dans le bon forum !
Je suis en train de faire un projet de covoiturage et j'ai un petit problème.
Lors de l'enregistrement d'un trajet, l'utilisateur doit saisir un nom de ville, pour que celui-ci soit sans faute, le site lui propose, après quelques caractères saisis, des possibles réponse. Jusque là, tout va bien ! J'aimerais que dans l'affichage en dessous, je puisse sélectionner le résultat voulu et qu'il change aussi le contenu de la balise input du dessus ("renn").
Le visuel actuel :
Pièce jointe 139392
Merci beaucoup de l'attention que vous apporterez à mon sujet !
Voici les codes !
get.jsp :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <%@page language="java" import ="java.sql.*" %>
<%
String name=request.getParameter("count");
String buffer="<div>";
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection("jdbc:mysql://localhost/covoitiutrage","root","");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("Select * from villes where Ville LIKE '"+name+"%'");
while(rs.next()){
buffer=buffer+rs.getString(1)+"<br>";
}
buffer=buffer+"</div>";
response.getWriter().println(buffer);
%> |
auto.jsp :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| var xmlHttp
var xmlHttp
function showState(str){
if (typeof XMLHttpRequest != "undefined"){
xmlHttp= new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp==null){
alert ("Browser does not support XMLHTTP Request")
return
}
var url="get.jsp";
url += "?count=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("country").innerHTML=xmlHttp.responseText;
}
} |
Code:
1
2
3
4
5
6
7
| <body>
<input id="name" type="text" name="name" onkeyup="showState(this.value)">
<br>
<div id='country'>
</div>
</body>
</html> |
