使用jQuery和AJAX关闭时重置模式输入值

我有一个显示数据的模式，这些值来自我的$。每个函数的结果值

我想在关闭模式时从模式中重置数据

下面是我的jQuery和我的ajax结果

 $('.edit').on('click', function(e){
   e.preventDefault();
  $('#edit_check').modal('show');
  var payment_id = $(this).attr('payment');
  var transaction_id = $(this).attr('transaction');
  var payment_no = $(this).attr('number');

  $.ajax({
      type: 'POST',
      url: 'transaction_row.php',
      data:
      {
        payment_no:payment_no,
        payment_id:payment_id,
        transaction_id:transaction_id
      },
      dataType: 'json',
      success: function(result)
      {
        //console.log(result);
        $.each(result, function(index, value){
          //client details
          $('#client').val(value.fullName);
          $('#company').val(value.company_name);
          $('#address').val(value.company_address);
          $('#trans_number').val(value.payment_transaction_no);
          //transaction details
          $('#edit_bank_name').val(value.bank_name);
          $('#edit_bank_branch').val(value.bank_branch);
          $('#edit_amount').val(value.payment_amount);
          $('#edit_check_number').val(value.check_no);
          $('#edit_check_date').val(value.checkDate);
        }); 
      }
  });

这是我的html/modal

 <div class="modal fade" id="edit_check">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 class="modal-title"> Edit Check Transaction </h3>
          <br>  
          <i>Client</i>:&nbsp;<span><strong> <input type="text" id="client" name="client_name" class="noBorder" readonly> </strong></span>
          <br>
          <i>Company</i>:&nbsp;<span><strong> <input type="text" id="company" name="company_name" class="noBorder" readonly> </strong></span> 
          <br>
          <i>Address</i>:&nbsp;<span><strong> <input type="text" id="address" name="company_address" class="noBorder" readonly> </strong></span>
          <br>
          <i>Transaction Number</i>:&nbsp;<span><strong> <input type="text" id="trans_number" name="trans_number" class="noBorder" readonly> </strong></span>
          <br>
          <br>

          <div class="form-group">
            <label for="payment_method" class="col-sm-3 control-label"> Edit Payment Method: </label>
            <div class="col-sm-9">
              <input type="hidden" id="show_method_id">
            <select id="payment_method" name="payment_method" class="form-control" required>
              <option id="1" value="cash">Cash</option>
              <option id="2" value="ocash">Online Cash</option>
              <option id="3" value="check" selected>Check</option>
            </select>
            </div>
          </div>

          <div class="form-group name">
            <label for="edit_bank_name" class="col-sm-3 control-label">Bank Name:</label>
              <div class="col-sm-9">
                 <input type="text" class="form-control" id="edit_bank_name" name="edit_bank_name" placeholder="Enter Bank Name" required>
              </div>
          </div>

          <div class="form-group branch">
            <label for="edit_bank_branch" class="col-sm-3 control-label">Bank Branch:</label>
              <div class="col-sm-9">
                 <input type="text" class="form-control" id="edit_bank_branch" name="edit_bank_branch" placeholder="Enter Bank Branch" required>
              </div>
          </div>

            <div class="form-group amount">
              <label for="edit_amount" class="col-sm-3 control-label">Amount:</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="edit_amount" name="edit_amount" placeholder="Enter Amount" maxlength="13"  
                  value="₱" required>
                </div>
            </div>

            <div class="form-group number">
              <label for="edit_check_number" class="col-sm-3 control-label">Check Number:</label>
                <div class="col-sm-9">
                  <input type="number" class="form-control" id="edit_check_number" name="edit_check_number" min="0" maxlength="9" 
                  placeholder="Enter Check Number" required>
                </div>
            </div>

            <div class="form-group date">
              <label for="edit_check_date" class="col-sm-3 control-label">Date:</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="edit_check_date" name="edit_check_date" placeholder="" required>
                </div>
            </div>

          <div class="modal-footer">
             <button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal">
              <i class="fa fa-close"></i> Close
            </button>
            <button type="submit" id="editCheckTransactionBtn" name="editTransactionBtn" class="btn btn-success btn-flat" >
              <i class="fa fa-edit"></i> Edit Details
            </button>
          </div>

      </div>
    </div>
  </div>
</div>

---

使用hidden.bs.modalevent的重置功能

请查看工作示例

//在页面准备就绪后执行某些操作 $document.readyfunction{ }; //单击外部编辑按钮时，打开模式 $'.edit'。单击函数{ $“编辑检查”。模式“显示”； }; //因为编辑按钮的类型是submit //您不需要单独的事件。你可以 //用户表单提交事件以跟踪所有内容 $'myFormModal'。在'submit'上，函数E{ e、 防止违约； //你在这里工作吗 //最后，重新设置表单 重置我的表单； }; //表单重置功能 函数resetMyForm{ $'input'.val； $‘付款方式’.val0； } //如果模态关闭，请重置所有内容 $edit_check.onhidden.bs.modal，函数{ 重置我的表单； }; .模态确认{ 颜色：636363； 宽度：400px； } input.noBorder{ 边界：无； 背景色：透明； } .模态确认.模态内容{ 填充：20px； 边界半径：5px； 边界：无； 文本对齐：居中； 字体大小：14px； 宽度：600px； } .modal-confirm1.modal-content1{ 填充：20px； 边界半径：5px； 边界：无； 文本对齐：居中； 字体大小：14px； 宽度：600px； } .模态确认.模态标题{ 边框底部：无； 位置：相对位置； } .模态确认h4{ 文本对齐：居中； 字号：26px； 利润率：30像素0-10像素； } .模态确认。关闭{ 位置：绝对位置； 顶部：-5px； 右：-2px； } .模态确认.模态体{ 颜色：999； } .modal确认.modal页脚{ 边界：无； 文本对齐：居中； 边界半径：5px； 字体大小：13px； 填充：10px 15px 25px； } .模式确认.模式页脚a{ 颜色：999； } .模式确认.图标框{ 宽度：80px； 高度：80px； 保证金：0自动； 边界半径：50%； z指数：9； 文本对齐：居中； 边框：3px实心f15e5e； } .模式确认.图标框i{ 颜色：f15e5e； 字体大小：46px； 显示：内联块； 边缘顶端：13px； } .modal confirm.btn{ 颜色：fff； 边界半径：4px； 背景：60c7c1； 文字装饰：无； 过渡：全部为0.4s； 线高：正常； 最小宽度：120px； 边界：无； 最小高度：40px； 边界半径：3px； 利润率：0.5px； 大纲：无！重要； } .模态内容{ 宽度：125%； } .modal confirm.btn信息{ 背景：c1c1； } .modal-confirm.btn-info:hover、.modal-confirm.btn-info:focus{ 背景：a8a8a8； } .模态确认.btn危险{ 背景：f15e5e； } .模态确认.btn危险：悬停，.模态确认.btn危险：聚焦{ 背景：ee3535； } .触发btn{ 显示：内联块； 保证金：100像素自动； } × 编辑支票交易记录 客户： 公司： 地址: 交易编号： 编辑付款方式： 选择付款方式 现金 网上现金 检查 银行名称： 银行分行： 数量： 支票号码： 日期： 关 编辑详细信息

---

编辑模式您可以编写逻辑以清除关闭模式事件中的字段，如下所示

$("#edit_check").on("hidden.bs.modal", function () {
    // reset all your fields
          $('#client').val('');
          $('#company').val('');
          $('#address').val('');
          $('#trans_number').val('');
          //transaction details
          $('#edit_bank_name').val('');
          $('#edit_bank_branch').val('');
          $('#edit_amount').val('');
          $('#edit_check_number').val('');
          $('#edit_check_date').val('');
});

---

你好我刚在我的帖子里读到你的评论，我应该把它放在哪里？在我的ajax结果内部？它应该作为一个单独的函数在外部执行。我还将它放在我的函数外部，我使用了$'myFormModal'。triggerreset；它按预期工作，但隐藏输入没有显示，只有默认选择的选项值。您能为此创建一个提琴吗，然后我们可以很容易地给出答案。您好，先生！我 看看我帖子里的评论。我会试试你的方法。谢谢

// when modal dismissed
$('selector').on('hidden.bs.modal', function () {
    // Your reset function
    resetEverything()
})

$("#edit_check").on("hidden.bs.modal", function () {
    // reset all your fields
          $('#client').val('');
          $('#company').val('');
          $('#address').val('');
          $('#trans_number').val('');
          //transaction details
          $('#edit_bank_name').val('');
          $('#edit_bank_branch').val('');
          $('#edit_amount').val('');
          $('#edit_check_number').val('');
          $('#edit_check_date').val('');
});