Bootstrap Toggle Hidden Div и входные значения

Question

Я использую Bootstrap Toggle , чтобы переключать видимость div, вот что я могу сделать.

Внутри div есть входы, если во входах есть какие-либо значения, когда пользователь переключает, я хотел бы выдать им сообщение «Вы уверены, что хотите удалить эти значения».

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

Я не могу заставить его работать.

Мой код ниже a скрипка .

HTML

<input type="checkbox" value='1' name="test" id="test">
<hr>
<div id="advanced">
  <form>
    <input type="text" name="one">
    <input type="text" name="two">
  </form>
</div>

JQuery

function checkValues() {
  if ($('#advanced').find('input:text').val() !== '') {
    clearInput();
  }
}

function clearInput() {
  var txt;
  var r = confirm("You sure you want to remove these values?");
  if (r == true) {
    resetValues();
  } else {
    console.log('keep values and box open');
  }
}

function resetValues() {
  $('#advanced').find('input:text').val('');
}

$(function() {
  $('#test').bootstrapToggle({
    on: 'Hide',
    off: 'Show',
    onstyle: 'danger'
  });
  $("#advanced").hide();
  $('#test').change(function() {
    if ($(this).prop('checked') == true) {
      checkValues();
      $("#advanced").show(500);
    }
    if ($(this).prop('checked') == false) {
      checkValues();
      $("#advanced").hide(500);
    }

  });
})

Любая помощь приветствуется.

Answer 1

Вы можете установить какой-нибудь флаг, который говорит системе удалять значения только в том случае, если диалог подтверждения не возвращает false

    function checkValues() {
      if ($('#advanced').find('input:text').val() !== '') {
        var state = clearInput();
        return state;
      }
    }

    function clearInput() {
      var txt;
      var r = confirm("You sure you want to remove these values?");
      if (r === true) {
        resetValues();
      } else {
        return false;
      }
    }

    function resetValues() {
      $('#advanced').find('input:text').val('');
    }

    $(function() {
      $('#test').bootstrapToggle({
        on: 'Hide',
        off: 'Show',
        onstyle: 'danger'
      });
      $("#advanced").hide();
      $('#test').change(function() {
        if ($(this).prop('checked') == true) {
          checkValues();
          $("#advanced").show(500);
        }
        if ($(this).prop('checked') == false) {
          state = checkValues();
          if(state != false){
              $("#advanced").hide(500);
          } else {
              $("#test").data('bs.toggle').on(true);
              // let the checkbox remain toggled
          }
          
        }

      });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<input type="checkbox" value='1' name="test" id="test">
<hr>
<div id="advanced">
  <form>
    <input type="text" name="one">
    <input type="text" name="two">
  </form>
</div>

Answer 2

Здесь вы идете с решением https://jsfiddle.net/Lg9p417t/64/

$(function() {
  $('#test').bootstrapToggle({
    on: 'Hide',
    off: 'Show',
    onstyle: 'danger'
  });
  $("#advanced").hide();
  $('#test').change(function() {
    if ($(this).prop('checked') == true) {
      if ($('#advanced').find('input:text').val() === '') {
        $('#advanced').find('input:text').val('');
      }
      $("#advanced").show(500);
    }
    if ($(this).prop('checked') == false) {
      if ($('#advanced').find('input:text').val() !== '') {
        var txt;
        var r = confirm("You sure you want to remove these values?");
        if (r == true) {
          $("#advanced").hide(500);
          $('#advanced').find('input:text').val('');
        } else {
          $('#test').bootstrapToggle('on');
        }
      } else {
        $("#advanced").hide(500);
      }
    }
  });
})

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap2-toggle.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="http://bootstrapdocs.com/v2.0.4/docs/assets/js/bootstrap-button.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>

<input type="checkbox" value='1' name="test" id="test">
<hr>
<div id="advanced">
  <form>
    <input type="text" name="one">
    <input type="text" name="two">
  </form>
</div>

Answer 3

Попробуйте это.

    function checkValues() {
  if ($('#advanced').find('input:text').val() !== '') {
    clearInput();
  } else {
    $("#advanced").hide();
  }
}

function clearInput() {
  var txt;
  var r = confirm("You sure you want to remove these values?");
  if (r == true) {
    resetValues();
    $("#advanced").hide(500);
  } else {
    $('#test').bootstrapToggle('on');
    console.log('keep values and box open');
  }
}

function resetValues() {
  $('#advanced').find('input:text').val('');
}

$(function() {
  $('#test').bootstrapToggle({
    on: 'Hide',
    off: 'Show',
    onstyle: 'danger'
  });
  $("#advanced").hide();
  $('#test').change(function() {
    if ($(this).prop('checked') == true) {
      $("#advanced").show(500);
    }
    if ($(this).prop('checked') == false) {
      checkValues();
    }

  });
})

Вот ссылка Ссылка