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>
Related
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.
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) {
....
}
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.
<form class="signup nomargin sky-form boxed" id="signup_form" method="post" action="/accounts/signup/" autocomplete="off">
<input type="hidden" name="csrfmiddlewaretoken" value="H0nDydQL7RNNAStNwIRRILxa4WAVLExq">
<header>
<i class="fa fa-users"></i> 회원가입
</header>
<fieldset class="nomargin ">
<div id="div_id_username" class="form-group">
<div class="controls ">
<input class="textinput textInput form-control" id="id_username" maxlength="30" name="username" placeholder="아이디" type="text">
</div>
</div>
<div id="div_id_email" class="form-group">
<div class="controls ">
<input class="textinput textInput form-control" id="id_email" name="email" placeholder="이메일" type="email">
</div>
</div>
<div id="div_id_password1" class="form-group">
<div class="controls ">
<input class="textinput textInput form-control" id="id_password1" name="password1" placeholder="비밀번호" type="password">
</div>
</div>
<div id="div_id_password2" class="form-group">
<div class="controls ">
<input class="textinput textInput form-control" id="id_password2" name="password2" placeholder="비밀번호 확인" type="password">
</div>
</div>
<div class="note clearfix text-center margin-top-20">
<input type="checkbox" id="usage-agree"> Spacegraphy 이용약관 및 개인정보 취급방침에 동의합니다
</div>
<div class="clearfix note margin-bottom-10 text-center"> <br>
이미 계정이 있으시다구요? <br>
</div>
</fieldset>
<div class=" text-center">
<input type="submit" name="submit" value="가입하기" class="btn btn-primary btn btn-primary noradius" id="signup-btn" style="width:90%; margin:0px 0px 30px 0px;">
</div>
</form>
register.js
$(document).ready(function(){
$("#signup-btn").click(function(event){
event.preventDefault();
if ($("#usage-agree").prop('checked') != true) {
alert("이용약관에 동의해주세요");
} else {
$("#signup_form").submit();
}
});
});
If I would not check the #usage-agree checkbox, it shows alert.
But If I would, it didn't do anything. Nothing happened!
I want to submit the form if checkbox is checked.
I don't know what is wrong with my code.
It is because your have e.preventDefault() on click which prevent form submit.
$(document).ready(function(){
$("#signup-btn").click(function(event){
event.preventDefault(); // this prevent your form submit
if ($("#usage-agree").prop('checked') != true) {
alert("이용약관에 동의해주세요");
} else {
$("#signup_form").submit();
}
});
});
Instead you should do as follows,
$(document).ready(function(){
$("#signup-btn").click(function(event){
if ($("#usage-agree").prop('checked') != true) {
event.preventDefault(); //only if unchecked prevent
alert("이용약관에 동의해주세요");
} else {
$("#signup_form").submit();
}
});
});
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);" >