javascript - toggle edit buttons with save and cancel buttons

I want to change the button when it's clicked. Initial there's only one "Edit" button. After I click it, it will bee a "Save" button and I also want to show a "Cancel" button next to it. How can I do that? I have the code below.

    <!DOCTYPE html>
    <html>
    <head>
    <script class="jsbin" src=".min.js"></script>
    <meta charset=utf-8 />
    <title>demo by roXon</title>
    <!--[if IE]>
      <script src=".js"></script>
    <![endif]-->
    </head>

    <body>
    <button data-text="Save">Edit</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>

<script>
$("button").click(function(){
    $(this).nextUntil('button').toggle();


    var btnText = $(this).text();
    $(this).text( $(this).data('text') );
    $(this).data('text', btnText );
});
</script>

</body>
</html>

    <!DOCTYPE html>
    <html>
    <head>
    <script class="jsbin" src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>demo by roXon</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode./svn/trunk/html5.js"></script>
    <![endif]-->
    </head>

    <body>
    <button data-text="Save">Edit</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>

<script>
$("button").click(function(){
    $(this).nextUntil('button').toggle();


    var btnText = $(this).text();
    $(this).text( $(this).data('text') );
    $(this).data('text', btnText );
});
</script>

</body>
</html>

Share Improve this question edited Jul 16, 2012 at 18:53 Turnip 36.7k15 gold badges91 silver badges117 bronze badges asked Jul 16, 2012 at 18:49 wcdomy 2152 gold badges3 silver badges8 bronze badges

Why don't you simply have three buttons with ids (edit, save, cancel) and then change them as needed, instead of using paragraphs and data functions? – j08691 Commented Jul 16, 2012 at 19:02
@j08691 Do you have an example I can take a look at? – wcdomy Commented Jul 16, 2012 at 19:09
yes jsfiddle/j08691/JbZnf – j08691 Commented Jul 16, 2012 at 20:07
@j08691 Good one! But what if I have 3 groups of these buttons on one page? Do I need to give them different id and write the script separately for them? Sorry for being a jquery newbie... – wcdomy Commented Jul 16, 2012 at 20:25
Like this? jsfiddle/j08691/JbZnf/1 – j08691 Commented Jul 16, 2012 at 20:30

| Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

you can add a new button for the cancel and just hide it as you need. you can follow the demo here

here is the code in case you need it:

<button id='EditSave' data-text="Save">Edit</button>
<button id='Cancel' data-text="Cancel" style="display:none;">Cancel</button>
    <p>Hello</p>
    <p style="display: none">Good Bye</p>

$("#EditSave").click(function(){
    var btnText = $(this).text();
    if(btnText == 'Edit')
    {
        $(this).text('Save');
        $('#Cancel').show();
    }
    else
    {
        $(this).text('Edit');
        $('#Cancel').hide();
    }
});

$('#Cancel').click(function(){
    $(this).hide();
    $('#EditSave').text('Edit');
});

I suggest a layout and jQuery like this jsFiddle example.

jQuery

$('.edit').click(function() {
    $(this).hide();
    $(this).siblings('.save, .cancel').show();
});
$('.cancel').click(function() {
    $(this).siblings('.edit').show();
    $(this).siblings('.save').hide();
    $(this).hide();
});
$('.save').click(function() {
    $(this).siblings('.edit').show();
    $(this).siblings('.cancel').hide();
    $(this).hide();
});

HTML

<form>
    <div>
    <input class="edit" type="button" value="Edit" />
    <input class="save" type="button" value="Save" /> 
    <input class="cancel" type="button" value="Cancel" />
    </div>
    <div>
    <input class="edit" type="button" value="Edit" />
    <input class="save" type="button" value="Save" /> 
    <input class="cancel" type="button" value="Cancel" />
    </div>
    <div>
    <input class="edit" type="button" value="Edit" />
    <input class="save" type="button" value="Save" /> 
    <input class="cancel" type="button" value="Cancel" />
    </div>
</form>

CSS

.save, .cancel {
display:none;
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - toggle edit buttons with save and cancel buttons - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)