Tengo problemas al intentar llamar una función de JavaScript
para que me despliegue dos input
dinámicos en html
.
Cuando presiono mi botón con onclick="add_fields"
la consola me dice que no encuentra la función y no despliega nada. Debería desplegar un input
para ingresar un número y un dropdown
que contiene opciones que extraigo desde mi base de datos.
La función es correcta ya que si creo los campos de manera estática si funciona, el problema es al hacerlo dinámico.
<div id="criterios_fields"></div>
<div class="form-group">
<input onclick="add_fields()" class="btn btn-success" type="button" id="more_fields" value="Añadir material">
</div>
<script type="text/javascript">
var cename = 0;
function add_fields() {
cename++;
var objTo = document.getElementById('criterios_fields')
var divtest = document.createElement("div")
divtest.innerHTML = '<div class="form-group"><label class="control-label">' + cename +': </label><label class="control-label" for="cantidad">Cantidad:</label><span> <input class="form-control" type="number" style="width:60px;" name="cantidades[]" <id="cantidad" value="" min="1"/></span><br><label class="control-label" for="maaterial"> Material:</label><span><select style="width: 100%" rel="select2" name="materiales[]" id="material_id" class="form-control select2"> <option value="">Escoge Material</option> @foreach($materiales as $material) <option value="{{$material->id}}">{{$material->descripcion}} {{$material->codigo}} {{$material->unidad}}</option> @endforeach </select><br>';
divtest.innerHTML+='</div><hr><br>';
objTo.append(divtest)
}
</script>