Jquery Toggle-Eingabewert und Button-Klasse

Question

Ich habe eine PHP-Seite, die ein Formular mit vorgefüllten Werten aus einer MySQL-Datenbank lädt. Benutzer können das Formular bearbeiten und es mit ihren gewünschten Daten aktualisieren, das funktioniert.

würde Ich mag sie die Möglichkeit bieten ein der Felder zu wechseln, wenn es ist nicht anwendbar. Auf diese Weise wird das Feld mit dem Text 'N/A' gefüllt und die Schaltflächenklasse sollte in 'btn-warning' geändert werden. Wenn Sie erneut klicken, sollte das 'N/A' entfernt und die vorherigen Daten wieder eingefügt werden - ist das möglich?

Bis jetzt habe ich es irgendwie funktioniert ... wenn die Schaltfläche angeklickt wird, wird die Eingabe mit 'N/A' gefüllt und die Klasse ändert sich, aber es schaltet nicht um, dh die vorherigen Daten sind nicht re - erscheint und das 'N/A' bleibt.

Ich habe eine FIDDLE erstellt, jede Hilfe wird geschätzt.

$(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

Speichern Sie den Text in einer Variablen vor Knebel und setzen Sie ihn wieder bei der nächsten Klick.

Hier ist ein funktionierendes Beispiel:

$(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

Sie benötigen eine Textwert in einer Variablen zugewiesen werden und nach dem Umschalten neu zuweisen.

$(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

Sie den Wert des Eingabefeldes in Ihrem Code nicht wiederherstellen. Irgendwo müssen Sie sich den alten Wert merken und ihn mit einem zweiten Klick wiederherstellen.

ich Ihre JSFIDDLE mit einer möglichen Lösung aktualisiert: https://jsfiddle.net/Doogie/6pqugkg3/5/

Einige Tipps:

Wenn Sie mehr als ein Feld haben, dann müssen Sie den ursprünglichen Wert eines jeden von ihnen erinnern. Eine Möglichkeit, die Sie tun können, ist über Daten- Attribute auf den Eingangs elemnts:

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

Sie können den ursprünglichen Wert mit JQuery erhalten wie jedes andere Attribut:

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