We Keep Coding

How to renumber items when one of them is removed?

I have a use-case where input controls are listed and a remove button. The user has the option to remove any of the item in the list. I need to be able to check that there is more then one item in the list before I can remove the item. I also need to renumber the div, span and input control. So if a user removes id=1 I want to remove that item and they renumber then starting with 1.
function RemoveRow(id) {
if (id > 0) {
let rowCount = $('[id^=newrowItem_]').length
if (rowCount != 1) {
let removeData = `#newrowItem_${id}`;
$(removeData).remove();
// Re-number
let inputdatagripPanel = $("#inputDataGrippanel");
var inputdatagripForm = inputdatagripPanel.find(".form-group");
let fieldItemid = 1;
// $(inputdatagripForm).each((index, item) => {
// console.log(item);
// let fieldItem = `#fieldrowItem_${fieldItemid}`;
// item.attr('id', fieldItem);
// id++;
// });
} else {
let fieldItem = `#fieldrowItem_${id}`;
$(fieldItem).addClass('error');
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div id="inputDataGrippanel" class="col-sm-6 row">
<div id="inputDataGrippanel" class="col-sm-6 row">
<label>Rows</label>
<div class="form-group" id="newrowItem_1">
<div class="input-group">
<input type="text" id="fieldrowItem_1" class="form-control fieldrowItem mb-3" placeholder="Row 1" data-value="0" required="" value="a">
<span id="spanrowItem_1" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(1)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_2">
<div class="input-group">
<input type="text" id="fieldrowItem_2" class="form-control fieldrowItem mb-3" placeholder="Row 2" data-value="0" required="" value="b">
<span id="spanrowItem_2" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(2)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_3">
<div class="input-group">
<input type="text" id="fieldrowItem_3" class="form-control fieldrowItem mb-3" placeholder="Row 3" data-value="0" required="" value="c">
<span id="spanrowItem_3" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(3)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_4">
<div class="input-group">
<input type="text" id="fieldrowItem_4" class="form-control fieldrowItem mb-3" placeholder="Row 4" data-value="0" required="" value="d">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_5">
<div class="input-group">
<input type="text" id="fieldrowItem_5" class="form-control fieldrowItem mb-3" placeholder="Row 5" data-value="0" required="" value="e">
<span id="spanrowItem_5" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(5)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
</div>

I have fixed a missing span in your HTML, modified the code that calls RemoveRow to be dynamic and added the logic that renumbers
function RemoveRow(id) {
let divs = document.querySelectorAll('div.form-group');
if ((id > 0) && (id <= divs.length)) {
let rowCount = $('[id^=newrowItem_]').length
if (rowCount != 1) {
let removeData = `#newrowItem_${id}`;
$(removeData).remove();
// Re-number
/*let inputdatagripPanel = $("#inputDataGrippanel");
var inputdatagripForm = inputdatagripPanel.find(".form-group");
let fieldItemid = 1;*/
let index = 1;
divs = document.querySelectorAll('div.form-group');
for (let div of divs) {
div.id = `newrowItem_${index}`;
div.querySelector('input').id = `fieldrowItem_${index}`;
div.querySelector('span').id = `spanrowItem_${index}`;
index++;
}
// $(inputdatagripForm).each((index, item) => {
// console.log(item);
// let fieldItem = `#fieldrowItem_${fieldItemid}`;
// item.attr('id', fieldItem);
// id++;
// });
} else {
let fieldItem = `#fieldrowItem_${id}`;
$(fieldItem).addClass('error');
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div id="inputDataGrippanel" class="col-sm-6 row">
<div id="inputDataGrippanel" class="col-sm-6 row">
<label>Rows</label>
<div class="form-group" id="newrowItem_1">
<div class="input-group">
<input type="text" id="fieldrowItem_1" class="form-control fieldrowItem mb-3" placeholder="Row 1" data-value="0" required="" value="a">
<span id="spanrowItem_1" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_2">
<div class="input-group">
<input type="text" id="fieldrowItem_2" class="form-control fieldrowItem mb-3" placeholder="Row 2" data-value="0" required="" value="b">
<span id="spanrowItem_2" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_3">
<div class="input-group">
<input type="text" id="fieldrowItem_3" class="form-control fieldrowItem mb-3" placeholder="Row 3" data-value="0" required="" value="c">
<span id="spanrowItem_3" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_4">
<div class="input-group">
<input type="text" id="fieldrowItem_4" class="form-control fieldrowItem mb-3" placeholder="Row 4" data-value="0" required="" value="d">
<span id="spanrowItem_4" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
<div class="form-group" id="newrowItem_5">
<div class="input-group">
<input type="text" id="fieldrowItem_5" class="form-control fieldrowItem mb-3" placeholder="Row 5" data-value="0" required="" value="e">
<span id="spanrowItem_5" class="input-group-addon" style="cursor:pointer;" onclick="RemoveRow(parseInt(this.id.split('_')[1]))">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</span>
</div>
</div>
</div>

When I select one value from the dropdown button, the other values appear as well

I was wondering if you can help me out with the following. I created a dropdown payment option. When I select "checking/savings account" the form displays 2 input fields so that the user can type in their banking account number and router number. This is what I want for this option. However, when I select the credit card option, the credit card form appears, but the banking form appears on top of it. Can someone tell me what I am doing wrong? Also, when I switch options back and forth, the forms do not change at all, but remain the same.
document.getElementById('paymentOptions').onchange = function () {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
} else {
document.getElementById('Banking').style.display = 'block';
}
}
<div class="col-75">
<div class="container">
<form>
<label>Payment method</label>
<select id="paymentOptions" name="paymentOptions">
<option value="CreditCard">Credit Card</option>
<option value="BankingAccount">Checking/Savings Account</option>
</select>
<div class="row" id="Banking" style="display: none">
<div class="col-50">
<label for="ccnum">Bank Account</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
<div class="col-50">
<label for="ccnum">Routing Number</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
</div>
<div class="row" id="CreditCard" style="display: none">
<div class="col-50">
<label for="fname"><i class="fa fa-user"></i> Company Name</label>
<input type="text" id="fname" name="firstname">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
</div>
</div>
</div>
<div class="col-50">
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv">
</div>
</div>
</div>
</div>
<p>
<input type="checkbox" id="autopayment" />
<label for="autopayment">Enroll in autopayment</label>
</p>
<input type="submit" value="Submit payment" class="btn">
</form>
</div>
</div>
</div>

You have to hide the other value when that one is selected in other words toggling
document.getElementById('paymentOptions').onchange = function() {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none'
} else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none'
}
}

The reason for the problems you are getting is that you change the display of your CreditCard div and Banking div to block but you do not change them back to display: none if they are not chosen.
Also you should add an onload listener to check what the initial value of your paymentOptions dropdown is to then change the display value of your 2 divs.
window.onload = () => {
const paymentOptionsSelect = document.getElementById("paymentOptions");
const selectedOption = paymentOptionsSelect.options[paymentOptionsSelect.selectedIndex].value;
if (selectedOption == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none';
}
else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none'
}
};
Look carefully at the 2 added lines in your change listener:
document.getElementById('paymentOptions').onchange = function () {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none'; // set back to display none when CreditCard is not selected.
} else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none' // set back to display none when Banking is not selected.
}
}
Good luck!

Try with Jquery 3.3.1 approach, Hoping this can help you
$(document).ready(function(){
$("#paymentOptions").on('change', function(){
if ($(this).val() == 'CreditCard') {
$('#CreditCard').css('display','block');
$('#CreditCard').css('display','none');
} else {
$('#CreditCard').css('display','none');
$('#CreditCard').css('display','block');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-75">
<div class="container">
<form>
<label>Payment method</label>
<select id="paymentOptions" name="paymentOptions">
<option value="CreditCard">Credit Card</option>
<option value="BankingAccount">Checking/Savings Account</option>
</select>
<div class="row" id="Banking" style="display: none">
<div class="col-50">
<label for="ccnum">Bank Account</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
<div class="col-50">
<label for="ccnum">Routing Number</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
</div>
<div class="row" id="CreditCard" style="display: none">
<div class="col-50">
<label for="fname"><i class="fa fa-user"></i> Company Name</label>
<input type="text" id="fname" name="firstname">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
</div>
</div>
</div>
<div class="col-50">
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv">
</div>
</div>
</div>
</div>
<p>
<input type="checkbox" id="autopayment" />
<label for="autopayment">Enroll in autopayment</label>
</p>
<input type="submit" value="Submit payment" class="btn">
</form>
</div>
</div>
</div>

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>

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 to activate form field one by one with the valid values user entered

I do have a Form and now I need to activate this form's field one by one. That mean If an user fill out first field correctly (Not empty and should be valid) then I need to activate second one and so on.
This is my HTML form:
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
This is how I tried it in jquery:
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
$('.sequence').on('change blur keyup', enableNextElement);
});
This coding working for me but not work with validation. That mean if an user entered a not valid email next field is activating. But I want to keep next field disable till user entered a valid email.
Can anybody tell me how to do it?
UPDATED HTML
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
Thank you.

your both function call simultaneously and you havent mention sequence class to textboxes so you can try
http://jsfiddle.net/Vishnuk/uqfe2403/6/
html
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name sequence" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Script
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
enableNextElement(event);
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
});

Try this
$(".form-control").focusout(function() {
var t = $(this).val();
var k = $(this);
setTimeout(function() {
if (t) {
k.parent().parent().next(".form-group").find(".form-control").removeAttr('disabled');
} else {
k.parent().parent().nextAll(".form-group").children().find(".form-control").attr('disabled', '');
}
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<div class="form-group element-right">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>