I have two forms in there own div's they are both hidden until the user selects a radio button then the appropriate form will show. I wanted to make sure these forms get displayed in the exact same spot on the page. Currently they are stacked on top of each other and one form is on top of the page the other is near the bottom.
In my current example the problem is not as bad as my actual code but you can definitely see the behavior I am talking about. I also have the following jsFiddle jsFiddle link
<script type="text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("ccformContainer").style.visibility = 'visible';
document.getElementById("paypalformContainer").style.visibility = 'hidden';
} else if (c.value == "2") {
document.getElementById("ccformContainer").style.visibility = 'hidden';
document.getElementById("paypalformContainer").style.visibility = 'visible';
} else {}
}
</script>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>show form 1
<br>
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>show form 2</form>
<div style="visibility:hidden; position:relative" id="ccformContainer">
<form id="ccform" class="needs-validation container" >
<hr>
<p>THIS IS FORM 1</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form1 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form1 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
</form>
</div>
<div style="visibility:hidden;position:relative;top:-110px;margin-top:-110px" id="paypalformContainer">
<form id="paypalform" class="needs-validation container">
<hr>
<p>THIS IS FORM 2</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form2 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form2 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
</form>
</div>
<br>
<div id="float_right">
<input type="submit" name="submit3" value="submit">
</div>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('ccform');
form.addEventListener('submit', function(event) {
console.log(form.checkValidity());
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
if (form.checkValidity() === true) {
// console.log(form.checkValidity());
// event.preventDefault();
this.querySelector('.loader-container').style.display = 'block';
// the line below is just for the demo, it stops the form from submitting
// so that you can see it works. Don't use it
// event.preventDefault();
}
}, false);
}, false);
})();
</script>
