CODEWITHSUNDEEP
jquerytogglebutton
Kaur
Kaur

Reputation: 501

Toggle() Jquery issue

I have multiple steps for the user to change his mind from deleting records. In first step, user have two choices 'cancel to exit' to exit the page or proceed with 'delete'. in step 2, When user selects to 'delete' the records; I want to hide the 'cancel to exit' button, just displaying the 'confirm' and 'cancel delete'. How do I hide 'cancel to exit' in step 2? Here is the example jsfiddle 

<tr>
    <td>
        <input type='button' value='Delete' id='delete' class='button'>
    </td>
    <td>
        <input type='button' value='Cancel to Exit' id='cancel' class='button'>
    </td>
    <td>
        <input type='button' value='Confirm delete' id='deleteconfirm' style='display:none;' class='button confirmationReq'>
    </td>
    <td>
        <input type='button' value='Cancel delete' id='cancel2' style='display:none;' class='button'>
    </td>
</tr>

$("input#cancel").click(function () {
    alert("exit");
});
$("input#delete,input#cancel2").click(function () {
    $("input#delete, input#deleteconfirm, input#cancel2").toggle();
});
$("input#deleteconfirm").click(function () {
    alert("Delete");
});

Upvotes: 1

Views: 59

Answers (3)

PeterKA
PeterKA

Reputation: 24638

I think this is an efficient way of toggling the "cancel to exit" button. Just add a .cancel or other class to the button that you want to use to toggle the state of the the "cancel to exit" button, then add the following code to your JS:

$('.cancel').on('click', function() {
    $('#cancel').toggle();
});

Be sure to checkout the demo below.

$("input#cancel").click(function () {
    alert("exit");
});
$("input#delete,input#cancel2").click(function () {
    $("input#delete, input#deleteconfirm, input#cancel2").toggle();
});
$("input#deleteconfirm").click(function () {
    alert("Delete");
});

$('.cancel').on('click', function() {
    $('#cancel').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr>
    <td>
        <input type='button' value='Delete' id='delete' class='button cancel'>
    </td>
    <td>
        <input type='button' value='Cancel to Exit' id='cancel' class='button'>
    </td>
    <td>
        <input type='button' value='Confirm delete' id='deleteconfirm' style='display:none;' class='button confirmationReq'>
    </td>
    <td>
        <input type='button' value='Cancel delete' id='cancel2' style='display:none;' class='button cancel'>
    </td>
</tr>
</table>

Upvotes: 1

devlin carnate
devlin carnate

Reputation: 8592

Change this:

$("input#delete,input#cancel2").click(function () {
    $("input#delete, input#deleteconfirm, input#cancel2").toggle();
});

To this:

function toggleStuff1() {
   $("input#deleteconfirm").toggle();
    $("input#cancel2").toggle();

}

function toggleStuff2() {
   $("input#delete").toggle();
    $("input#cancel").toggle();

}

$("input#delete").click(function() {
   toggleStuff1();
   toggleStuff2();
});

$("input#cancel2").click(function() {
    toggleStuff2();
    toggleStuff1();

});

You could combine the toggleStuff functions into one, but I generally split these types of functions assuming they may be used independently in other areas of code.

Upvotes: 0

Christian Ternus
Christian Ternus

Reputation: 8492

Just add something like:

$("input#delete").click(function() {
    $("input#cancel").hide();
});

Upvotes: 3

Related Questions