My bootstrap modal popup is not working when I click the submit button. I can only use Bootstrap4, JS, and 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">×</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>I am just a beginner in coding and struggling with this code. Please help me make it work.
Is there any other method?
Example here:
[1]: https://jsfiddle.net/joelshah/vo0qcs6h/
I want the submit button to be enabled when the form is filled, and after clicking the submit button, the modal popup should show.