Create a common jQuery function and use that function for all click events

kavithav

SOLVED CLOSED ACTIVE ANSWERED
User: kavithav
Posted: on Jan 21, 2019 02:02 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2200
Sample Code: Download

I have a button where on clicking the button it will clear all the textbox and drop down values now i need to create a common function and place my below jquery code in that common function so that i can call that function in button2,button3 click events of jquery

<input type="button" value="Clear" title="clear" id="btnclear" />
<input type="button" value="" title="clear" id="btn2" />
<input type="button" value="" title="clear" id="btn3" />

function clear_text()  //this is my common function
{
    $('#txtname').val("");
}

$('#btnclear').off('click').on('click', function (RD) {
    clear_text();  //calling the common function
});

$("#btn2").click(function () {
    if ($(this).hasClass("buttonActive")) {
        $("#tr1").show();
        $("#tr2").show();
    }
    else {
        clear_text(); //while hiding i am clearing the text in the fields
        $("#tr1").hide();
        $("#tr2").hide();
    }
});

$("#btn3").click(function () {
    if ($(this).hasClass("buttonActive")) {
        $("#tr1").show();
        $("#tr2").show();
    }
    else {
        clear_text(); //while hiding i am clearing the text in the fields
        $("#tr1").hide();
        $("#tr2").hide();
    }
});

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jan 21, 2019 04:44 AM
Modified: on Jan 21, 2019 04:46 AM
Report

Hi kavithav,

Refer below sample code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#btnclear').off('click').on('click', function (RD) {
            clear_text($('#txtname'));  //calling the common function
        });

        $("#btn2").click(function () {
            if ($(this).hasClass("buttonActive")) {
                $("#tr1").show();
                $("#tr2").show();
            }
            else {
                clear_text($('#txtname'));  //while hiding i am clearing the text in the fields
                $("#tr1").hide();
                $("#tr2").hide();
            }
        });

        $("#btn3").click(function () {
            if ($(this).hasClass("buttonActive")) {
                $("#tr1").show();
                $("#tr2").show();
            }
            else {
                clear_text($('#txtname'));  //while hiding i am clearing the text in the fields
                $("#tr1").hide();
                $("#tr2").hide();
            }
        });
    });
    function clear_text(element) {  //this is my common function
        $(element).val("");
    }       
</script>
<input type="text" id="txtname" value="Test" />
<input type="button" value="Clear" title="clear" id="btnclear" />
<input type="button" value="Add" title="clear" id="btn2" />
<input type="button" value="Close" title="clear" id="btn3" />

Demo

If you want to clear multiple TextBox at same time then assign a common class name to clear all the TextBox.

HTML

clear_text($('.test'));  //calling the common function

function clear_text(element) {
    $.each($(element), function () {
        $(this).val("");
    });
}       

<input type="text" class="test" id="txtname" value="Test" />
<input type="text" class="test" id="Text1" value="Test" />

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Create a common jQuery function and use that function for all click events

Company

Explore

Follow us

Contact Us