I have a form that only enables the forward button when the field is filled in or selected.
The fields Subscriber , Subscriber Name , and Installation Date are allowing you to delete your content after you fill it out.
The problem is that people are filling in to enable and then delete the contents of the field and the button does not disable.
This form, only displays one question at a time and each button, is of the buttom type and only at the end I give a submit.
That's why I can not use the required . Home
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
<head>
<meta charset="utf-8">
<meta charset="ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<meta name="description" content="">
<meta name="author" content="Gigaline">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../mpv/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../mpv/css/bootstrap-responsive.min.css" type="text/css">
<link rel="stylesheet" href="../mpv/css/estilo.css" type="text/css">
<link rel="stylesheet" href="../mpv/css/habilita.css" type="text/css">
<!-- JQuery -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 1,
maxDate: "0D",
dateFormat: "yy'/'mm'/'dd",
showAnim: "clip",
firstDay: 0,
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true,
yearRange: '2000:2020',
monthNames: ["Janeiro", "Feveveiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
onSelect: function() {
$(this).click();
}
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="well">
<h2 class="centraliza_texto">Preencha abaixo os campos:</h2>
<form action="responde_questionario.php" id="myform" method="post">
<div id="myform">
<div class="centraliza">
<fieldset>Cód. Assinante:
<input type="text" name="cod_assinante" maxlength="7" class="input-mini" title="Favor inserir o Código do Cliente (Integrator)." />
Ou Assinante:
<input type="text" name="assinante" title="Favor inserir o nome do cliente." />
<br />
<button type="button" disabled="true" class="avancar btn btn-primary pull-right">Avancar</button>
</fieldset>
</div>
<!-- Data Instalação -->
<div class="centraliza">
<fieldset>Data Instalação:
<input id="datepicker" type="text" name="data_instalacao" />
<br />
<br />
<button type="button" class="voltar btn btn-primary pull-left">Voltar</button>
<button type="button" disabled="true" class="avancar btn btn-primary pull-right">Avancar</button>
</fieldset>
</div>
<div class="centraliza">
<fieldset>
<div class="centraliza_texto">
<h4 class="text-info centraliza_texto">
<?php
$query = $con->query("SELECT informacao FROM pv_informacao where ativo = 1 and cod_informacao = 2");
while($reg = $query->fetch_array())
{
echo $reg["informacao"];
}
?>
</h4>
</div>
<ol style="margin-left: 15%; margin-right: 12%;">
<b><li>Informar sobre alteração de senha na página da Gigaline;</li></b>
<b><li>Informar da segunda via do boleto pela página da Gigaline;</li></b>
<b><li>Informar telefone e Horários de atendimento do suporte e do escritório;<br />sobre alteração de senha na página da Gigaline;</li></b>
<b><li>Informar sobre chuvas com descarga eletromagnéticas.</li></b>
</ol>
<br />
<br />
<button type="button" class="voltar btn btn-primary pull-left">Voltar</button>
<button type="submit" class="avancar btn btn-primary pull-right">Avancar</button>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('.centraliza:first').show();
$('input, select').on('click', function() {
var fieldset = $(this).closest('fieldset')
var campos = fieldset.find('input, select');
var button = fieldset.find('.avancar')[0];
var preenchido = false;
campos.each(function() {
if (this.value != '') preenchido = true;
})
button.disabled = !preenchido;
});
$('.avancar').on('click', function() {
$(this).closest('.centraliza').slideUp().next().slideDown();
//
});
$('.voltar').on('click', function() {
$(this).closest('.centraliza').slideUp().prev().slideDown();
});
</script>
<script>
function formatarData(d){
var data = d || new Date();
var segundos = data.getSeconds();
var minutos = data.getMinutes();
var horas = data.getHours();
return [horas, minutos, segundos].join(':');
}
var inicio = new Date();
var tempos = [formatarData(inicio)];
$('button.contador').click(function () {
var agora = new Date();
tempos.push(formatarData(agora));
});
$('#final').click(function () {
alert(tempos.join('\n'));
});
</script>
<script src="../mpv/js/bootstrap.min.js"></script>
</body>
</html>