When I press the button it should add one more div, like the one below, calling JS function called comida_campos()
.
<div class="panel panel-default">
<div class="panel-body">
<div id="comida_campos">
</div>
<div class="col-sm-6 nopadding">
<div class="form-group">
<input id="quantidade" class="form-control"name="quantidade[]" placeholder="Quantidade/g" type="text" value="">
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="form-group">
<div class="input-group" id="replicate">
<select class="form-control" name="alimento[]">
<option value="">Alimento</option>
<script>
document.write('<?php
$it=0;
while($it <= 9){
echo '<option value="'.$array_of_aliments[$it]['Idalimento'].'">'.$array_of_aliments[$it]['alimento'].'</option>';
$it++;
}
?>');
</script>
</select>
<div class="input-group-btn">
<button class="btn btn-success" onclick="comida_campos();" type="button">
<span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</div>
</div>
</div>
Result of the code
Here is the JS fuction:
var room = 1;
function comida_campos() {
room++;
var objTo = document.getElementById('comida_campos')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML = '<div class="col-sm-6 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Quantidade/g"></div></div><div class="col-sm-6 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="alimento[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields(' + room + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
The problem is that I want to insert my PHP while circle is inside the divtest.innerHtml
, and I don't have any idea how to do this.