Как мне отказаться от любых изменений в поле ввода, если я нажму кнопку отмены?

Question

, поэтому у меня есть поле ввода, которое отключено, если я не нажму кнопку редактирования, которая позволяет вводить данные в поле ввода, нажав кнопку редактирования, появится кнопка сохранения и отмены. Если я нажму кнопку отмены, поле ввода снова будет отключено.

<button type="submit" class="btn btn-success" value="savechanges" id="savechanges">Save Changes</button>
<button type="button" class="btn btn-secondary" value="cancel" id="cancel">Cancel</button>
<button type="button" class="btn btn-info" value="edit" id="edit">Edit Info</button>

<script>
$('#edit').click(function () {
        $(this).hide();
        $('#savechanges, #cancel').show();
        $("#target :input").prop("disabled", false);
    });

    $('#cancel').click(function () {
        $('#edit').show();
        $('#savechanges, #cancel').hide();
        $("#target :input").prop("disabled", true);
    });
</script>

что я пытаюсь сделать, это если я нажимаю кнопку редактирования, например, набираю что-то там, а затем хочу отменить это, поэтому я нажимаю кнопку отмены, как я сказал выше, отключено поле ввода. но что-то там еще есть. это не должно быть там, так как я отменил это. также, если, например, в поле ввода уже есть значение, отображаемое внутри него, и я отредактировал его, но я хочу отменить, чтобы оно вернулось go к этому значению. Может кто-нибудь помочь мне, пожалуйста, я надеюсь, что вы получите мою точку зрения

Answer 1

Сохранить значение ввода, когда пользователь нажимает кнопку редактирования. После того, как пользователь нажмет кнопку «Отмена», восстановите введенное значение как сохраненное.

let storedValue= '';

$('#edit').click(function () {
    $(this).hide();
    storedValue = $("#target :input").val();
    $('#savechanges, #cancel').show();
    $("#target :input").prop("disabled", false);
});

$('#cancel').click(function () {
    $('#edit').show();
    $('#savechanges, #cancel').hide();
    $("#target :input").val(storedValue);
    $("#target :input").prop("disabled", true);
});

Answer 2

после поиска правильного ответа я узнал, и это работает для меня. Я просто изменяю свой тип кнопки для кнопки отмены. вместо

 <button type="button" class="btn btn-secondary" value="cancel" id="cancel">Cancel</button>

я изменил тип на:

 <button type="reset" class="btn btn-secondary" value="cancel" id="cancel">Cancel</button>

Answer 3

вам нужно изменить это

$('#cancel').click(function () {
        $('#edit').show();
        $('#savechanges, #cancel').hide();
        $("#target :input").val('');
        $("#target :input").prop("disabled", true);
    });