CODEWITHSUNDEEP
javascripthtmlcheckbox
nothon2
nothon2

Reputation: 11

How to add the value only if checkbox is checked

I need some help with homework. So I'm trying to make a simple calculator to estimate the price of a lawn aeration. I've added a function and input boxes to find out the area of the person's lawn so that I can give them an estimate, and that works great. I would like to add some checkboxes so that they can give some more information about their lawn that I can use in the estimate. I have 3 checkboxes: If they have a dog, if they have sprinklers everywhere, and if their yard is on a hill. I would like to just add 5 dollars to the price for each box that they check.

The problem I'm running into is that when I set the attribute for each textbox to 5, the function adds 5 dollars even if the box is still unchecked. I'm not sure how to make the value of the variable 0 if the box is unchecked, and 5 if the box is checked. Can this be done with just Javascript and HTML?

The code I'm working with is:

<div class="section1">
    <h2>Get an estimate</h2>
    <p>We'll need a little information for this estimate. The estimate is <strong>not</strong> the final price.</p>
    <p><label for="front">What is the area of your front yard? (square feet)</label>
        <input id="front" type="number"></p>
    <p><label for="back">What is the area of your back yard? (square feet)</label>
        <input id="back" type="number"></p>

    <form>
        <input type="checkbox" id="dog" value="5"> I have a dog
        <br>
        <input type="checkbox" id="sprinklers" value="5"> I have sprinklers everywhere
        <br>
        <input type="checkbox" id="hill" value="5"> My yard is on a hill
    </form>

    <p><button onclick="estimate()">Submit for estimate</button></p>
    <p id="message"></p>
</div>

and

function estimate(){
    var canine;
    var water;
    var terrain;

    canine = document.getElementById("dog").value
    water = document.getElementById("sprinklers").value
    terrain = document.getElementById("hill").value

    var area1;
    var area2;
    var price;

    area1 = document.getElementById("front").value;
    area2 = document.getElementById("back").value;
    price = ((parseFloat(area1)+parseFloat(area2))*.015)+parseFloat(canine)+parseFloat(water)+parseFloat(terrain);

    document.getElementById("message").innerHTML="We will aerate your lawn for around "+price.toFixed(1)+" dollars.";
}

If you took the time to read through this and help me with a solution, thank you so much.

Upvotes: 0

Views: 583

Answers (4)

user5657712
user5657712

Reputation: 1

function estimate() { var count = $("[type='checkbox']:checked").length * 5; var area1; var area2; var price; area1 = document.getElementById("front").value; area2 = document.getElementById("back").value; price = ((parseFloat(area1) + parseFloat(area2)) * .015) + count; $("#message").html("We will aerate your lawn for around " + price + " dollars."); } 

<h2>Get an estimate</h2>

<p>We'll need a little information for this estimate. The estimate is <strong>not</strong> the final price.</p>


<p><label for="front">What is the area of your front yard? (square feet)</label>
    <input id="front" type="number"></p>

<p><label for="back">What is the area of your back yard? (square feet)</label>
<input id="back" type="number"></p>

<form>

    <input type="checkbox" id="dog"  > I have a dog
    <br>

    <input type="checkbox" id="sprinklers" > I have sprinklers everywhere
    <br>

    <input type="checkbox" id="hill" > My yard is on a hill
</form>

<p><button onclick="estimate()">Submit for estimate</button></p>

<p id="message"></p>

Upvotes: 0

Nero
Nero

Reputation: 265

u can check if checkbox is checked or not using :-

document.getElementById('checkboxid').checked;

and add pricing accordingly. just change

canine = document.getElementById("dog").value
water = document.getElementById("sprinklers").value
terrain = document.getElementById("hill").value

to:

canine = document.getElementById("dog").checked ? document.getElementById("dog").value : 0
water = document.getElementById("sprinklers").checked ? document.getElementById("sprinklers").value : 0
terrain = document.getElementById("hill").checked ? document.getElementById("hill").value : 0

Upvotes: 0

Suchit kumar
Suchit kumar

Reputation: 11859

Before getting the value you need to check whether the check box is checked or not.:

function estimate(){
    var canine=0;

    var water=0;

    var terrain=0;
    if (document.getElementById('dog').checked){
    canine = document.getElementById("dog").value;
    }
    if (document.getElementById('sprinklers').checked){
    water = document.getElementById("sprinklers").value;
    }
    if (document.getElementById('hill').checked){
    terrain = document.getElementById("hill").value;
    }

    var area1=0;

    var area2=0;

    var price=0;

    area1 = document.getElementById("front").value;

    area2 = document.getElementById("back").value;

    price = ((parseFloat(area1)+parseFloat(area2))*.015)+parseFloat(canine)+parseFloat(water)+parseFloat(terrain);

    document.getElementById("message").innerHTML="We will aerate your lawn for around "+price.toFixed(1)+" dollars.";

}
<div class="section1">

    <h2>Get an estimate</h2>

    <p>We'll need a little information for this estimate. The estimate is <strong>not</strong> the final price.</p>


    <p><label for="front">What is the area of your front yard? (square feet)</label>
        <input id="front" type="number"></p>

    <p><label for="back">What is the area of your back yard? (square feet)</label>
    <input id="back" type="number"></p>

    <form>
        <input type="checkbox" id="dog" value="5"> I have a dog
        <br>
        <input type="checkbox" id="sprinklers" value="5"> I have sprinklers everywhere
        <br>
        <input type="checkbox" id="hill" value="5"> My yard is on a hill
    </form>

    <p><button onclick="estimate()">Submit for estimate</button></p>

    <p id="message"></p>

</div>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68393

Created this fiddle for you. you missed out on checking if the checkbox is checked or not by doing simply document.getElementById("dog").checked

function estimate(){
    var canine;

    var water;

    var terrain;

    canine = document.getElementById("dog").value;
    canine = document.getElementById("dog").checked ? canine : 0;

    water = document.getElementById("sprinklers").value
    water = document.getElementById("sprinklers").checked ? water : 0;

    terrain = document.getElementById("hill").value
    terrain = document.getElementById("hill").checked ? terrain : 0;

    var area1;

    var area2;

    var price;

    area1 = document.getElementById("front").value;

    area2 = document.getElementById("back").value;

    price = ((parseFloat(area1)+parseFloat(area2))*.015)+parseFloat(canine)+parseFloat(water)+parseFloat(terrain);

    document.getElementById("message").innerHTML="We will aerate your lawn for around "+price.toFixed(1)+" dollars.";

}

Upvotes: 0

Related Questions