We Keep Coding

Get values from input-group using jquery

I am needing to get the two input values within the input group, and would like to know how best to do this with jquery.
<form id="mgscall" name="contactform" data-toggle="validator">
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall1" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="1">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +(000) 000-00-00" alt="1">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall2" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="2">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +(000) 000-00-00" alt="2">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
</form>

checkout this snippet.
let data = {}
let groups = $('form .input-group').each(function (index) {
let id = $(this).attr('id');
// create field name from id and index. e.g. fld1_1
const field = `${id}_${index+1}`;
// find required input elements
$(this).find('input').not(':input[type=checkbox]').each(function (i) {
// get the last class name. e.g. tvc/tvp
const inputType = $(this).attr('class').split(' ').pop();
data[field] = {
...data[field], // spread current items
[inputType] : $(this).val() // set new input value
}
})
});
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="mgscall" name="contactform" data-toggle="validator">
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall1" class="form-control tvc" placeholder="Contact" aria-label="Username"
alt="1">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +(000) 000-00-00" alt="1">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall2" class="form-control tvc" placeholder="Contact" aria-label="Username"
alt="2">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +(000) 000-00-00" alt="2">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
</form>

You can use $(e).find(".tvc") to get the input values:
$(".btnGet").click(function(){
var values = [];
$("#mgscall .input-group").each(function(i,e){
var tvc = $(e).find(".tvc").val();
var tvp = $(e).find(".tvp").val();
values.push({"tvc":tvc,"tvp":tvp});
});
console.log(values);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="mgscall" name="contactform" data-toggle="validator">
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall1" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="1">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +(000) 000-00-00" alt="1">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
<div class="mb-3">
<div class="input-group" id="fld1">
<input type="text" id="phonecall2" class="form-control tvc" placeholder="Contact" aria-label="Username" alt="2">
<span class="input-group-text"><i class="mdi mdi-exclamation"></i></span>
<span class="input-group-text"><i class="mdi mdi-truck-delivery"></i></span>
<input type="text" class="form-control phone-number tvp" placeholder="Ex: +(000) 000-00-00" alt="2">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
</div>
<input type="button" class="btnGet" value="Get Values"/>
</form>

When filling in the fields + active checkbox, we activate the button

I have a form with different fields and what I am trying is that the Submit button is not active until all the entries and the acceptance checkbox are filled and checked, in fact if an entry is removed afterwards the button is disabled again.
The point is that the inputs work correctly for me, but I can't get the checkbox to work properly, if I get it until I click on it and everything is full, the button doesn't get activated, but if I remove the box again , the button is still on.
My code:
(function() {
$('#infoEquipo > div > div > div > input, textarea').keyup(function() {
$("#micheckbox334").on("click", function(){
var empty = false;
$('form > div > div > div > input, textarea').each(function() {
if ($(this).val() == '' && $(this).is(":checked")){ // <- ambas deben cumplirse
empty = true;
}
});
if (empty) {
$('#llamada223').attr('disabled', 'disabled');
} else {
$('#llamada223').removeAttr('disabled');
}
});
});
})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form enctype="multipart/form-data" id="infoEquipo" method="post" class="formInfo">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="separaInput">
<i class="fas fa-user form-control-email2"></i>
<input type="text" class="form-control myInput2" name="nombre" id="nombreLL" placeholder="Persona de contacto" required >
</div>
<div class="separaInput">
<i class="fas fa-mobile-alt form-control-email2"></i>
<input type="text" class="form-control myInput2" name="telefono" id="telefono" placeholder="Teléfono"required>
</div>
<div class="separaInput">
<i class="fas fa-envelope form-control-email2"></i>
<input type="text" class="form-control myInput2" name="email" id="email" placeholder="Email" required>
</div>
<div class="separaInput">
<i class="fas fa-map-marker-alt form-control-email2"></i>
<input type="text" class="form-control myInput2" name="ciudad" id="cuidad" placeholder="Ciudad" required>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="separaInput">
<i class="fas fa-building form-control-email2"></i>
<input type="text" class="form-control myInput2" name="centro" id="centro" placeholder="Nombre del centro" required>
</div>
<div class="separaInput" style="display:none;">
<i class="fas fa-sign-in-alt form-control-email2"></i>
<input type="text" class="form-control myInput2" name="equipo" id="equipo" value="<?php echo $encu['nombreEquipo'];?> <?php echo $encu['small'];?>">
</div>
<div class="form-group separaInput2">
<textarea class="form-control myInput3" name="mensaje" id="mensaje" rows="5" required></textarea>
</div>
</div>
</div>
<div class="col-12 center">
<div class="">
<input type="checkbox" class="micheckbox334" id="micheckbox334" style="display:inline-block;">
</div>
</div>
<div id="mensajeResp" style="text-align:center" style="margin-bottom:2%;">
</div>
<button type="submit" id="llamada223" class="btn btn-primary btnNews2 espacioEnvia" disabled="disabled">MÁS INFORMACIÓN</button>
</form>

You could try this. I recommend using .prop() when you deal with html attributes, especially when you keep changing them conditionally.
(function() {
var button = $('#llamada223');
var checkbox = $("#micheckbox334");
var inputs = $('.text-input');
function switchButton(state){
if(state === "off"){
button.prop('disabled', true);
}else if(state === "on"){
button.prop('disabled', false);
}
}
function inputsAreField(){
var input_are_filled = true;
inputs.each(function(index, input){
if( $(input).val() === undefined ||
$(input).val() === '' ||
!$(input).val()){
input_are_filled = false;
}
});
return input_are_filled;
}
checkbox.change(function(){
if(inputsAreField() && checkbox.is(":checked")){
switchButton("on");
}else{
switchButton("off");
}
});
inputs.each(function(index,input){
$(input).keyup(function(){
if(inputsAreField() && checkbox.is(":checked")){
switchButton("on");
return;
}
switchButton("off");
});
});
})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="infoEquipo" method="post" class="formInfo">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="separaInput">
<i class="fas fa-user form-control-email2"></i>
<input type="text" class="form-control text-input myInput2" name="nombre" id="nombreLL" placeholder="Persona de contacto" required >
</div>
<div class="separaInput">
<i class="fas fa-mobile-alt form-control-email2"></i>
<input type="text" class="form-control text-input myInput2" name="telefono" id="telefono" placeholder="Teléfono"required>
</div>
<div class="separaInput">
<i class="fas fa-envelope form-control-email2"></i>
<input type="text" class="form-control text-input myInput2" name="email" id="email" placeholder="Email" required>
</div>
<div class="separaInput">
<i class="fas fa-map-marker-alt form-control-email2"></i>
<input type="text" class="form-control text-input myInput2" name="ciudad" id="cuidad" placeholder="Ciudad" required>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="separaInput">
<i class="fas fa-building form-control-email2"></i>
<input type="text" class="form-control text-input myInput2" name="centro" id="centro" placeholder="Nombre del centro" required>
</div>
<div class="separaInput" style="display:none;">
<i class="fas fa-sign-in-alt form-control-email2"></i>
<input type="text" class="form-control text-input myInput2" name="equipo" id="equipo" value="<?php echo $encu['nombreEquipo'];?> <?php echo $encu['small'];?>">
</div>
<div class="form-group separaInput2">
<textarea class="form-control text-input myInput3" name="mensaje" id="mensaje" rows="5" required></textarea>
</div>
</div>
</div>
<div class="col-12 center">
<div class="">
<input type="checkbox" class="micheckbox334" id="micheckbox334" style="display:inline-block;">
</div>
</div>
<div id="mensajeResp" style="text-align:center" style="margin-bottom:2%;">
</div>
<button type="submit" id="llamada223" class="btn btn-primary btnNews2 espacioEnvia" disabled="disabled">MÁS INFORMACIÓN</button>
</form>

Programmatically simulate a click on an element when Enter is pressed in a field

My html:
<div class="container">
<div class="row d-none d-md-block d-xl-none" id="PrescriptionTitle">
<div class="col-sm-6">
<span for="" class="text-left">Brand Name</span>
</div>
<div class="col-sm-6">
<span for="">Generic name</span>
</div>
<div class="col-sm-2">
<span for="">Dose</span>
</div>
<div class="col-sm-2">
<span for="">Units</span>
</div>
<div class="col-sm-3 col-sm-offset-5">
<span class="text-nowrap" for="">Frequency</span>
</div>
<div class="col-sm-1">
<span for="">Durn</span>
</div>
<div class="col-sm-2">
<span for="inputEmail4">Units</span>
</div>
</div>
<div class="row DrugRow" id="DrugRow1">
<div class="col-sm-6">
<input type="text" id="brand1" class="form-control BrandName input-sm ui-autocomplete-input" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
<input type="text" id="generic1" class="form-control GenericName input-sm ui-autocomplete-input" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="dose1" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="doseunits1" class="form-control DoseUnits input-sm ui-autocomplete-input" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
<input type="text" id="freq1" class="form-control Frequency input-sm ui-autocomplete-input" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durn1" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durnunit1" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="">
</div>
<div class="col-sm-1">
<a id="DelRow1" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>
<div class="row DrugRow" id="DrugRow2">
<div class="col-sm-6">
<input type="text" id="brand2" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
<input type="text" id="generic2" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="dose2" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="doseunits2" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
<input type="text" id="freq2" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durn2" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durnunit2" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="" autocomplete="off">
</div>
<div class="col-sm-1">
<a id="DelRow2" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>
<div class="row">
<div class="col-sm-23"></div>
<div class="col-sm-1">
<a id="AddRow1" class="btn btn-primary btn-large AddRow" href="#" tabindex="5"><i class="fa fa-plus-circle fa-lg"></i></a>
</div>
</div>
</div>
Javascript code snippet:
var $input = $('input[type=text]');
$input.on('keyup', function (e) {
var myClass = $(this).attr("class");
console.log(myClass);
if (myClass.indexOf("DurationUnits") != -1) {
$(this).siblings('.AddRow').click();
return true;
}
// DurationUnits
if (e.which === 13) {
var ind = $input.index(this);
$input.eq(ind + 1).focus()
}
});
$('body').on('click', '.AddRow', function() {
// $("#DiscardModal").modal();
console.log("Clicked Add Row");
var id = 0;
var count = 0;
var IdList=[];
$(".DrugRow").each(function() {
id = $(this).attr('id');
count = id.replace("DrugRow", "");
});
var lastelementcount = count;
console.log("Last element count is " + lastelementcount);
count++;
var NewHTML = `
<div class="row DrugRow" id="DrugRow` + count + `">
<div class="col-sm-6">
<input type="text" id="brand` + count + `" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
<input type="text" id="generic` + count + `" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="dose` + count + `" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="doseunits` + count + `" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
<input type="text" id="freq` + count + `" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durn` + count + `" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durnunit` + count + `" class="form-control DurationUnits input-sm" placeholder="days" aria-label="DurationUnits" aria-describedby="">
</div>
<div class="col-sm-1">
<a id="DelRow` + count + `" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>
`;
$("#DrugRow" + lastelementcount).after(NewHTML);
event.preventDefault();
return false;
});
I need to move to the next input field on pressing Enter. I have successfully done that. When I come to the last input field on a row (which has a class DurationUnits), I need to simulate a click on the adjacent button which has a class AddRow. This is an element, and clicking this will create a few elements by javascript code (already done).
What's not working is the code simulating a click when enter is pressed from the input with class DurationUnits

It's because you return true if it has class "DurationUnits".
The return stops the function from executing the condition that follows (e.which === 13)
if (myClass.indexOf("DurationUnits") != -1) {
....
return true;
}
// On class "DurationUnits" this won't run:
if (e.which === 13) {
....
}

Add dynamically new input fields from multiselect choosen list

I have this modal form and i want to insert new fields when someone select more than on item in the second select, so, if I choose 3 itens, 3 new input fields are added dynamically to the form.
This is my form
<!--Nova visita-->
<div class="modal fade bs-example-modal-lg" id="myModalNovaVisita" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header card-infos">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><i class="glyphicon glyphicon-plus-sign"></i> Registar Nova Visita de Estudo</h3>
</div>
<div class="modal-body">
<form id="novaVisita" method="post">
<div class="form-group">
<label for="recipient-name" class="control-label">Escola:</label>
<select class="form-control" id="idEscola" name="idEscola" required>
<option value="0">Escolha a escola desta visita</option>
<option value="1">Carmo</option>
<option value="2">Frei</option>
<option value="3">Santa Maria Maior</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputFile">Turmas participantes na visita(tecla "shift" para seguidos, "ctrl"
para
separados)</label>
<select name="turmasVisitas[]" id="turmasVisitas" class="form-control" multiple="multiple" style="height: 100pt;" onchange="getCount();">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Destino:</label>
<div class="input-group input-append date" id="localVisita">
<input class="form-control" name="novoDestino" id="novoDestino" placeholder="Destino desta visita">
<span class="input-group-addon add-on"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="data">Data da partida:</label>
<div class="input-group input-append date" id="startDatePicker">
<input type="text" class="form-control" name="startDate" />
<span class="input-group-addon add-on"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
</div>
</div>
<div class="col-md-6">
<label for="data">Hora da partida:</label>
<div class="input-group input-append date" id="horaPartida">
<input type="text" class="form-control" name="part" onchange="validateHhMm(this)" />
<span class="input-group-addon add-on"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="ajaxDivErroHora" style="display:none" class="alert alert-danger"></div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="data">Data do regresso:</label>
<div class="input-group input-append date" id="endDatePicker">
<input type="text" class="form-control" name="endDate" />
<span class="input-group-addon add-on"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
</div>
</div>
<div class="col-md-6">
<label for="data">Hora do regresso:</label>
<div class="input-group input-append date" id="horaChegada">
<input type="text" class="form-control" name="cheg" onchange="validateHhMm(this)" />
<span class="input-group-addon add-on"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="ajaxDivErroHora1" style="display:none" class="alert alert-danger"></div>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Professores Acompanhantes:</label>
<div class="input-group input-append date" id="acompanhantes">
<input class="form-control" name="acomp" id="acomp" placeholder="">
<span class="input-group-addon add-on"><i class="fa fa-user-circle" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Departamento(s):</label>
<select name="dpt[]" id="dpt" class="form-control" multiple="multiple" style="height: 100pt;">
<?php echo $optionDpt ?>
</select>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Áreas/Disciplinas Envolvidas:</label>
<div class="input-group input-append date" id="areas_disc">
<input class="form-control" name="areas" id="areas" placeholder="">
<span class="input-group-addon add-on"><i class="fa fa-bars" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<label for="iti">Itinerário:</label>
<div class="input-group input-append date" id="itiVisita">
<textarea class="form-control" rows="2" id="iti" name="iti"></textarea>
<span class="input-group-addon add-on"><i class="fa fa-road" aria-hidden="true"></i></span>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Domínios (tecla "shift" para seguidos, "ctrl" para
separados):</label>
<select name="dominios[]" id="dominios" class="form-control" multiple="multiple" style="height: 100pt;">
<?php echo $optionDominios ?>
</select>
</div>
<div class="form-group">
<label for="iti">Plano de Ocupação(turmas não abrangidas pela vista):</label>
<div class="input-group input-append date" id="itiVisita">
<textarea class="form-control" rows="2" id="planoRecuperacao" name="planoRecuperacao"></textarea>
<span class="input-group-addon add-on"><i class="fa fa-list-alt" aria-hidden="true"></i></span>
</div>
</div>
<fieldset class="scheduler-border">
<legend class="scheduler-border card-infos">Transporte</legend>
<div class="row">
<div class="col-md-6">
<label for="notas">Tipo: </label>
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="optradio" id="optradio"
value="Autocarro Autarquia">Autocarro Autarquia
</label>
<label class="btn btn-default">
<input type="radio" name="optradio" id="optradio" value="Autocarro Alugado">Autocarro
Alugado
</label>
<label class="btn btn-default">
<input type="radio" name="optradio" id="optradio" value="Outros">Outros
</label>
</div>
</div>
</div>
<div class="col-md-3">
<label for="custo">Total Alunos:</label>
<div class="form-group">
<label class="form-inline">
<div class="input-group input-append date" id="totalVisita">
<input type="text" class="form-control" name="alunos"
placeholder="ex: 100"/>
<span class="input-group-addon add-on"><i class="fa fa-graduation-cap"
aria-hidden="true"></i></span>
</div>
</label>
</div>
</div>
<div class="col-md-3">
<label for="custo">Custo Individual:</label>
<div class="form-group">
<label class="form-inline">
<div class="input-group input-append date" id="custoVisita">
<input type="text" class="form-control" name="custo"
placeholder="ex: 20 €"/>
<span class="input-group-addon add-on"><i class="fa fa-eur"
aria-hidden="true"></i></span>
</div>
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<label class="col-xs-12 control-label">Observações:</label>
<div class="col-xs-12">
<textarea rows="5" class="form-control" name="obs" id="obs"></textarea>
</div>
</div>
<br>
<div class="form-group">
<input type="hidden" class="form-control" name="userid" id="userid"
value="<?php echo $id_prof; ?>">
</div>
<div class="form-group">
<input type="hidden" class="form-control" name="novaVisita" id="novaVisita" value="novaVisita">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Registar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</div>
And my javascript is this :
function getCount() {
var count = $("#turmasVisitas :selected").length;
console.log(count);
var i;
for (i = 0; i < count.length; i++) {
$('<input type="text"/>').appendTo('novaVisita');
}
}
Nothing appears with this code...
Any help.

Your code is almost right! You've two small bugs in there :
You should addd the id sign # to this line :
$('<input type="text"/>').appendTo('#novaVisita');
____________________________________^
Remove the length from the loop since count is already a number :
for (i = 0; i < count.length; i++) {
_____________________^^^^^^^
Should be :
for (i = 0; i < count; i++) {
Hope this helps.
function getCount() {
var count = $("#turmasVisitas :selected").length;
console.log(count);
var i;
for (i = 0; i < count; i++) {
$('<input type="text"/>').appendTo('#novaVisita');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Nova visita-->
<div class="modal fade bs-example-modal-lg" id="myModalNovaVisita" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header card-infos">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><i class="glyphicon glyphicon-plus-sign"></i> Registar Nova Visita de Estudo</h3>
</div>
<div class="modal-body">
<form id="novaVisita" method="post">
<div class="form-group">
<label for="recipient-name" class="control-label">Escola:</label>
<select class="form-control" id="idEscola" name="idEscola" required>
<option value="0">Escolha a escola desta visita</option>
<option value="1">Carmo</option>
<option value="2">Frei</option>
<option value="3">Santa Maria Maior</option>
</select>
</div>
<div class="form-group">
<select name="turmasVisitas[]" id="turmasVisitas" class="form-control" multiple="multiple" style="height: 100pt;" onchange="getCount();">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</form>
<br><br><br>
</div>
</div>
</div>
</div>

.appendTo('#novaVisita'), you forgot the #
Otherwise it should work.

How hide text input by combobox

How hide
<input type="text" class="form-control" name="c_a" id="c_a" value="$" >
when i select
<option value="img/p.png" >Piad</option>
in combobox
this form i used thank for evey one .
<form name="Form1" method="post" action="dashboard.php" id="Form1">
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-user"></i></span>
<input type="text" class="form-control" name="c_number" value="" placeholder="TEST#TEST"></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-key"></i></span>
<input type="text" class="form-control" name="c_bab" value="" placeholder="Password"></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-phone"></i></span>
<input type="text" class="form-control" name="c_serail" value="" placeholder="0723228499" ></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-usd"></i></span>
<input type="text" class="form-control" name="c_a" id="c_a" value="$" ></div>
<div class="form-group input-group">
<span class="input-group-addon" ><i class="fa fa-link"></i></span>
<input type="text" class="form-control" name="c_point" value="" placeholder="اذا كان اليوزر تابع لمسوق او وكيل" ></div>
<div class="form-group input-group">
<select name="c_status" id="c_status" size="1" class="form-control" >
<option value="img/p.png" >Piad</option>
<option value="img/un.png">unPiad</option>
</select>
</div>
<input type="submit" class="btn btn-success" name="cards" value="ادخال" >
</form>

A pretty basic function to do this would be:
function hideElements() {
var selected = document.getElementById('c_status').value;
if (selected == 'img/p.png') {
document.getElementById('c_a').style.display = 'none';
} else {
document.getElementById('c_a').style.display = 'inline';
}
}
then you could add the following to your select box:
<select name="c_status" id="c_status" size="1" class="form-control" onchange="hideElements(this);" >