Hi guys i am new to jquery.

I am trying a simple addition in jquery. i have two input fields and in jquery i want to add numbers in these field. but add button is not triggering.

JQuery

<script type="text/javascript">
    $(document).ready(function () {
        //toggle div start
        $("#btn_do").click(function () {
            $(".div_chat").animate({
                width: "toggle"
            });
        });
        // toggle div end

        //Add button click
        $("btnplus").click(function () {
            alert("sdfdf");
            var val1 = $("#lblvalue1").val();
            var val2 = $("#lblvalue2").val();
            var added = parseInt( val1 )+ parseInt( val2);
            alert(added2);
            $("lbltext").val(added);
        });
        //add button click end

    });
</script>

HTML

 <form id="form1" runat="server">
    <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
    <div>
        <asp:Label ID="lblLabel" runat="server"></asp:Label>
        <button id="btn_do" type="button">toggle</button>
    </div>
    <div></div>
    <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
        <label id="lblvalue1">Value 1</label>
        <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <br />
        <label id="lblvalue2">Value 2</label>
        <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <button id="btnplus" type="button" > ADD</button>
        <br />
        <asp:Label ID="lbltext" runat="server">tesst</asp:Label>
    </div>
</form>

anyone? thanks in advance.

Hi guys i am new to jquery.

I am trying a simple addition in jquery. i have two input fields and in jquery i want to add numbers in these field. but add button is not triggering.

JQuery

<script type="text/javascript">
    $(document).ready(function () {
        //toggle div start
        $("#btn_do").click(function () {
            $(".div_chat").animate({
                width: "toggle"
            });
        });
        // toggle div end

        //Add button click
        $("btnplus").click(function () {
            alert("sdfdf");
            var val1 = $("#lblvalue1").val();
            var val2 = $("#lblvalue2").val();
            var added = parseInt( val1 )+ parseInt( val2);
            alert(added2);
            $("lbltext").val(added);
        });
        //add button click end

    });
</script>

HTML

 <form id="form1" runat="server">
    <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
    <div>
        <asp:Label ID="lblLabel" runat="server"></asp:Label>
        <button id="btn_do" type="button">toggle</button>
    </div>
    <div></div>
    <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
        <label id="lblvalue1">Value 1</label>
        <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <br />
        <label id="lblvalue2">Value 2</label>
        <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <button id="btnplus" type="button" > ADD</button>
        <br />
        <asp:Label ID="lbltext" runat="server">tesst</asp:Label>
    </div>
</form>

anyone? thanks in advance.

• javascript
• jquery
• html

• 1 $("btnplus").click(function () { need to be $("#btnplus").click(function () {. TYPO? – Death-is-the-real-truth Commented Feb 28, 2017 at 7:06
• uffffffff... what a silly mistake. thanks – waqar ahmed somra Commented Feb 28, 2017 at 7:08
• 1 can you please add as an answer so i can accept. thanks – waqar ahmed somra Commented Feb 28, 2017 at 7:08
• i cannot see any accepted answer .. i am accepting it again. :) – waqar ahmed somra Commented Feb 28, 2017 at 11:36
• waqar ahmed somra as you asked, i have added my answer . Please have a look – Death-is-the-real-truth Commented Feb 28, 2017 at 11:51

9 Answers 9

You forgot # in your code. Try this:

$("#btnplus").click(function () {
            alert("sdfdf");
            var val1 = $("#lblvalue1").val();
            var val2 = $("#lblvalue2").val();
            var added = parseInt( val1 )+ parseInt( val2);
            alert(added);
            $("#lbltext").val(added);
        });

You were missing # from $("btn_do")

Also, var val1 = $("#lblvalue1").val(); is wrong since, you have no Id with lblvalue1, it should be $("#value1") Same goes for value2

last "typeo" is alert(added2); since added2 dont exist

$(document).ready(function() {
  //toggle div start
  $("#btn_do").click(function() {
    $(".div_chat").animate({
      width: "toggle"
    });
  });
  // toggle div end

  //Add button click
  $("#btnplus").click(function() {
    alert("sdfdf");
    var val1 = $("#value1").val();
    var val2 = $("#value2").val();
    var added = (parseInt(val1) + parseInt(val2));
    alert(added);
    $("lbltext").val(added);
  });
  //add button click end

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
  <div>
    <asp:Label ID="lblLabel" runat="server"></asp:Label>
    <button id="btn_do" type="button">toggle</button>
  </div>
  <div></div>
  <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
    <label id="lblvalue1">Value 1</label>
    <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <br />
    <label id="lblvalue2">Value 2</label>
    <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <button id="btnplus" type="button"> ADD</button>
    <br />
    <asp:Label ID="lbltext" runat="server">tesst</asp:Label>
  </div>
</form>

You need to use # to apply click event.

$("#btnplus").click(function () {
    alert("sdfdf");
    var val1 = $("#lblvalue1").val();
    var val2 = $("#lblvalue2").val();
    var added = parseInt( val1 )+ parseInt( val2);
    alert(added2);
    $("lbltext").val(added);
});

There were multiple issues preventing your code working correctly. I've fixed all these in the snippet below. Summary:

• Your button has an ID of btnplus. To reference IDs in jQuery queries, you need to use the # prefix, i.e. $("#btnplus")
• your variable added2 is not defined. This should probably be added.
• val() should be called on the input tag, i.e. #value1, not the label tag
• best practice is to call parseInt(x, 10) rather than parseInt()
• ID in label should be id lowercase.
• $("lbltext") should be $("#lbltext")

//toggle div start
$("#btn_do").click(function() {
  $(".div_chat").animate({
    width: "toggle"
  });
});
// toggle div end

//Add button click
$("#btnplus").click(function() {
  alert("sdfdf");
  var val1 = $("#value1").val();
  var val2 = $("#value2").val();
  var added = parseInt(val1, 10) + parseInt(val2, 10);
  alert(added);
  $("#lbltext").text(added);
});
//add button click end

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
  <div>
    <asp:Label ID="lblLabel" runat="server"></asp:Label>
    <button id="btn_do" type="button">toggle</button>
  </div>
  <div></div>
  <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
    <label id="lblvalue1">Value 1</label>
    <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <br />
    <label id="lblvalue2">Value 2</label>
    <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
    <button id="btnplus" type="button"> ADD</button>
    <br />
    <asp:Label id="lbltext" runat="server">tesst</asp:Label>
  </div>
</form>

$("#btnplus").click(function () {
        alert("sdfdf");
        var val1 = $("#lblvalue1").val();
        var val2 = $("#lblvalue2").val();
        var added = parseInt( val1 )+ parseInt( val2);
        alert(added);
        $("#lbltext").val(added);
    });

You forgot id selector there (#).do like below

$("#btnplus").click(function () {

Also change that is needed there:-

$("#btnplus").click(function () {
    var val1 = $("#value1").val();//change of id
    var val2 = $("#value2").val();//change of id
    var added = parseInt( val1 )+ parseInt( val2);
    alert(added);//change of variable name
   $("span[id$='lbltext']").text(added);
});

Working example:-

$(document).ready(function () {
    //toggle div start
    $("#btn_do").click(function () {
        $(".div_chat").animate({
            width: "toggle"
        });
    });
    // toggle div end

    //Add button click
    $("#btnplus").click(function () {
        var val1 = $("#value1").val();
        var val2 = $("#value2").val();
        var added = parseInt( val1 )+ parseInt( val2);
        alert(added);
       $("span[id$='lbltext1']").text(added);
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form id="form1" runat="server">
    <noscript>
        <div>
            You must enable javascript to continue.
        </div>
    </noscript>
    <div>
        <asp:Label ID="lblLabel" runat="server"></asp:Label>
        <button id="btn_do" type="button">toggle</button>
    </div>
    <div></div>
    <div id="divchatID" class="div_chat" style="height: 500px; width: 500px; background-color: #82adf2; display: none; padding:5px;">
        <label id="lblvalue1">Value 1</label>
        <input id="value1" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <br />
        <label id="lblvalue2">Value 2</label>
        <input id="value2" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />
        <button id="btnplus" type="button" > ADD</button>
        <br />
        <!--<asp:Label id="lbltext" runat="server">tesst</asp:Label>-->
        <span id = "lbltext1"></span>
    </div>
</form>

Make sure you add in your id and class selectors when using jQuery. ('#' and '.' respectively).

$("#btnplus").click(function () {
    // code
});

Also, missing one here:

("#lbltext").val(added);

replace the code,
$("#btnplus").click(function () {
        alert("sdfdf");
        var val1 = $("#value1").val();
        alert(val1);
        var val2 = $("#value2").val();
        var added = parseInt( val1 )+ parseInt( val2);
        alert(added);
        $("lbltext").val(added);
    });

You given btnplus as id of button. And you are using it as a selector so you have to use # symbol before it to targeting this button as

$("#btnplus").click(function () {
    // Your code goes here
});