This is my html button ltbutton type34button34 class34buttonreset34 id34showEditPanel34gtlti class34clipcheckmark234gtltigtEdit Weatherltbuttongt heres what i have done so far documentreadyfunction var btn 39showEditPanel39 btnclickfunction if btnval 34Edit Weather34 btnval34Cancel Edit34 34showMe34slide

Please refer this onelthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt 39idshowEditPanel39live39click39 function if thistexttrimtoUpperCase 34EDIT WEATHER34 thishtml34lti class39cliptick239gtltigtCancel Edit 34 else thisfind39i39attr39class39 39cliptick239 thishtml34lti class39clipcheckmark239gtltigtEdit Weather34 ltscriptgtltheadgtltbodygt ltform id34form134 runat34server34gt ltdivgt ltbutton type34button34 clas

Change button text (Edit / Cancel / Edit) on click using jQuery Toggle

EmadKhan

SOLVED CLOSED ACTIVE ANSWERED
User: EmadKhan
Posted: on Sep 05, 2014 01:41 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4731

This is my html button :

<button type="button" class="button-reset" id="showEditPanel"><i class="clip-checkmark-2"></i>Edit Weather</button>

here's what i have done so far :

 $(document).ready(function() {
            var btn = $('#showEditPanel');
            btn.click(function () {
                if (btn.val() === "Edit Weather") {
                    btn.val("Cancel Edit");
                    $("#showMe").slideToggle("medium", "swing");
                    $('#EdTemperature , #EdDirection , #EdHumidity, #EdPrecipitation, #EdStatus').val('');

                } else {
                    btn.val("Edit Weather");
                    $("#showMe").slideToggle("medium", "swing");
                }

            });


        });

I want , when a user clicks that button its text must change to :

<button type="button" class="button-reset" id="showEditPanel"><i class="clip-tick-2"></i>Cancel Edit</button>

then again when it is click it reverts back to :

<button type="button" class="button-reset" id="showEditPanel"><i class="clip-checkmark-2"></i>Edit Weather</button>

Azim

0 4

Reply
ANSWER
User: Azim
Replied: on Sep 05, 2014 04:08 AM
Report

Please refer this one

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $('[id*=showEditPanel]').live('click', function () {
            if ($(this).text().trim().toUpperCase() == "EDIT WEATHER") {
                $(this).html("<i class='clip-tick-2'></i>Cancel Edit ");
            }
            else {
                $(this).find('i').attr('class', 'clip-tick-2');
                $(this).html("<i class='clip-checkmark-2'></i>Edit Weather");

            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button type="button" class="button-reset" id="showEditPanel">
            <i class="clip-checkmark-2"></i>Edit Weather</button>
    </div>
    </form>
</body>
</html>

Demo

Change button text (Edit / Cancel / Edit) on click using jQuery Toggle

Company

Explore

Follow us

Contact Us