We Keep Coding

I have a problem when I click collapse button

I have a problem. The view is like this :
When I click button see more the view is like this :
The problem is, I want the view is like this :
city beside state,
country beside zip code
How to fix this ? and what should I have to do ?
<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
<div class="col-md-6 mb-20">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
<?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
<?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-md-6 mb-20">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
<?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
<?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
</div>
<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
<div class="row">
<div class="col-md-6 mb-20">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="">
</div>
<div class="col-md-6 mb-20">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-20">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-md-6 mb-20">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="">
</div>
</div>
<input class="mb-0" type="text" name="date_created" value="" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
See more...

You're using col-md-6 so I think you should actually get the result you want in larger viewports. You could use col-6 which should work even in small viewports:
<div class="row col-md-12 col-12 mb-20 collapse" id="registerform" >
<div class="row mb-20">
<div class="col-6">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
<?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-6">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
<?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
</div>
<div class="row mb-20">
<div class="col-6">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-6">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
<?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
</div>
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
<?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
</div>
<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

Event focus on select with Materialize

I want to add a class when a select has event select, this is my code:
$("form").find("input,select").on('focus',function(){
$(this).addClass("focus");
});
$("form").find("input,select").on('blur',function(){
$(this).removeClass("focus");
});
This is my HTML:
<form id="formEdit" method="post" action="<?=current_url();?>" enctype="multipart/form-data">
<div class="form-pad">
<div class="row">
<!--<div class="col s12 m8 push-m4">-->
<div class="col s12">
<div class="input-field">
<input id="nombre" name="nombre" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="20" value="<?=$nombre;?>" required>
<input name="userID" type="hidden" value="<?=$userID;?>">
<input name="status" type="hidden" value="<?=$status;?>">
<label for="nombre" class="active">Nombres</label>
</div>
<div class="input-field">
<input name="apellidos" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="30" value="<?=$apellidos;?>" required>
<label for="apellidos" class="active">Apellidos</label>
</div>
<div class="input-field">
<input name="email" type="email" class="validate" maxlength="49" value="<?=$correo;?>" required>
<label for="email" class="active">Correo Electrónico</label>
</div>
<div class="input-field">
<select id="select_privilegios" name="FK_id_rol" required>
<?=($id_rol=='') ? '<option value="" disabled selected>Seleccionar</option>': ''?>
<?php
foreach ($roles as $role) {
echo '<option value="'.$role->roleId.'" '.(($id_rol == (int)$role->roleId) ? 'selected': '').'>'.$role->role.'</option>';
}
?>
</select>
<label>Privilegios</label>
</div>
<div id="div_empresas" class="input-field">
<select name="id_empresa[]" id="select_empresas" multiple required>
<?php
$ids = array_map(function($e) {
return is_object($e) ? $e->id_empresa : $e['id_empresa'];
}, $id_empresa);
foreach ($empresas as $empresa) {
echo '<option value="'.$empresa->id_empresa.'" '.(in_array($empresa->id_empresa, $ids) ? 'selected': '').'>'.$empresa->nombre .'</option>';
}
?>
</select>
<label>Empresas</label>
</div>
</div>
</div>
<!-- Save Cancelar -->
<div class="row">
<div class="col s12 m12 l12 buttons" style="padding: 0">
<div id="botones">
<button class="waves-effect waves-light btn" type="submit" name="action1"><i class="material-icons right">done</i>Guardar</button>
<?php if($userID>0): ?>
<span href="#warningModal" class="modal-trigger waves-effect waves-light btn <?=($status)? "red lighten-1" : "blue darken-4";?>"><i class="material-icons right"><?=($status)? "delete" : "lock_open";?></i><?=($status)? "Eliminar" : "Habilitar";?></span>
<button type="submit" name="action2" class="hide"></button>
<?php endif; ?>
<i class="material-icons right">clear</i>Cancelar
</div>
</div>
</div>
</div>
</form>
This code work very well in input text or other types of input but, in select elements don´t detect the focus event. If someone could help me,
I would appreciate it very much.

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 run jQueryValidation plugin without using a form tag?

I am using jQueryValidation plugin and I read some of the documentation but I don't know if you can run jqueryvalidator without a form. What I need is run the jqueryvalidator using the event in the button.
Here's some of my code:
<div class="row" id="form-validate">
<div class="col-md-3">
<div class="form-group">
<label for="usernamedata">Username</label>
<select name="username" class="usernamedata form-control" style="width: 100%;">
<?php if(isset($filter_username)) { ?>
<option value="<?php echo $filter_username; ?>"><?php echo $get_username; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email_address" placeholder="sample#email.com" value="<?php echo $filter_email; ?>" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Date Added</label>
<div class='input-group date' id='date-added'>
<input type="text" class="form-control datepicker" name="date_added" placeholder="YYYY-MM-DD" value="<?php echo $filter_date_added; ?>" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status">
<option value=""></option>
<option value="1" <?php ($filter_status == 1) ? 'selected="selected"' : ''; ?>>Enabled</option>
<option value="0" <?php ($filter_status == 0) ? 'selected="selected"' : ''; ?>>Disabled</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group text-right">
<button type="button" class="btn btn-primary" id="filter-data"><i class="fa fa-search"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
I wrap all my needed textfields in the ID #form-validate
And I want this onclick event to process the validation
$("#filter-data").on('click', function(){
//do the validation here
if(!myValidation) {
//success
} else {
//display error
}
});

Javascript to add subtotal and gratuity to get a total charge

I'm working on this form and I've been trying to add a field to get gratuity added in. I wanted to get a field with grand total to populate with the sum of the total and gratuity together so customers can see what they will be charged. I can not seem to get the field to run the total. I would love any help on this. Thanks!
FORM
<form method="post" action="" id="payment-form">
<div class="col-sm-12">
<div class="container">
<div class="row-fluid">
<?php foreach ($products as $product) : ?>
<div class="col-sm-6 container-cart">
<div class="thumbnail">
<?php if ($product->image_url): ?>
<img class="img-responsive" src="<?=$product->image_url ?>" />
<?php endif // image_url ?>
<div class="caption">
<div class="well">
<h3 class="product-title"><?= $product->title ?></h3>
<p class="product-description"><?= $product->description ?></p>
</div>
<div class="row-fluid">
<div class="input-group input-group-sm scrow">
<p class="lead">
<span id="item-price">$<?= money_format('%i', $product->price) ?></span>
<input type="hidden" class="price-integer form-control" value="<?= money_format('%i', $product->price) ?>">
</p>
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">Quantity</span>
<input type="text" name="products[<?=$product->id ?>]" id="quantity" class="quantity form-control" autocomplete="off" value="<?=$_POST['products['. $product->id . ']'] ?>">
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">Delivery Date</span>
<input type="text" name="delivery" id="delivery" class="form-control date-picker" autocomplete="off" value="">
</div>
<div class="input-group input-group-sm scrow">
<span class="input-group-addon">$</span>
<input type="text" name="base-total" id="base-total" class="readonly base-total form-control" value="" readonly>
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</div>
</div>
<?php endforeach // products ?>
</div>
</div>
</div>
<div class="containter">
<div class="row-fluid">
<div class="col-sm-6 col-sm-offset-3">
<span>Total :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="total-cart" id="total-cart" class="readonly total-cart form-control" value="" disabled="disabled">
<span class="input-group-addon">.00</span>
</div>
<span>Gratuity :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="gratuity" id="gratuity" class="gratuity form-control" value="">
<span class="input-group-addon">.00</span>
</div>
<span>Grand Total :</span>
<div class="input-group scrow">
<span class="input-group-addon">$</span>
<input type="text" name="grand-total" id="grand-total" class="readonly grand-total form-control" value="" disabled="disabled">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group input-group-sm scrow">
<button class="btn btn-default" type="submit">Submit Payment</button>
</div>
</div>
</div>
</div>
</form>
JAVASCRIPT
$('.quantity').on('keyup', function() {
var sum = 0;
$(".container-cart").each(function(i,o){
total = parseInt($(o).find("#quantity").val(), 10) * parseInt($(o).find("input.price-integer").val(), 10);
if(!isNaN(total) /*&& total.length!=0**/) {
$(o).find("#base-total").val(total);
sum += total;
}
});
$("#total-cart").val(sum);
});
$('#gratuity').on('keyup', function() {
grandTotal = parseInt($(o).find('#gratuity').val(), 10) += parseInt($(o).find('#total-cart').val(), 10);
$('$grand-total').val(grandTotal);
});

Change
$('$grand-total').val(grandTotal);
to
$('#grand-total').val(grandTotal);
Id selector is used as #id
Also, remove += in case to adding the values use just +
$('#gratuity').on('keyup', function() {
grandTotal = parseInt($(o).find('#gratuity').val(), 10) + parseInt($(o).find('#total-cart').val(), 10);
$('#grand-total').val(grandTotal);
});