Как обнаружить изменения в текстовом поле ввода и включить кнопку сохранения

Question

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

Это выполняется в Visual Studio 2017, HTML, JavaScript

(function () {


    var customer_address = localStorage.getItem("customer_address");
    var customer_city = localStorage.getItem("customer_city");
    var customer_postal_code = localStorage.getItem("customer_postal_code");



    //Address Section
    function changeAddress() {
        var oldaddress = $("#txtOldAddress").val();
        var newaddress = $("#txtNewAddress").val();


        var url = serverURL() + "/savenewaddress.php";

        var JSONObject = {
            "customer_username": localStorage.getItem("customer_username"),
            "oldaddress": oldaddress,
            "newaddress": newaddress,
        };

        $.ajax({
            url: url,
            type: 'GET',
            data: JSONObject,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (arr) {
                _changeAddressResult(arr);
            },
            error: function () {
                alert("FAIL");
            }
        });
    }

    function _changeAddressResult(arr) {
        if (arr[0].result === 1) {
            /*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
            alert("OK!")
        }
        else {
            alert("FAIL2");
        }
    }

    //City Section
    function changeCity() {
        var oldcity = $("#txtOldCity").val();
        var newcity = $("#txtNewCity").val();

        var url = serverURL() + "/savenewcity.php";

        var JSONObject = {
            "customer_username": localStorage.getItem("customer_username"),
            "oldcity": oldcity,
            "newcity": newcity,
        };

        $.ajax({
            url: url,
            type: 'GET',
            data: JSONObject,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (arr) {
                _changeAddressResult(arr);
            },
            error: function () {
                alert("FAIL");
            }
        });
    }

    function _changeAddressResult(arr) {
        if (arr[0].result === 1) {
            /*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
            alert("OK!")
        }
        else {
            alert("FAIL2");
        }
    }

    //Postal Code Section
    function changePostalCode() {
        var oldpostalcode = $("#txtOldPostalCode").val();
        var newpostalcode = $("#txtNewPostalCode").val();

        var url = serverURL() + "/savenewpostalcode.php";

        var JSONObject = {
            "customer_username": localStorage.getItem("customer_username"),
            "oldpostalcode": oldpostalcode,
            "newpostalcode": newpostalcode
        };

        $.ajax({
            url: url,
            type: 'GET',
            data: JSONObject,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (arr) {
                _changeAddressResult(arr);
            },
            error: function () {
                alert("FAIL");
            }
        });
    }

    function _changeAddressResult(arr) {
        if (arr[0].result === 1) {
            /*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
            alert("OK!")

        }
        else {
            alert("FAIL2");
        }
    }


    //Validation
    $("#ChangeAddressForm").validate({
        rules: {
            txtNewPostalCode: {
                required: true,
                minlength: 6,
                digits: true
            },

            txtNewCity: {
               digits: false
            },
            txtNewAddress: {
                required: true,
                alphanumeric: true
            }

        },
        messages: {
            txtNewAddress: {
                required: "Address is required",
            },
            txtNewCity: {
                required: "City is required",
                digit: "Include only letters!",
            },
            txtNewPostalCode: {
                required: "Postal Code is required!",
                minlength: "Postal Code only contains 6 digits!",
                digits: "Postal Code only contains digits!"
            }
        },
        focusInvalid: false,
        submitHandler: function () {
            return false;
        },
        errorPlacement: function (error, element) {
            error.appendTo(element.parent().parent().after());
        },
    });



    //Save Address Button Function
    $("#btnSaveAddress").bind("click", function () {

        if ($("#ChangeAddressForm").valid()) {
            changeAddress();
            changeCity();
            changePostalCode();



        }
    });

})();

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

Answer 1

Попробуйте этот код:

function InputChangeListener(){
  flag = 1;

  var firstInput = document.getElementById("firstInput");
  var secondInput = document.getElementById("secondInput");
  var thirdInput = document.getElementById("thirdInput");

  var firstInputVal = document.getElementById("firstInput").defaultValue;
  var secondInputVal = document.getElementById("secondInput").defaultValue;
  var thirdInputVal = document.getElementById("thirdInput").defaultValue; 



  var submitButton = document.getElementById("submitButton");
   if(firstInput.value == firstInputVal || secondInput.value == secondInputVal || thirdInput.value == thirdInputVal){
       flag = 0;
   }
   if(flag == 1){
      submitButton.style.display = "block"; 
   } else {
      submitButton.style.display = "none"; 
   }
}

#submitButton{
display: none
}

<input id="firstInput" value="test1" type="text" onkeyup ="InputChangeListener()"/><br />
<input id="secondInput" value="test2" type="text" onkeyup ="InputChangeListener()"/><br />
<input id="thirdInput" value="test3" type="text" onkeyup ="InputChangeListener()"/><br />
<input id="submitButton" type="submit" value="Submit" />

Answer 2

Onchange обычно срабатывает только после изменения фокуса ввода. Так что вам нужно использовать событие onkeyup. Но вы также можете добавить onchange и onkeydown на всякий случай. Я предполагаю, что вы используете JQuery. Вот пример:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var old1;
var old2;
var old3;

function checkForChange() {
  if (
    old1 != $('#in1').val() ||
    old2 != $('#in2').val() ||
    old3 != $('#in3').val()
  ) {
    $('#save').show();
  }
}
$(function() {
  old1 = $('#in1').val();
  old2 = $('#in2').val();
  old3 = $('#in3').val();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="in1" onchange="checkForChange()" onkeydown="checkForChange()" onkeyup="checkForChange()" value="hello world" /><br/>
  <input id="in2" onchange="checkForChange()" onkeydown="checkForChange()" onkeyup="checkForChange()" value="hello cat" /><br/>
  <input id="in3" onchange="checkForChange()" onkeydown="checkForChange()" onkeyup="checkForChange()" value="hello dog" /><br/>
  <input id="save" value="save" type="submit" style="display:none;" />
</form>

Answer 3

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

Сначала добавьте атрибут «disabled» в тег кнопки. Затем добавьте событие «onchange» в вашу кнопку. В js сделайте это так:

function ontextchanged()
    $('#buttonid').prop('disabled',false);

Answer 4

Вы можете иметь функцию, которая вызывается при каждом изменении ввода, а затем проверять, введены ли все входы или нет.

Пример:

<input id = "input1" onchange ="checkIfAllInputsEntered()"/>
<input id = "input2" onchange ="checkIfAllInputsEntered()"/>
<input id = "input3" onchange ="checkIfAllInputsEntered()"/>

JavaScript:

function checkIfAllInputsEntered(){
  flag = 1;
  //get all 3 elements by id's and check their values if they are "" or not
   if(input1 == ""){
       flag = 0;
   }
   if(input2 == ""){
       flag = 0;
   }
   if(input3 == ""){
       flag = 0;
   }

   if(flag == 1)
      //enable button

}