I am trying to create a website with an add button that allows the client to duplicate the form. While doing that, I am losing the hide/show option functionality that is existing due to the duplication. ( ifYes and ifNo divs, one should show based on customer selection)
My issue lies in the variable 'Valu' in my JavaScript or so I assume.
Below is a snippet of my 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 Explanation:
Whenever a client fills the form and and selects certain options, it should allow the div ifYes or ifNo to show up and price to be populated. (Price connected to more than one field, ) I am doing this using the div names and it works perfectly. However, when cloning the form I am not able to generate the divs ifYes and ifNo for all the new cloned forms.
Where I believe the issues lie in are in the following:
div namings are constant (exactly the same in all cloned forms) which is one of the problemspriceAndCheck() function that calls two functions yesnoCheck() and providePrice() that makes me need to change all functions if I start calling an element (E.g. function test(selectElement) -- Tried [Sam Apostel's solution][1] and was unable to view the options as required with all my available coding.div that is cloned has a different id name but all the other divs within have the same namingWould be grateful for some help on what is the optimum way to deal with this issue.
After multiple testings and code edits, I came up with the below solution to my query where I utilize the class name for each cloned form, options become viewable, as required.
function yesnoCheck() {
var Valu ='';
var count = 0;
$('.ValuType').each(function() {
Valu = $(this).attr('id');
Valu = document.getElementById(Valu).value;
if (Valu == 'Apartment' || Valu == 'Farm' || Valu == 'Land') {
document.getElementsByClassName('Yes')[count].style.height = '30px';
document.getElementsByClassName('Yes')[count].style.display = 'block';
document.getElementsByClassName('Yes')[count].style.transition = 'all 1s ease 0.59s';
document.getElementsByClassName('No')[count].style.height = '0px';
document.getElementsByClassName('No')[count].style.overflow = 'hidden';
document.getElementsByClassName('No')[count].style.transition = '0.55s';
}
else if (Valu == 'Building' || Valu == 'House') {
document.getElementsByClassName('No')[count].style.height = '30px';
document.getElementsByClassName('No')[count].style.display = 'block';
document.getElementsByClassName('No')[count].style.transition = 'all 1s ease 0.59s';
document.getElementsByClassName('Yes')[count].style.height = '0px';
document.getElementsByClassName('Yes')[count].style.overflow = 'hidden';
document.getElementsByClassName('Yes')[count].style.transition = '0.55s';
}
else {
document.getElementsByClassName('Yes')[count].style.overflow = 'hidden';
document.getElementsByClassName('No')[count].style.overflow = 'hidden';
}
count++;
});
}
//define template
var template = $('#content:first').clone();
//define counter
var count = 0;
//add new section
$('body').on('click', '#repeat', function() {
var clone = template.clone();
//increment
count++;
//remove cross button div
clone.find('cross').removeAttr("#cross");
//update id of ifYes & ifNo
clone.find('.Yes').prop('id', 'ifYes' + count);
clone.find('.No').prop('id', 'ifNo' + count);
//loop through each input
var inputSection = clone.find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + count;
//update id
this.id = newId;
}).end()
//inject new section with animation
.appendTo('#content').hide()
.appendTo('#content').slideDown(500)
return false;
});
//remove section
$('#content').on('click', '.cross', function() {
//slide up section
$(this).parent().slideUp(500, function(){
//remove parent element (main section)
$(this).parent().child().empty();
return false;
});
return false;
});.Yes{
overflow: hidden;
height: 0;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.No{
overflow: hidden;
height: 0;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" id="cross" class="buttonImgTop cross">remove</button>
<div id="ValuWrapper">
<select id="ValuType" name="ValuType" class="ValuType" onchange="yesnoCheck()">
<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="Yes"> 'Yes' class text comes here </div>
<div id="ifNo" class="No"> 'No' class text comes here </div>
</div>
</div>
<button type="button" class="buttonImg" id="repeat">repeat</button>