J'essaie de créer un site Web avec un bouton d'ajout qui permet au client de dupliquer le formulaire. Tout en faisant cela, je perds la fonctionnalité d'option cacher/montrer qui existe en raison de la duplication. (ifYes et ifNo divs, il faut montrer en fonction de la sélection du client)Fournir du contenu pour un div avec un nom d'identification différent
Mon problème réside dans la variable 'Valu' dans mon JavaScript ou je suppose.
Voici un extrait de mon code:
HTML:
<select id="ValuType" name="ValuType" onchange="priceAndCheck()">
<option disabled="disabled" selected="selected">Type of Property</option>
<option id="Apartment" value="Apartment">Apartment</option>
<option id="Building" value="Building">Building</option>
<option id="Farm" value="Farm">Farm</option>
<option id="House" value="House">House</option>
<option id="Land" value="Land">Land</option>
</select>
<div id="ifYes" class="ifYes">
...ifYes content comes here...
</div>
<div id="ifNo" class="ifNo">
...ifNo content comes here...
</div>
JavaScript:
function yesnoCheck() {
var Valu = document.getElementById("ValuType").value;
if (Valu == 'Apartment' || Valu == 'Farm' || Valu == 'Land') {
document.getElementById('ifYes').style.height = '250px';
document.getElementById('ifYes').style.display = 'block';
document.getElementById('ifYes').style.transition = 'all 1s ease 0.59s';
document.getElementById('ifNo').style.height = '0px';
document.getElementById('ifNo').style.overflow = 'hidden';
document.getElementById('ifNo').style.transition = '0.55s';
}
else if (Valu == 'Building' || Valu == 'House') {
document.getElementById('ifNo').style.height = '250px';
document.getElementById('ifNo').style.display = 'block';
document.getElementById('ifNo').style.transition = 'all 1s ease 0.59s';
document.getElementById('ifYes').style.height = '0px';
document.getElementById('ifYes').style.overflow = 'hidden';
document.getElementById('ifYes').style.transition = '0.55s';
}
else {
document.getElementById('ifYes').style.overflow = 'hidden';
document.getElementById('ifNo').style.overflow = 'hidden';
}
}
function providePrice() {
var a = document.getElementById("Region").value;
var b = document.getElementById("ValuReq").value;
var c = document.getElementById("ValuType").value;
var d = document.getElementById("Express").value;
var e = 25;
if (a=="Region1" && b=="Bank" && c=="Apartment" && d=="Yes")
{
var x = 200 + e;
document.getElementById("price").innerHTML = "Price: OMR " + x;
}
else if (a=="Region1" && b=="Bank" && c=="Apartment" && d=="No")
{
var x = 200;
document.getElementById("price").innerHTML = "Price: OMR " + x;
}
else if (a=="Region1" && b=="Bank" && c=="Building" && d=="Yes")
{
var x = 350 + e;
document.getElementById("price").innerHTML = "Price: OMR " + x;
}
...
...
...
else
{
document.getElementById("price").innerHTML = "Price:"
}
function getValue() {
if (document.getElementById("Express").checked) {
document.getElementById("Express").value = "Yes";
} else {
document.getElementById("Express").value = "No";
}
}
function priceAndCheck(){
yesnoCheck();
providePrice();
}
Code Explication:
Chaque fois qu'un client remplit le formulaire et et sélectionne certaines options, il devrait permettre le div ifYes ou ifNo pour apparaître et prix à remplir. (Prix connecté à plus d'un champ,) Je le fais en utilisant les noms div et cela fonctionne parfaitement. Cependant, lors du clonage de la forme, je ne suis pas en mesure de générer les divs ifYes et ifNo pour toutes les nouvelles formes clonées.
Là où je crois que les problèmes se situent dans sont dans les domaines suivants:
- mes
divdenominations sont constants (exactement le même dans toutes les formes clonés), qui est l'un des problèmes - appel
priceAndCheck()fonction qui appelle deux fonctionsyesnoCheck()etprovidePrice()qui me donne besoin de changer toutes les fonctions si je commence à appeler un élément (par exemplefunction test(selectElement)- Essayé [la solution de Sam Apostel] [1] et n'a pas pu voir les options avec tout mon codage disponible - Le
divqui est cloné a un nom différentidmais tous les autresdivsau sein de la même nommant
vous serais reconnaissant de l'aide sur ce qui est la meilleure façon de traiter cette question.
où et quand vous appelez 'fonction yesnoCheck()'? –
@irshadjm Désolé, j'ai oublié que j'appelle deux fonctions quand je change l'option. onchange = "priceAndCheck()" a la fonction yesnoCheck() dedans. –
vous rencontrez des problèmes car une fois que votre formulaire est dupliqué, vous perdrez la fonctionnalité d'obtention d'objet en utilisant id comme maintenant vous avez plusieurs éléments avec le même id, ce qui n'est pas autorisé, dans ce cas vous obtiendrez toujours la référence du dernier élément essayer d'y accéder par ID, je vous suggère de mettre à jour votre logique pour obtenir un élément par classe. –