Liste de choix

uuu jbkbbkjb
Javascript

Bonsoir je suis vraiment un débutant je souhaite avoir une solution à ça :
J'ai deux page html une configuration. Html et index. Html

Je souhaite dans la page configuration
Une liste deroulante qui fait un choix entre image ou couleur. Si un utilisateur sélectionné image des input radio pour des image appâter et qu'il puisse choisir une image et quand il enregistre le fond de la page index prend l'image si il choisir couleur alors une Platte couleur apparaît il choisis une couleur il enregistre alors le fond de la page index prend la couleur

Je vous remercie

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

Entourez votre code pour bien le mettre en forme

Ce que je veux

Décrivez ici ce que vous cherchez à obtenir

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

4 réponses

Defy

Tu a deja fait un morceau de code pour ca ou pas? parceque sans code on ne peut pas t'aider.

cattleyas10

salut les images viennent d'ou celle que l'utilisateur importe ou des images déjà présente sur le site ??

uuu jbkbbkjb
Auteur

dans un dossier img en local

uuu jbkbbkjb
Auteur

j'ai deux page html : configure.html et index.html

dans configure.html j'ai un bouton valider et un select qui me permer de choisir entre fond ou color

<div class="row motif">
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="1" />
<img src="./img/background-1.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="2" checked />
<img src="./img/background-2.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="3" />
<img src="./img/background-3.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="4" />
<img src="./img/background-4.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="5" />
<img src="./img/background-5.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="6" />
<img src="./img/background-6.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="7" />
<img src="./img/background-7.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="8" />
<img src="./img/background-8.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="9" />
<img src="./img/background-9.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="10" />
<img src="./img/background-10.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="11" />
<img src="./img/background-11.jpg"
class="background-choice">
</label>
</div>
<div class="col-md-3">
<label>
<input type="radio" name="configuration[backgroundMotif]" value="12" />
<img src="./img/background-12.jpg" class="background-choice">
</label>
</div>
</div>
<div class="col-md-2 color">
<label>Couleur de fond</label>
<span style="color: red" title="Champ obligatoire">*</span>
<input id="backgroundColor" class="form-control" value="#ff8000" type="color" readonly name="configuration[backgroundColor]">
</div>
<div class="col-md-8">
<div class="row">
<button type="submit" id="submit" class="btn btn-lg btn-primary btn" data-text="save">Enregistrer</button>
<a href="index.html" class="btn btn-lg btn-warning" data-text="cancel">Annuler</a>
</div>
</div>

j'ai un fichier configure.js : qui comporte ce code : pour gérer le chois

function backgroundHandler() {
var $backgroundType = $("#configuration_backgroundType");
$(".motif, .color").hide();
$("." + $backgroundType.val()).show();
}

$("#configuration_backgroundType").change(function () {
backgroundHandler();
});

backgroundHandler();

$("#configure").submit(function (event) {
submitConfForm();
window.location.href = "index.html";
event.preventDefault();
});

dans un autre fichier prayer.js j'ai ça :

init: function () {

this.setBackgroundColor();

},

setBackgroundColor: function () {
if (prayer.confData.backgroundType === 'color') {
$("body").css("backgroundColor", prayer.confData.backgroundColor);
}

if (prayer.confData.backgroundType === 'motif') {
$("body").css("backgroundImage", 'url("./img/background-' + prayer.confData.backgroundMotif + '.jpg")');
}
},

mon probléme c'est que quand l'utilisateur choisi une color et qu'il choisi la couleur et qu'il valide rien ne se passe sur le fichier index.html et la meme chose si il choisi une images

comment je peut résoudre svp merci