As I practice working with functions and dynamically creating input fields, I have encountered an issue where I am unable to append my input field to the form. Despite using console.log() and not seeing any errors, I can't figure out what mistake I may be making as a beginner in programming.
This is my HTML:
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1>test</h1>
</div>
<div class="panel-body">
<form action="save.php" method="POST" id="testing">
</form>
<h1>test as well</h1>
</div>
<div class="panel-footer">
<h1>test</h1>
</div>
</div>
</div>
This is my JavaScript/jQuery code:
function getEblock() {
let eBlock = ($('<div/>', {
'class': 'col-md-2'
}));
return eBlock;
}
$(getEblock()).appendTo('#testing');
$(getEblock()).append(getInputDistanceTime());
function getInputDistanceTime() {
let inputField = ($('<input/>', {
'type': 'text',
'name': 'distanceTime',
'placeholder': 'test',
'class': 'form form-control'
}));
return inputField;
}
This is how my header section looks like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
I have ensured that everything is properly declared in my header.