Please see attachment of user view, followed by html code relevant to 3 areas and my first poor attempt at writing my very first usable script.
What Im trying to achieve is when a user selects a value/bedroom quantity,a price relating to however many rooms they`ve choosen appears in the EPC total price input field, then if the user also wants a floorplan, they check this box and this adds another £20 to the outstanding bedroom total which is already being displayed. The user then ends up seeing a total price with both the bedroom value and IF selected the checkbox values added together. Hope that makes sense.
<div>
<label for=“bedrooms”>Number of bedrooms</label>
<select name=“bedrooms” id=“bedrooms” onclick=“main()”>
<option value=“1”>1</option>
<option value=“2”>2</option>
<option value=“3”>3</option>
<option value=“4”>4</option>
<option value=“5”>5</option>
<option value=“6”>6</option>
<option value=“7 or More”>7 or More</option>
</select>
</div>
<div>
<label for=“floorplan”>Tick if a floorplan is required</label>
<input type=“checkbox” name=“floorplan” id=“floorplan” value=“Yes”/>
</div>
<div>
<label for=“output”>EPC Total Price</label>
<input class=“output” name=“output” id=“output”/>
</div>
Please dont laugh at my first javascript attempt, I know its not looking too healthy…
Using the above values in select area, 1-4 = 37.50 /// 5-6 = 45 /// 7 or more = Price on agreement.
price = new Array(37.50,37.50,37.50,37.50,45,45,“Price on agreement”);
floor = new Array(20);
bedrooms = document.getElementById(“bedrooms”).value;
floorplan = document.getElementById(“floorplan”).value;
output = document.getElementById(“output”);
var first = “”;
var second = “”;
function main(){
first += bedrooms[price];
second += floorplan[floor];
var total = first + second;
output.innerHTML = total.value;
}
Once again any help will be greatly appreciated