I have created a form to take input from the user and then checking that input in my DB and accordingly displaying the same input on another form which is displaying over the first form on the same page using AJAX. However, the second form has a datepicker to display which is not working. If I open the second form url directly, it starts to work but not on submitting the first form. I think something is wrong with the code.
Here's the code-
Index.html
<html>
<head></head>
<body>
<div id="overlay"></div>
<div id="formContainer2">
<form id="myForm">
<div id="closeIcon" onclick="closeFormContainer()">✖</div>
<div class="form-group">
<label for="Number">Enter Number: </label>
<input type="text" class="form-control" maxlength="3" minlength="3" id="inputVal" name="number" required>
</div>
<div class="btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<script>
document.getElementById('myForm').addEventListener('submit', function(event){
event.preventDefault();
var formData = new FormData(this);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'index.php', true);
xhr.onload = function(){
if(xhr.status === 200){
var responseData = xhr.responseText;
document.getElementById('overlay').innerHTML = responseData;
document.getElementById('formContainer2').style.display = 'none';
document.getElementById('overlay').style.display = 'block';
}
};
xhr.send(formData);
});
</script>
</body>
</html>
index.php
---------
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Include Bootstrap Datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- Include jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Include Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Include Bootstrap Datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
<div class="container">
<form action="process_form.php" method="post">
<?php
---------DB code------
?>
<div class="input-group date">
<input type="text" class="form-control" id="datepicker" name="datepicker">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br><br>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
<script>
// Function to initialize datepicker
$(document).ready(function(){
$("#datepicker").datepicker({
format: 'yyyy-mm-dd',
autoclose: true
})
});
</script>
</body>
</html>
Screenshot-
