JQuery переключает входное значение и класс кнопки

Question

У меня есть страница PHP, которая загружает форму с предварительно заполненными значениями из базы данных MySQL. Пользователи могут редактировать форму и обновлять ее желаемыми данными, это работает.

Я хотел бы предложить им возможность переключения один полей, если это не применяется. Таким образом, поле будет заполнено текстом «N/A», и класс кнопки должен измениться на «btn-warning». При повторном нажатии «N/A» следует удалить и предыдущие данные повторно вставлены - возможно ли это?

До сих пор у меня была такая работа ... при нажатии кнопки ввод заполняется с помощью «N/A», а класс изменяется, однако он не переключается, то есть предыдущие данные не повторяются и появляется «N/A».

Я создал FIDDLE, любая помощь приветствуется.

$(document).ready(function() { 
 
    $("#ipclear").click(function() { 
 
    $("#ip").val('N/A'); 
 
    $(this).toggleClass('btn-default').toggleClass('btn-warning'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> 
 

 
<div class="input-group"> 
 
    <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4"> 
 
    <div class="input-group-btn"> 
 
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button> 
 
    </div> 
 
</div>

Answer 1

Хранить текст в переменной перед переключением и установить его снова в течение следующего щелчка мышью.

Вот рабочий пример:

$(document).ready(function() { 
 
    var toggleText = $("#ip").val(); 
 
    $("#ipclear").click(function() { 
 
    if ($("#ip").val() != 'N/A') { 
 
     toggleText = $("#ip").val(); 
 
     $("#ip").val('N/A'); 
 
    } else 
 
     $("#ip").val(toggleText); 
 
    $(this).toggleClass('btn-default').toggleClass('btn-warning'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> 
 

 
<div class="input-group"> 
 
    <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4"> 
 
    <div class="input-group-btn"> 
 
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button> 
 
    </div> 
 
</div>

Answer 2

Вам необходимо присвоить текстовое значение в переменной и переназначить после переключения.

$(document).ready(function() { 
 
    window.ipVal = $("#ip").val(); 
 
    $("#ipclear").click(function() { 
 
    $(this).toggleClass('btn-default btn-warning'); 
 
    if($(this).hasClass('btn-default')){ //OR $(this).hasClass('btn-default') 
 
    \t $("#ip").val(window.ipVal); 
 
    }else{ 
 
    \t $("#ip").val('N/A'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> 
 

 
<div class="input-group"> 
 
    <input type="text" name='ip' id="ip" class='form-control' value="1.2.3.4"> 
 
    <div class="input-group-btn"> 
 
    <button type="button" class="btn btn-default" id="ipclear">Not Applicable</button> 
 
    </div> 
 
</div>

Answer 3

Вы не восстанавливая значение поля ввода в вашем коде. Где-то вам нужно запомнить старое значение и восстановить его при втором нажатии.

Я обновил свой JSFIDDLE возможное решение: https://jsfiddle.net/Doogie/6pqugkg3/5/

Еще несколько советов:

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

<input value="currentValue" data-orig="originalValueFromDB" id="ip" ....>

Вы можете получить исходное значение с JQuery так же, как и любой другой атрибут:

var origValue = $('#ip').attr('data-orig'); // origValue = "originalValueFromDB'