CODEWITHSUNDEEP
javascripthtmltextarea
ameulilug
ameulilug

Reputation: 3

Add 3 html text box and put sum in third using javascript function and onclick button

I dont know if my question is clear but i want to add these 3 value (the value is changed by 4 different radio button) 

    <input id="somme1" name ="txtRep1" type="text" value="" />
    <input id="somme2" name ="txtRep2" type="text" value="" />
    <input id="somme3" name ="txtRep3" type="text" value="" />

And i want to take the sum of these three and throw it in sommeTotal when i press the button btnSomme

   <fieldset id="section3">
            <input type="button" name="btnSomme" id="btn1" value="Somme" onclick="sommeTotal.value = nb4.value" />
            <input id="sommeTtl" name ="sommeTotal" type="text" value="" />
        </fieldset>

here is the javascript function

    function fctSomme();
 {
    var nb1 = document.getElementById("somme1").value;
    var nb2 = document.getElementById("somme2").value;      
    var nb3 = document.getElementById("somme3").value;  
    var nb4 = document.getElementById("sommeTtl").value;    
 nb4 = nb1 + nb2 + nb3
 document.getElementById("sommeTtl").value = nb4;
}

here is the full code for interrested

            <section>
        <h2>5.3</h2>
    <form name="frm3">
        <fieldset id="section1">
            <input name ="btnrad1" type ="radio" value="10" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="15" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="20" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="25" onclick="txtRep1.value = this.value" />
            <input name ="btnrad1" type ="radio" value="30" onclick="txtRep1.value = this.value" />
            <input id="somme1" name ="txtRep1" type="text" value="" />
        </fieldset>
        <fieldset id="section2">
            <input name ="btnrad2" type ="radio" value="10" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="15" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="20" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="25" onclick="txtRep2.value = this.value" />
            <input name ="btnrad2" type ="radio" value="30" onclick="txtRep2.value = this.value" />
            <input id="somme2" name ="txtRep2" type="text" value="" />
        </fieldset>
        <fieldset id="section3">
            <input name ="btnrad3" type ="radio" value="10" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="15" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="20" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="25" onclick="txtRep3.value = this.value" />
            <input name ="btnrad3" type ="radio" value="30" onclick="txtRep3.value = this.value" />
            <input id="somme3" name ="txtRep3" type="text" value="" />
        </fieldset> 
        <fieldset id="section3">
            <input type="button" name="btnSomme" id="btn1" value="Somme" onclick="sommeTotal.value = nb4.value" />
            <input id="sommeTtl" name ="sommeTotal" type="text" value="" />
        </fieldset>             
        </form>     

        </section>

Upvotes: 0

Views: 1827

Answers (1)

Roberto
Roberto

Reputation: 1944

Do you want to add when the inputs are changed? On the click of a button? On a simple inspection, your nb1+nb2+nb3 will return something like "101520" as these are being treated as strings instead of integers. Try something converting them to integers using parseInt, like so:

function fctSomme(){
    var nb1 = parseInt(document.getElementById("somme1").value, 10);
    var nb2 = parseInt(document.getElementById("somme2").value, 10);      
    var nb3 = parseInt(document.getElementById("somme3").value, 10);  
    var nb4 = document.getElementById("sommeTtl").value;    
    nb4.value = nb1 + nb2 + nb3
}

And a button like: <button type="button" onclick="fctSome">Show total</button>

Full code here: http://jsfiddle.net/sbp9E/3/

Upvotes: 1

Related Questions