Remove error text when input is unlocked in jquery-CodePudding

I have a form with a select, input and a function that locks my input when an option is selected.

I added a warning that inputs are locked when someone selects an option. I would like to add a function to remove this warning when someone chooses an option with value="".

It's removing my warning but for example when I choose option text 1 then text 2 my warning displays twice and then when I choose a selection with first option it removes warning but only first.

How to change it so that the warning displays only once, and not more times, and removes it after select with option first.

$(function() {
  $('#stato').change(function() {
    var value = $(this).val(); //Pobranie wartości z tego selecta
    if (value == "") {
      $('#data_consegna').prop('disabled', false);
      $("#error").remove();
    } else {
      $('#data_consegna').prop('disabled', true);
      $('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div >
  <label>Enabled </label>
  <select name="stato" id="stato" >
    <option value="">Choose</option>
    <option value="Text1">Text1</option>
    <option value="Text2">Text2</option>
    <option value="Text3">Text3</option>
    <option value="Text4">Text4</option>
  </select>
</div>
<div >
  <label>Disabled when choose option in select</label>
  <input id="data_consegna" type="text"  name="data_consegna" placeholder="Data Consegna" />
</div>

CodePudding user response：

my warning displays twice

You don't check if it's already there or remove it.

removes only first

IDs must be unique, so $("#error").remove(); will only remove the first one. Use classes instead of IDs to remove multiple elements. If you only add once, this would not be an issue; just explaining why it removes only the first.

As noted in the other answer, the best solution is to simply .show()/.hide(), so I won't repeat that here.

To update your code, you can always remove the error, then add it back if needed - this isn't the most efficient as noted above.

Updated snippet:

$(function() {
  $('#stato').change(function() {
    var value = $(this).val(); //Pobranie wartości z tego selecta
    
    // always remove any existing error
    $("#error").remove();
    
    if (value == "") {
      $('#data_consegna').prop('disabled', false);
    } else {
      $('#data_consegna').prop('disabled', true);
      $('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div >
  <label>Enabled </label>
  <select name="stato" id="stato" >
    <option value="">Choose</option>
    <option value="Text1">Text1</option>
    <option value="Text2">Text2</option>
    <option value="Text3">Text3</option>
    <option value="Text4">Text4</option>
  </select>
</div>
<div >
  <label>Disabled when choose option in select</label>
  <input id="data_consegna" type="text"  name="data_consegna" placeholder="Data Consegna" />
</div>

Also note, as it's using an ID, it can only be used for a single error message.

CodePudding user response：

The simple way to achieve what you require is to have the notification div always contained in the DOM, but hidden, and then hide/show it depending on the state of the select, like this:

jQuery(function($) {
  $('#stato').change(function() {
    var value = $(this).val();
    if (value == "") {
      $('#data_consegna').prop('disabled', false);
      $("#error").hide();
    } else {
      $('#data_consegna').prop('disabled', true);
      $('#error').show();
    }
  });
});

#error {
  color: red;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div >
  <label>Enabled </label>
  <select name="stato" id="stato" >
    <option value="">Choose</option>
    <option value="Text1">Text1</option>
    <option value="Text2">Text2</option>
    <option value="Text3">Text3</option>
    <option value="Text4">Text4</option>
  </select>
</div>
<div >
  <label>Disabled when choose option in select</label>
  <input id="data_consegna" type="text"  name="data_consegna" placeholder="Data Consegna" />
  <div id="error">Input locked</div>
</div>