javascript - 数据表单重置未发生

Question

编写代码来保存数据和重置数据。在这种情况下，数据已成功保存，但无法重置表单。当我单击铅笔图标时，它会变成软盘并删除图标。如果我单击软盘数据正在保存，但是当我单击删除图标时数据表单不会被重置。我尝试了这种方式的代码

//Banking details form validation
$(document).ready(function() {
  $('.editBankDetailBtn').click(function() {
    if ($('.editBankDetail').is('[readonly]')) { //checks if it is already on readonly mode
      $('.editBankDetail').prop('readonly', false); //turns the readonly off
      $('.editBankDetailBtn').html(
        '<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span>' +
        '<span id="reset-form" class="glyphicon glyphicon-remove">&nbsp;</span>');
      //  $('.glyphicon-remove')[0].reset();

    } else { //else we do other things

      var patt = /^([0-9]{11})|([0-9]{2}-[0-9]{3}-[0-9]{6})$/;
      var reg = /^[A-Za-z]{4}[0-9]{6,7}$/;
      patt.test('acdbdfdsfsf22-333-666666'); // true

      var bname_1 = document.getElementById('name').value;

      if (bname_1 == "") {

        document.getElementById('name').style.borderColor = "red";
        return false;
      } else {
        document.getElementById('name').style.borderColor = "#cccccc";
      }

      $('.editBankDetail').prop('readonly', true);
      $('.editBankDetailBtn').html(
        '<span class="glyphicon glyphicon-pencil">&nbsp;</span>');
      $('.glyphicon-remove').on('click', function() {
        $("#reset-form").trigger("reset");
      });
    }
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  

<div class="col-md-6">
  <div class="panel panel-default">
    <div class="panel-heading" style="background-color: #b3daff;">
      <h4 class="panel-title">
        <span style="font-weight: 700;">Banking Details</span> &nbsp; <a class="editBankDetailBtn"><span
               class="glyphicon glyphicon-pencil">&nbsp;</span></a>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred">&nbsp;</span>
        </a>
      </h4>
    </div>
    <div id="collapseFour" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="col-sm-4 col-md-6">
          <div class="row">
            <div class="form-group">
              <label class="control-label col-sm-12 col-md-8">Bank
                     Name<span style="color: red;">*</span>
                     </label>
              <div class="col-md-12">
                <input type="text" class="form-control editBankDetail" id="bankName" readonly placeholder="Bank Name" />
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-4 col-md-6">
          <div class="row">
            <div class="form-group">
              <label class="control-label col-sm-12 col-md-8">Account
                     Number<span style="color: red;">*</span>
                     </label>
              <div class="col-md-12">
                <input type="text" class="form-control editBankDetail" id="accountNumber" readonly placeholder="Account Number" />
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-4 col-md-6">
          <div class="row">
            <div class="form-group">
              <label class="control-label col-sm-12 col-md-8">IFSC
                     CODE<span style="color: red;">*</span>
                     </label>
              <div class="col-md-12">
                <input type="text" class="form-control editBankDetail" id="ifscCode" readonly placeholder="IFSC CODE" />
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-4 col-md-12">
          <div class="row">
            <div class="form-group">
              <label class="control-label col-sm-12 col-md-8">Bank
                     Address<span style="color: red;">*</span>
                     </label>
              <div class="col-md-12">
                <textarea class="form-control editBankDetail" id="branchAddress" placeholder="Bank Address" readonly> </textarea>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!----Ends second column-------->
</div>
</div>
<!----Ends accordion column-------->
</div>

Answer 1

你有几件事

• 您需要重置表单，而不是像现在这样重置图标
• 请在bankName上有一个toggleClass - 它不是name ，但是bankName在你的代码中
• 您需要委托(delegate) - 像这样 - 获取事件处理程序的元素必须在页面中是静态的，并且在委托(delegate)时存在，此处 $('.editBankDetailBtn')

<小时/>

$('.editBankDetailBtn').on('click', '.glyphicon-remove', function() {
  $("#myForm")[0].reset()
});