Using ASP.NET MVC, I'm creating one input dynamically using a loop with data from the database.
<div class="col-md-12" id="div-contatos">
@if (Model.PessoasContatosViewModel != null)
{
@for (int i = 0; i < Model.PessoasContatosViewModel.Count; i++)
{
<div class="form-group row align-items-center">
<div class="col-md-2">
@Html.HiddenFor(model => model.PessoasContatosViewModel[i].Id, new { @class = "hid-id" })
<label asp-for="PessoasContatosViewModel[i].ContatoTipoId" class="control-label sel-contatoTipo">Tipo de Contato</label>
<select asp-for="PessoasContatosViewModel[i].ContatoTipoId" asp-items="Model.ContatosTipos" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow sel-contatoTipo"></select>
<span asp-validation-for="PessoasContatosViewModel[i].ContatoTipoId" class="text-danger"></span>
</div>
<div class="col-md-4">
<label asp-for="PessoasContatosViewModel[i].Contato" class="control-label txt-contato">Contato</label>
<input type="text" asp-for="PessoasContatosViewModel[i].Contato" class="form-control txt-contato" />
<span asp-validation-for="PessoasContatosViewModel[i].Contato" class="text-danger"></span>
</div>
<div class="col-md-3">
<label asp-for="PessoasContatosViewModel[i].Detalhes" class="control-label txt-detalhes">Detalhes</label>
<textarea asp-for="PessoasContatosViewModel[i].Detalhes" class="form-control txt-detalhes"></textarea>
</div>
<div class="col-md-2">
<label class="control-label"> </label>
<div class="checkbox-custom checkbox-default">
<input type="checkbox" asp-for="PessoasContatosViewModel[i].ContatoPrincipal" class="ckb-contatoPrincipal" checked autocomplete="off" />
<label asp-for="PessoasContatosViewModel[i].ContatoPrincipal" class=" ckb-contatoPrincipal">Contato Principal</label>
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-icon btn-default btn-outline btn-remover-contato" data-id="@Model.PessoasContatosViewModel[i].Id" style="margin-top: 30px;"><i class="icon wb-trash" aria-hidden="true"></i></button>
</div>
</div>
}
}
</div>
Using JavaScript, when I click the Add Contact button, I need to know how many inputs I have inside my div-contacts. For this, I'm using JS:
var itemIndex = $("#div-contatos input.iHidden").length;
The problem is that it is not working. Return is 0. What is wrong?