Bonjour tout le monde,
Je cherche à utiliser le js pour des listes déroulantes.
Je vous explique ce que je veux faire:
J'ai un formulaire de commande classique, avec une ligne qui contient :
un champs select (menu déroulant qui va chercher ses informations grace à une requete PHP)
part (un input type text)
HT (un input type text)
L'utilisateur doit avoir la possibilité de rajouter une ligne au formulaire (script js)
Je voudrais donc que les lignes rajoutées soient identiques à celle déjà présente sur le formulaire.
Mon problème c'est que j'ai bien un menu déroulant mais par défaut il est vide
Comment faire pour que ce menu soit rempli lui aussi ?
J'ai bien trouvé quelques scripts sur le net, mais je ne comprends pas tout.
Et surtout je n'y arrive pas..
Si vous pouviez m'aider à comprendre ce serait top.. merci d'avance
Voilà mon code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Techniques AJAX - Listes liées</title>
<script type="text/javascript" src="_scripts/oXHR.js"></script>
<script type="text/javascript">
<!--
function selectEditor(oElem) {
var xhr = getXMLHttpRequest();
var value = oElem.options[oElem.selectedIndex].value;
if(value != "none") {
if(xhr && xhr.readyState != 0) {
xhr.abort();
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
makeList(xhr.responseXML);
document.getElementById("loading").innerHTML = "<p>OK</p>";
} else if(xhr.readyState == 2 || xhr.readyState == 3) {
document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
}
}
xhr.open("POST", "domaines.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdEditor=" + value);
}
}
function makeList(oData) {
var oOptions = oData.getElementsByTagName("option");
var oSelect = document.getElementById("competence0");
var oSelect = document.getElementById("competence"+n+"");
oSelect.innerHTML = "";
for(var i=0,c=oOptions.length;i<c;i++) {
var oOption = document.createElement("option");
oOption.value = oOptions[i].getAttribute("value");
oSelect.appendChild(oOption);
oOption.innerHTML = oOptions[i].firstChild.nodeValue;
}
}
var n=0;
function ajout()
{
n++;
// sauvegarde des informations saisies
var tabQte = new Array();
var tabCompetence = new Array();
for (i=0;i<n;i++)
{
tabQte[i] = document.getElementById("qte"+i).value;
tabCompetence[i] = document.getElementById("competence"+i).value;
}
// ajout de la ligne
document.getElementById("frm").innerHTML +="<table class=\"type1\" style=\"width:700px;\"><tr><td>Spécialité ("+n+")<select name=\"competence"+n+"\" id=\"competence"+n+"\" value=\"oOption.value\" style=\"width:250px;\";/></select> <input type=\"text\" name=\"qte"+n+"\" id=\"qte"+n+"\" value=\"Part en %\" onchange=\"check();\"/> <input type=\"text\" name=\"ht"+n+"\" id=\"ht"+n+"\" value=\"Prix HT\" onchange=\"check();\"/></td></tr></table>";
// insertion des informations sauvegardees
for (i=0;i<n;i++)
{
document.getElementById("qte"+i).value = tabQte[i];
document.getElementById("competence"+i).value = tabCompetence[i];
document.getElementById("competence"+i).style.color='blue';
}
}
//-->
</script>
</head>
<body>
<fieldset>
<legend>Mes contacts</legend>
<div id="programBox">
<div id="loading"></div>
<div id="editors">
<select id="editorsSelect" onchange="makeList(this);">
<?php
mysql_connect('localhost', 'root', 'pass');
mysql_select_db('ma_db');
$query = mysql_query("SELECT * FROM contacts ORDER BY nom");
while($back = mysql_fetch_assoc($query)) {
echo "\t\t\t\t<option value=\"".$back["id"]."\">".$back["nom"]."</option>\n";
}
?>
</select>
</div><button type="button" onclick="ajout();">(+) Ajouter</button>
<div id="softwares">
<select id="softwaresSelect"></select>
</div>
<form name="frm" id="frm">
<select name="competence0" id="competence0">
<?php
mysql_connect('localhost', 'root', 'pass');
mysql_select_db('ma_db');
$query = mysql_query("SELECT * FROM domaine ORDER BY domaine_nom");
while($back = mysql_fetch_assoc($query)) {
echo "\t\t\t\t<option value=\"".$back["domaine_id"]."\">".$back["domaine_nom"]."</option>\n";
}
?>
</select>
<input type="texte" name="qte0" value="Part en %" id="qte0" onchange="check();" />
<input type="texte" name="ht0" value="Prix HT" id="ht0" onchange="check();" />
</form>
</div>
</fieldset>
</body>
</html>
requete XHR
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
