Call Javascript function using button OnClick event

Question

I have one button like

<asp:Button ID="btnfirstnext" TabIndex="1" runat="server" Text="Next" class="action-button" OnClick="btnfirstnext_Click" />

and I have javascript like

<script>
    $(function () {

        //jQuery time
        var current_fs, next_fs, previous_fs; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches


        $(".next1").click(function () {
            if (animating) return true;
            animating = true;

            current_fs = $(this).parent();
            next_fs = $(this).parent().next();

            //activate next step on progressbar using the index of next_fs
            $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

            //show the next fieldset
            next_fs.show();

            //hide the current fieldset with style
            current_fs.animate({ opacity: 0 }, {
                step: function (now, mx) {
                    //as the opacity of current_fs reduces to 0 - stored in "now"
                    //1. scale current_fs down to 80%
                    scale = 1 - (1 - now) * 0.2;
                    //2. bring next_fs from the right(50%)
                    left = (now * 50) + "%";
                    //3. increase opacity of next_fs to 1 as it moves in
                    opacity = 1 - now;
                    current_fs.css({ 'transform': 'scale(' + scale + ')' });
                    next_fs.css({ 'left': left, 'opacity': opacity });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                //this comes from the custom easing plugin
                easing: 'easeInOutBack'
              // $('btnfirstnext').trigger('click');

            });
        });

I want to call this javascript when I click on button please help me I have try like OnClientClick="javascript: return .next1;" but it not work and I also try class=".next1 action-button" with onclicentclick="return false;" and this is work but I don't want to use this because of some other problem .

Juat add class next1 in button and remove onclick event that js will run automatically as you already bind added on click function for next1 in js — Thorin
– Thorin, Commented May 7, 2016 at 12:55

Mostafiz · Accepted Answer · 2016-05-07 13:02:55Z

1

change your button id match with the click event id name next1 and remove OnClick="btnfirstnext_Click" from button

<asp:Button ID="next1" TabIndex="1" runat="server" Text="Next" class="action-button" />

and change your function parameter as bellow this will call this function

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

edited May 7, 2016 at 13:02

answered May 7, 2016 at 12:53

Mostafiz

7,3523 gold badges30 silver badges42 bronze badges

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

Comments

clab · Accepted Answer · 2016-05-07 14:36:26Z

0

You can try one of these solutions:

1) with function

<asp:Button TabIndex="1" runat="server" Text="Next" class="action-button" OnClick="javascript:doSomething()" />

<script type="text/javascript">
function doSomething() {
   //do something
}
</script>

2) with class (without dot before the class name in the button definition)

<asp:Button TabIndex="1" runat="server" Text="Next" class="action-button next" />

<script type="text/javascript">
$(".next").click(function() {
   //do something
});
</script>

3) with id

<asp:Button ID="next" TabIndex="1" runat="server" Text="Next" class="action-button" />

<script type="text/javascript">
$("#next").click(function() {
   //do something
});
</script>

answered May 7, 2016 at 14:36

clab

766 bronze badges

1 Comment

kumbhani bhavesh Over a year ago

no work any becouse i want to use onclick event also

Collectives™ on Stack Overflow

Call Javascript function using button OnClick event

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related