new!
|
|
|
 |
| > Dupliquer balises input et select |
[ Posté par toufik ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 25-06-2008 à 08:37 | 166 messages ]
Bonjour à tous,
Je viens vers vous car je bute sur le maniement de javascript et de php...
Je m'explique :
J'ai un formulaire d'ajout de produit et sur ce formulaire je souhaiterais intégrer une liste deroulante dynamique (les données proviennent de mysql) et un champ "valeur".
Par exemple, dans la liste deroulante il y aurait comme options prédéfinies: Taille, couleur, capacité, etc..
Si je clique sur Couleur, je devrais indiquer sur le champs "valeur" : noir, rouge, etc...
Jusque là, pas de problème.
Mon souci est qu'un produit (par exemple un disque dur) peut avoir plusieurs caractéristiques à la fois(dimension, capacité, etc)
j'aimerais donc pouvoir generer par un bouton "+" autant de balises select et input que mon produit non contient de caractéristiques.
J'ai trouvé sur le net un bout de code qui fonctionner très bien.
Le souci est que je n'arrive pas à avoir une liste deroulante dynamique provenant d'une bdd mysql.
Voici le code, si vous pouviez m'aider.
<script type="text/javascript">
function addInput()
{
var x = document.getElementById("inputs");
x.innerHTML += "Selectionnez un attribut : <select name='attribut'><option value='T'>Taille</option><option value='C'>Couleur</option></select> Valeur : <input type='text' name='valeur'><br/>";
}
</script>
Selectionnez un attribut : <select name="attribut">
<option value='T'>Taille</option>
<option value='C'>Couleur</option>
</select>
Valeur : <input name="valeur" type="text" />
<div id="inputs"></div>
<input type="button" onmousedown="addInput();" value="+"/>
Merci par avance.
|
|
|
[ Posté par guySk ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 25-06-2008 à 09:19 | 713 messages ]
Pour ton problème, une seule solution : AJAX.
Tu trouveras tout ce que tu as besoin de savoir sur le lien du menu à gauche:
<- par ici 
Le code devra être formater par php puis AJAX te permettra de récupérer la page ainsi formé et de l'afficher dans ton navigateur en utilisant le bout de code avec innerHTML.
________________
a'++'a
| [ Posté par toufik ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 25-06-2008 à 21:18 | 166 messages ]
guySk a dit
Pour ton problème, une seule solution : AJAX.
Tu trouveras tout ce que tu as besoin de savoir sur le lien du menu à gauche:
<- par ici
Le code devra être formater par php puis AJAX te permettra de récupérer la page ainsi formé et de l'afficher dans ton navigateur en utilisant le bout de code avec innerHTML. |
|
Merci pour ta réponse guySk.
Je vais y jeter un oeil, en espérant pouvoir tout comprendre.
| [ Posté par guySk ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 25-06-2008 à 23:01 | 713 messages ]
Si tu as un soucis ou besoin d'explication reviens par ici
________________
a'++'a
| [ Posté par toufik ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-06-2008 à 20:41 | 166 messages ]
guySk a dit
Si tu as un soucis ou besoin d'explication reviens par ici |
|
Je te prie de m'excuser guySk mais j'ai lu à plusieurs reprises divers tuto sur ajax et même ceux proposé par EJS mais je n'arrive pas à concocter ce fameux script.
Generer la liste deroulante via php je sais faire, la generation d'input je l'ai trouve via le script ci-dessus mais mixter le tout je ne sais pas faire malheureusement.
Si tu pouvais m'orienter.
Je t'en remercie.
| [ Posté par guySk ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-06-2008 à 21:08 | 713 messages ]
tu peux faire:
function affiche_input(inputType){
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("mainContent").style.overflow = "auto";
}
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
var method = "GET";
var filename = "url.php?input=" + inputType;
var data = null;
xhr_object.open(method, filename, true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4) {
var x = document.getElementById("inputs");
var tmp = xhr_object.responseText;
x.innerHTML += x.innerHTML + tmp;
}
}
if(method == "POST")
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr_object.send(data);
} |
|
avec url.php, le script qui va créé l'input à insérer et inputType la valeur pour généré l'input via la base de donnée.
________________
a'++'a
| [ Posté par toufik ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 26-06-2008 à 23:19 | 166 messages ]
Un grand merci à toi guySk.
Sans toi je n'y serais pas arrivé.
Maintenant je vais décortiquer ton code pour mieux comprendre cet ajax.
Merci
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
