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

Question

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

JS Fiddle

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>

我只是编码的初学者此代码此代码不起作用所以请帮助我

Any other methos is there?

这里的例子:

  [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);
  });

});