JQuery on click display Save Button

Question

I am trying to make a simple profile linked to our company database, in which clients can log in and check their details. Basically, I need a function that will display a Save button when the edit button is clicked. As soon as I press cancel, the save button should disappear again.

I am a bit of a noob, so maybe I am missing something very simple, for which I apologise. The code and JSFiddle follow:

http://jsfiddle.net/65D9C/26/

<HTML>
<button src="#" id="littleButton">Edit Profile</button>

<div id="button-sm">
    <input type="submit" class="ButtonSm" value="Save" id="save_button" name="save_button"></input>
</div>
</HTML>

<script>
$(document).ready(function () {
    var SaveButton = $('#button-sm');
    $(SaveButton).hide();
    $('#littleButton').onclick(function (e) {
        $(SaveButton).animate({
            'opacity': 'toggle'
        });
    });
});
</script>

Hey. Well the trigger is click - jQuery("#id").click(function(e){}); if you are using jQuery 1.10.1 or over, i would suggest you use jQuery("#id").on("click",function (e){}); because apparently they have been migrating the code to 'on'/'off'. I had some issues with other triggers. So its something for the future — user2583714
– user2583714, Commented Jul 30, 2014 at 12:28

Rakesh Shetty · Accepted Answer · 2014-07-30 12:36:24Z

1

Working Demo : JSFiddle

It should be click event not onclick also you have to include jQuery library you can download from here jQuery 1.11.1

Try this :

$(document).ready(function () {
    var SaveButton = $('#button-sm');
      SaveButton.hide();
    $('#littleButton').click(function (e) {
        SaveButton.animate({
            'opacity': 'toggle'
        });
    });
});

For more info about click event see jQuery click event

edited Jul 30, 2014 at 12:36

answered Jul 30, 2014 at 12:28

Rakesh Shetty

4,6268 gold badges44 silver badges82 bronze badges

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

2 Comments

Sydcpt Over a year ago

Thanks man, this works great. even kept the opacity which is what I wanted too.

Rakesh Shetty Over a year ago

glad it works for you please mark this answer as accepted if you got the solution How to accept the answer @SydHolmes

Amit Kumar · Accepted Answer · 2014-07-30 12:27:10Z

0

there is click event not onclcik

   $(document).ready(function () {
    var SaveButton = $('#button-sm');
    SaveButton.hide();
    $('#littleButton').on('click',function (e) {
        SaveButton.show();
    });
});

and you didn't include js in your fiddle.

DEMO

answered Jul 30, 2014 at 12:27

Amit Kumar

5,96212 gold badges49 silver badges88 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2014-07-30 12:29:08Z

0

Try this : use click instead of onclick and you can use show("slow") to display show button

  $(document).ready(function () {
    var SaveButton = $('#button-sm');
    $(SaveButton).hide();
    $('#littleButton').click(function (e) {
        var buttonLbl = "Edit Profile";
        if($(this).text()!="Cancel")
            buttonLbl="Cancel";
        $(this).text(buttonLbl);
        $(SaveButton).toggle('slow');
    });
 });

Demo

answered Jul 30, 2014 at 12:29

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Balachandran · Accepted Answer · 2014-07-30 12:33:26Z

0

You did not include any jquery and also there is no onclick in jquery .so you have to use click event

$(document).ready(function () {
    var SaveButton = $('#button-sm');
      SaveButton.hide();
    $('#littleButton').click(function (e) {
        SaveButton.animate({
            'opacity': 'toggle'
        });
    });
});

Updated Demo

edited Jul 30, 2014 at 12:33

answered Jul 30, 2014 at 12:26

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Comments

antyrat · Accepted Answer · 2014-07-30 12:33:28Z

0

You have several problems in your code. First of all should be click instead of onclick.

See the code:

$(document).ready(function () {
    var SaveButton = $('#button-sm');
    SaveButton.hide();
    $('#littleButton').click(function (e) {
        SaveButton.show();
    });
});

Updated jsFiddle

edited Jul 30, 2014 at 12:33

answered Jul 30, 2014 at 12:25

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

1 Comment

Balachandran Over a year ago

The animate opacity method will work , just look this link jsfiddle.net/65D9C/35

Maurizio Battaghini · Accepted Answer · 2014-07-30 13:26:48Z

0

Try this (and sorry for my awful english)

JS - section

$(document).ready(function () {
    $('#littleButton').on("click", function (e) {
        e.preventDefault();
        $("#button-sm").fadeIn(300);
    });

    $('#cancelButton').on("click", function(e){
        $("#button-sm").fadeOut(300);
    });
});

This jQuery show your SAVE button when you click on "EDIT" button and hide you button if you click on a "CANCEL" button (with id "cancelButton")

But you have to set this in your css first of all

CSS section

#button-sm {
    display:none;
}

answered Jul 30, 2014 at 13:26

Maurizio Battaghini

4787 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery on click display Save Button

6 Answers 6

2 Comments

Comments

Comments

Updated Demo

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related