Question

我有选择选项。在更改选项时，我显示不同的div并在提交之前使用引导程序验证器。如果输入为空，然后按开按钮，它将禁用。并且在选项更改按钮上未激活。如何重置输入和选项更改按钮？

$('#shexsselect').on('change', function() {
  value = $(this).val();
  if (value == 1) {
    //do something
  } else {
    //do something
  }
});

$(document).ready(function() {
  $('#form_fin').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon',
      invalid: 'glyphicon',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      pinofsv: {
        message: 'The username is not valid',
        validators: {
          notEmpty: {
            message: 'for label 2'
          },
        }
      },
      shexsselect: {
        validators: {
          notEmpty: {
            message: 'choose'
          }
        }
      },
      voen: {
        validators: {
          notEmpty: {
            message: 'for label2'
          }
        }
      }
    }
  });
});

<form name="form_fin" id="form_fin" action="" method="POST">
  <div class="col-sm-12">
    <div class="form-group" id="shexsdiv">
      <label>Selectionn: </label>
      <select class="form-control " name="shexsselect" id="shexsselect" required>
        <option value='' selected disabled>Choose</option>
        <option value='1'>First</option>
        <option value='2'>Second</option>
      </select>
    </div>
  </div>
  <div class="col-sm-12" id="voendiv">
    <div class="form-group">
      <label>label2:</label>
      <input type="text" class="form-control " name="voen" id="voen">
    </div>
  </div>
  <div class="col-sm-12" id="fin_input">
    <div class="form-group">
      <label>Label2:</label>
      <div class="input-group">
        <input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
  </div>
</form>

我尝试了excluded: [':disabled'],，但是它没有帮助，并且jquery尝试重置和清除，但没有帮助

Answer 1

在onchange内添加select，然后在此处调用函数以重置输入字段的值。

下面是工作代码：

function resetFields() {
  document.getElementById("voen").value = "";
  document.getElementById("pinofsv").value ="";
}

<form name="form_fin" id="form_fin" action="" method="POST">
  <div class="col-sm-12">
    <div class="form-group" id="shexsdiv">
      <label>Selectionn: </label>
      <select onchange="resetFields()" class="form-control " name="shexsselect" id="shexsselect" required>
        <option value='' selected disabled>Choose</option>
        <option value='1'>First</option>
        <option value='2'>Second</option>
      </select>
    </div>
  </div>
  <div class="col-sm-12" id="voendiv">
    <div class="form-group">
      <label>label2:</label>
      <input type="text" class="form-control " name="voen" id="voen">
    </div>
  </div>
  <div class="col-sm-12" id="fin_input">
    <div class="form-group">
      <label>Label2:</label>
      <div class="input-group">
        <input type="text" class="form-control" name="pinofsv" id="pinofsv" required />
      </div>
    </div>
  </div>
  <div class="col-sm-12">
    <button type="submit" class="btn btn-info" name="checkfin" id="checkfin">Submit</button>
  </div>
</form>

阅读here有关onchange事件的更多信息

在选择中更改选项时重置按钮和引导程序验证

1 个答案: