button click is not working in jquery

Question

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.

$("btnplus").click(function () { need to be $("#btnplus").click(function () {. TYPO? — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Feb 28, 2017 at 7:06
i cannot see any accepted answer .. i am accepting it again. :) — waqar ahmed somra
– 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
– Death-is-the-real-truth, Commented Feb 28, 2017 at 11:51

Death-is-the-real-truth · Accepted Answer · 2017-02-28 10:50:51Z

3

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);
        });

edited Feb 28, 2017 at 10:50

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered Feb 28, 2017 at 7:07

tRx

8131 gold badge15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carsten Løvbo Andersen · Accepted Answer · 2017-02-28 07:08:55Z

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.com/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>

Rakesh Yadav · Accepted Answer · 2017-02-28 07:11:40Z

3

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);
});

answered Feb 28, 2017 at 7:11

Rakesh Yadav

1137 bronze badges

Comments

Adam · Accepted Answer · 2017-02-28 07:14:03Z

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.com/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>

Death-is-the-real-truth · Accepted Answer · 2017-02-28 10:50:40Z

3

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

edited Feb 28, 2017 at 10:50

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered Feb 28, 2017 at 7:08

Vikram Singh

9821 gold badge10 silver badges26 bronze badges

Comments

Death-is-the-real-truth · Accepted Answer · 2017-02-28 10:52:20Z

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.com/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>

Jason Lemrond · Accepted Answer · 2017-02-28 07:09:29Z

2

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);

answered Feb 28, 2017 at 7:09

Jason Lemrond

4172 silver badges9 bronze badges

Comments

Kaushar Alam · Accepted Answer · 2017-02-28 07:19:54Z

2

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);
    });

answered Feb 28, 2017 at 7:19

Kaushar Alam

735 bronze badges

1 Comment

Kaushar Alam Over a year ago

Just replace the code it will work, you have missed some id ,

RAUSHAN KUMAR · Accepted Answer · 2017-02-28 07:17:09Z

1

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
});

answered Feb 28, 2017 at 7:17

RAUSHAN KUMAR

6,0345 gold badges37 silver badges70 bronze badges

Collectives™ on Stack Overflow

button click is not working in jquery

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related