Question

当我单击提交按钮时，我的引导程序模式弹出窗口不起作用。我只能使用bootstrap4，Js，Jquery3.0

function check() {
  var inputs = document.getElementsByTagName("input");
  var inputs = document.getElementsByTagName("select");
  var inputs = document.getElementsByTagName("radio");
  var filled = true;
  var oneChecked = false;

  for (var i = 0; i < inputs; i++) {
    if (inputs[i].type === "text" && !inputs[i].value) {
      filled = false;
    }

    if (inputs[i].type === "select" && inputs[i].value) {
      filled = false;
    }

    if (inputs[i].type === "radio" && inputs[i].checked) {
      oneChecked = true;
    }
  }
  if (!oneChecked) {
    filled = false;
  }

  for (var j = 0; j < inputs; j++) {
    if (!inputs[j].value) {
      filled = false;
    }
    if (!inputs[j].oneChecked) {
      filled = true;
    }
  }

  if (filled) {
    document.getElementById("submitacc").disabled = false;
  } else {
    document.getElementById("submitacc").disabled = true;
  }
}

window.addEventListener("keyup", check);
window.addEventListener("click", check);

<div>
  <form class="contactForm">
    <div class="row">
      <!-- From Account name -->
      <div class="form-group col-6" style="margin-bottom: 0px;">
        <label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">Select the A/c from which the records are to be transferred:*</label>
        <select class="form-control select-data .has-success" name="frm_account" id="frm_acc" required>
          <option value="">Choose an items</option>
          <option value="1">Plumz</option>
          <option value="2">Plumz2</option>
          <option value="3">Plumz3</option>
          <option value="4">Plumz4</option>
          <option value="5">Plumz5</option>
        </select>
        <div class="input-group col-sm-6 p-sm-0 form-group"></div>
      </div>
      <!-- To account name -->
      <div class="form-group col-6" style="margin-bottom: 0px;">
        <label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">Select the A/c to which the records are to be transferred:*</label>
        <select class="form-control select-data .has-success" name="to_account" id="to_acc" required>
          <option value="">Choose an items</option>
          <option value="1">Plumz</option>
          <option value="2">Plumz2</option>
          <option value="3">Plumz3</option>
          <option value="4">Plumz4</option>
          <option value="5">Plumz5</option>
        </select>
        <div class="input-group col-sm-6 p-sm-0 form-group"></div>
      </div>
    </div>
    <div>

  </form>

  <!-- Submit Button -->

  <div class="form-group ml-auto mt-2 mb-0">
    <div class="col-md-12 stockform_submit" id="">
      <button type="submit" class="btn add-btn submit-btn disabled" data-toggle="modal" data-target="#merge_err" disabled>Submit</button>
      <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button>
    </div>
  </div>

  <!-- modal -->

  <div class="modal fade" id="merge_err">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Error..</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p class="popup-text">Merging option Faild in Transaction record TXN#:XXXXXXX</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger ml-10 pull-right okbutton" id="ok" data-dismiss="modal">Ok</button>
          <!-- onclick="window.location.href='accmaster.html'" -->
        </div>
      </div>
    </div>
  </div>

我只是编码的初学者此代码此代码无法正常工作，请帮助我

还有其他方法吗？

此处示例：

  [1]: https://jsfiddle.net/joelshah/vo0qcs6h/

My example link is here

我只想在填写表单时显示启用提交按钮，然后单击显示的提交按钮模式弹出窗口

Answer 1

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="contactForm">
        <div class="form-group col-6" style="margin-bottom: 0px;">
          <label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">Select the A/c from which the records are to be transferred:*</label>
          <select class="form-control select-data .has-success" name="frm_account" id="frm_acc" required>
            <option value="">Choose an items</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz2</option>
            <option value="3">Plumz3</option>
            <option value="4">Plumz4</option>
            <option value="5">Plumz5</option>
          </select>
          <div class="input-group col-sm-6 p-sm-0 form-group"></div>
        </div>
        <!-- To account name -->
        <div class="form-group col-6" style="margin-bottom: 0px;">
          <label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">Select the A/c to which the records are to be transferred:*</label>
          <select class="form-control select-data .has-success" name="to_account" id="to_acc" required>
            <option value="">Choose an items</option>
            <option value="1">Plumz</option>
            <option value="2">Plumz2</option>
            <option value="3">Plumz3</option>
            <option value="4">Plumz4</option>
            <option value="5">Plumz5</option>
          </select>
          <div class="input-group col-sm-6 p-sm-0 form-group"></div>
        </div>
        <button type="button" class="btn add-btn submit-btn" data-toggle="modal" data-target="#merge_err">Submit</button>
        <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button>
      </form>
    </div>
  <div>
</div>

    <div class="modal" id="merge_err">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Error..</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p class="popup-text">Merging option Faild in Transaction record TXN#:XXXXXXX</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger ml-10 pull-right okbutton" id="ok" data-dismiss="modal">Ok</button>
          </div>
        </div>
      </div>
    </div>

使用JQuery代替冗长的javascript代码

jQuery：

$(document).ready(function(){


 // For Disabling the submit button
  $('.submit-btn').attr('disabled',true);
  $('select').on('change', function() {
    if($('#frm_acc').val() > 0 && $('#to_acc').val() > 0) {
      $('.submit-btn').attr('disabled',false);
    }
  });

  $('.reset-btn').on('click', function() {
    $('.submit-btn').attr('disabled',true);
  });

});

Answer 2

当您可以选择使用jQuery时，我不确定为什么要编写普通的JavaScript。

尽管如此，您的函数check（）仍存在许多错误。主要是每次调用getElementsByTagName时都会重写输入变量。我猜您正在尝试获取所有输入，选择和单选元素，并检查它们是否具有值，并相应地更新您的填充变量。

getElementsByTagName返回一个元素数组。您可以使用ES6扩展运算符和forEach来检查具有值的输入。

检查所附的代码段。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div>
  <form class="contactForm">
    <div class="row">
      <!-- From Account name -->
      <div class="form-group col-6" style="margin-bottom: 0px;">
        <label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">Select the A/c from which the records are to be transferred:*</label>
        <select class="form-control select-data .has-success" name="frm_account" id="frm_acc" required>
          <option value="">Choose an items</option>
          <option value="1">Plumz</option>
          <option value="2">Plumz2</option>
          <option value="3">Plumz3</option>
          <option value="4">Plumz4</option>
          <option value="5">Plumz5</option>
        </select>
        <div class="input-group col-sm-6 p-sm-0 form-group"></div>
      </div>
      <!-- To account name -->
      <div class="form-group col-6" style="margin-bottom: 0px;">
        <label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">Select the A/c to which the records are to be transferred:*</label>
        <select class="form-control select-data .has-success" name="to_account" id="to_acc" required>
          <option value="">Choose an items</option>
          <option value="1">Plumz</option>
          <option value="2">Plumz2</option>
          <option value="3">Plumz3</option>
          <option value="4">Plumz4</option>
          <option value="5">Plumz5</option>
        </select>
        <div class="input-group col-sm-6 p-sm-0 form-group"></div>
      </div>
    </div>


  </form>
</div>

<!-- Submit Button -->

<div class="form-group ml-auto mt-2 mb-0">
  <div class="col-md-12 stockform_submit" id="">
    <button type="submit" id="submitacc" class="btn add-btn submit-btn" data-toggle="modal" data-target="#merge_err" disabled>Submit</button>
    <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button>
  </div>
</div>

<!-- modal -->

<div class="modal fade" id="merge_err">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Error..</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p class="popup-text">Merging option Faild in Transaction record TXN#:XXXXXXX</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger ml-10 pull-right okbutton" id="ok" data-dismiss="modal">Ok</button>
        <!-- onclick="window.location.href='accmaster.html'" -->
      </div>
    </div>
  </div>
</div>

{{1}}

如果在显示中间打开提交按钮单击模式弹出窗口？

2 个答案: