Tweet
Bonjour à tous !
J'ai trouvé un petit script fort sympathique qui me permet de préremplir les champs de formulaire automatiquement en fonction du code postal ou de la ville.
J'ai donc inséré ce script sur une simple page html et il fonctionne à merveille.
Mais je n'arrive pas à l'intégrer dans un article de joomla. quelqun serait-il me dire comment faire ?
Voici le script dans une page html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.7.3/themes/base/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post">
<input name="cp" id="cp" type="text" placeholder="CP">
<input name="ville" id="ville" type="text" placeholder="Ville">
<input name="adresse" id="adresse" type="text" placeholder="Adresse">
<script>
$("#cp").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
data: { q: request.term },
dataType: "json",
success: function (data) {
var postcodes = [];
response($.map(data.features, function (item) {
// Ici on est obligé d'ajouter les CP dans un array pour ne pas avoir plusieurs fois le même
if ($.inArray(item.properties.postcode, postcodes) == -1) {
postcodes.push(item.properties.postcode);
return { label: item.properties.postcode + " - " + item.properties.city,
city: item.properties.city,
value: item.properties.postcode
};
}
}));
}
});
},
// On remplit aussi la ville
select: function(event, ui) {
$('#ville').val(ui.item.city);
}
});
$("#ville").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://api-adresse.data.gouv.fr/search/?city="+$("input[name='ville']").val(),
data: { q: request.term },
dataType: "json",
success: function (data) {
var cities = [];
response($.map(data.features, function (item) {
// Ici on est obligé d'ajouter les villes dans un array pour ne pas avoir plusieurs fois la même
if ($.inArray(item.properties.postcode, cities) == -1) {
cities.push(item.properties.postcode);
return { label: item.properties.postcode + " - " + item.properties.city,
postcode: item.properties.postcode,
value: item.properties.city
};
}
}));
}
});
},
// On remplit aussi le CP
select: function(event, ui) {
$('#cp').val(ui.item.postcode);
}
});
$("#adresse").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
data: { q: request.term },
dataType: "json",
success: function (data) {
response($.map(data.features, function (item) {
return { label: item.properties.name, value: item.properties.name};
}));
}
});
}
});
</script>
</form>
</body>
Merci de votre aide !
J'ai trouvé un petit script fort sympathique qui me permet de préremplir les champs de formulaire automatiquement en fonction du code postal ou de la ville.
J'ai donc inséré ce script sur une simple page html et il fonctionne à merveille.
Mais je n'arrive pas à l'intégrer dans un article de joomla. quelqun serait-il me dire comment faire ?
Voici le script dans une page html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.7.3/themes/base/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post">
<input name="cp" id="cp" type="text" placeholder="CP">
<input name="ville" id="ville" type="text" placeholder="Ville">
<input name="adresse" id="adresse" type="text" placeholder="Adresse">
<script>
$("#cp").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
data: { q: request.term },
dataType: "json",
success: function (data) {
var postcodes = [];
response($.map(data.features, function (item) {
// Ici on est obligé d'ajouter les CP dans un array pour ne pas avoir plusieurs fois le même
if ($.inArray(item.properties.postcode, postcodes) == -1) {
postcodes.push(item.properties.postcode);
return { label: item.properties.postcode + " - " + item.properties.city,
city: item.properties.city,
value: item.properties.postcode
};
}
}));
}
});
},
// On remplit aussi la ville
select: function(event, ui) {
$('#ville').val(ui.item.city);
}
});
$("#ville").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://api-adresse.data.gouv.fr/search/?city="+$("input[name='ville']").val(),
data: { q: request.term },
dataType: "json",
success: function (data) {
var cities = [];
response($.map(data.features, function (item) {
// Ici on est obligé d'ajouter les villes dans un array pour ne pas avoir plusieurs fois la même
if ($.inArray(item.properties.postcode, cities) == -1) {
cities.push(item.properties.postcode);
return { label: item.properties.postcode + " - " + item.properties.city,
postcode: item.properties.postcode,
value: item.properties.city
};
}
}));
}
});
},
// On remplit aussi le CP
select: function(event, ui) {
$('#cp').val(ui.item.postcode);
}
});
$("#adresse").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://api-adresse.data.gouv.fr/search/?postcode="+$("input[name='cp']").val(),
data: { q: request.term },
dataType: "json",
success: function (data) {
response($.map(data.features, function (item) {
return { label: item.properties.name, value: item.properties.name};
}));
}
});
}
});
</script>
</form>
</body>
Merci de votre aide !
Commentaire