Olá pessoal tudo bem?
Preciso de uma ajuda com um checkbox simples, mas para mim está sendo o maior desafio pensar em como desenvolvê-lo:
Tenho três botões radio: Manhã (09:00h/12:00h) - Tarde (12:00h/17:00) - Noite (17:00/++...)
e um checkbox: Urgente
Queria uma função que verificasse o nosso horário e ao clicar no período escolhido fosse marcado urgente.
Por exemplo:
- Sistema de solicitação de atendimento.
- Trabalho com um suporte em horário comercial, meu horário é das 9 às 18h.
- Quando alguém selecionar o horário "Manhã" que gostaria de ser atendido e ainda fosse manhã (9h - 12h) o checkbox "Urgente" fosse marcado.
- Também assim com o horário "Tarde".
- Quando alguém selecionar o horário "Noite" sempre marcar "Urgente". (isso eu até que consegui)
- Quando alguém selecionar para a data de "Hoje" nos critérios acima, fosse marcado "Urgente". (Porém, acredito que se o código verificar o horário atual com o horário definido para os radios dando igualdade na data não irá complicar tanto)
- Se fosse selecionada uma data futura (dia seguinte) o checkbox Urgente não fosse marcado.
Eu sei que é bem complicado da forma que estou pedindo, mas se já estou correndo atrás de ajuda é porque não sou tão bom assim como vocês. (Tento pensar simples mas não consigo haha)
Segue uma cópia do meu código, com algumas tentativas com o código comentado:
Uso datepick para o calendário...
Javascript
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <!--necessario-->
<script type="text/javascript" src="js/jquery.mask.min.js"></script> <!--necessario-->
<script type="text/javascript" src="js/jquery.charcounter.js"></script> <!--necessario-->
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <!--necessario-->
<script type="text/javascript">
jQuery(function($){
$('#txtTelefone').mask("(99)9999-99999").focusout(function(){
var phone, element;
element = $(this);
element.unmask();
phone = element.val().replace(/\D/g, '');
if(phone.length > 10) {
element.mask("(99)99999-9999");
} else {
element.mask("(99)9999-99999");
}
}).trigger('focusout'); //MASCARA DE TELEFONE
$("#date").mask("99/99/9999",{placeholder:" "}); //MASCARA DE DATA
});
function d(id){ //getelementbyid
return document.getElementById(id);
}
function n(name){ //getelementbytagname
return document.getElementsByTagName(name);
}
function myFunction()
{
var e = new Date();
var x = document.getElementById("date");
x.innerHTML=e.getDay();
}
function countChar_Servico(val){ //PARA LIMITAR CARACTERES - necessário jquery para funcionar */
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
$('#problema').text(0 + " caractere restante");
}else {
$('#charNum_Servico').text(500 - len + " caracteres restantes");
}
};
function valida(){
var nome = document.frm.txtNome.value;
var email = document.querySelector("#txtEmail").value;
var telefone = document.querySelector("#txtTelefone").value;
var mail = new RegExp(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i);
var tel = new RegExp (/^\(11\)9?[2-9]{1}[0-9]{3}-[0-9]{4}|\([1-9][0-9]\)[2-9]{1}[0-9]{3}-[0-9]{4}$/); //- para telefones
if(nome==""){
alert("Informe seu Nome!");
document.frm.txtNome.focus();
}
else if(email==""){
alert("Informe seu e-mail!");
document.frm.txtEmail.focus();
return false;
}
else if(telefone==""){
alert("Informe seu Telefone!");
document.frm.txtTelefone.focus();
return false;
}
if(mail.test(email)){
}else{
alert("Email Inválido!");
document.frm.txtEmail.focus();
return false;
}
if(tel.test(telefone)){
alert("Sua solicitação foi enviada para agendamento.\n \nTicket:<?echo $ticket['ticket']+1; ?>");
document.frm.submit();
return true;
}else{
alert("Telefone Inválido!");
return false;
document.frm.txtTelefone.focus();
}
}
function verifica_feriado(){
var ano;
ano = $("#date").val();
ano = ano.substr(6);
PrintDatas(ano);
$('input[name=chkferiado]').attr('checked', false); //Desabilita
if (DataCarnaval == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataPascoa == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataCorpusChristi == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataAnoNovo == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataAnivSAO == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataTiradentes == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataTrabalhador == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataRevolucao == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataIndependencia == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataAparecida == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataTodosOsSantos == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataProcramlacao == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataConNegra == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
if (DataNatal == $("#date").val()){
$('input[name=chkferiado]').attr('checked', true);
}
}
$("#date").change(function(){
var date = $("#date").datepicker('getDate');
var dayOfWeek = date.getUTCDay();
$('input[name=urgente]').attr('checked', false);
if (dayOfWeek === 0) {
$('input[name=urgente]').attr('checked', true);
}
if (dayOfWeek === 6) {
$('input[name=urgente]').attr('checked', true);
}
verifica_feriado();
});
$.datepicker.regional['pt-BR'] = {
closeText: 'Fechar',
prevText: '<Anterior',
nextText: 'Próximo>',
currentText: 'Hoje',
monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho',
'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
'Jul','Ago','Set','Out','Nov','Dez'],
dayNames: ['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 0,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['pt-BR']);
$(function() { //calendario
$('#date').datepick();
$('#inlineDatepicker').datepick({onSelect: showDate});
});
function showDate(date) {
alert('The date chosen is ' + date);
}
//função checar se for noite como urgente
function checarur(){
document.frm.urgente.checked = true;
}
/* if(document.getElementByID("horarion").checked == true);
{
document.getElementByID("urgente").checked = true
}
}
function dchecarur(){
if(document.getElementByID("horarion").checked == false);
{
document.getElementByID("urgente").checked = false
}}*/
//função carregar checarur
/*window.onload=function(){
dchecarur();
}*/
</script>
HTML
</script>
<link type="text/css" href="css/jquery.datepick.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.datepick.js"></script>
<body>
<font face="tahoma" size="3">
<br>
<b>Solicitação de agendamento de atendimento.</b>
<form name="frm" id="frm" method="post" action="concluido2.php">
<table border="0">
<tr><td>
Nome:
</td><td> </td><td><input type="text" name="txtNome" id="txtNome" size="85" value=""></td><td></td></tr>
<tr><td>
E-mail:
</td><td></td><td><input type="text" name="txtEmail" id="txtEmail" value="" size="85"></td><td> </td></tr>
<tr><td>
Cliente:</td><td>Selecione o cliente</td><td> <select id="txtCliente" name="txtCliente">
<option value="Cliente 1">Cliente 1</option>
</select> Telefone: <input type="text" name="txtTelefone" id="txtTelefone" size="38" maxlength="16">
</td><td></td>
<td> </td></tr>
<tr>
</td></tr>
<tr><td>
Custo:
</td><td> </td><td><input type="radio" name="custo" id="custo" value="local" checked>
Local
<input type="radio" name="custo" id="custo" value="Local">
Contato:
<input type="text" name="contato" id="contato" size="58"></td><td></td></tr>
<tr><td>
Data:
</td><td></td><td><input type="text" name="date" id="date" size="23" value="<?php echo $datadeamanha; ?>" maxlength="30">
<font size="2">(Data e hora para o agendamento do atendimento)</font></td></tr>
<tr>
<td>
Horário:
</td><td> </td><td><div align="justify">
<input type="radio" name="horario" id="horariom" value="Manhã 09:00 - 13:00 ">
09:00-13:00 |
<input type="radio" name="horario" id="horariot" value="Tarde 13:00 - 17:00">
13:00-17:00 |
<input type="radio" name="horario" id="horarion" value="Noite" onClick="checarur()">
Noite
<input type="checkbox" name="urgente" id="urgente" value="- Urgente">
<?/* ($dataatual != $datadeamanha) // Verifica se a data está correta
{
echo "<input type='checkbox' name='urgente' id='urgente' value='Urgente'>"; //urgente marcado
}else{
echo "<input type='checkbox' name='urgente' id='urgente' value='Urgente' checked>"; //urgente desmarcado
// Valor Correto Reajustado
}
*/?>
<b>Urgente </b></div></td><td></td></tr>
</table>
<table border="0">
<td>
Solicitação:<BR>
</td><td></td></tr><tr>
<td>
<textarea name="problema" id="problema" rows="6" cols="77" onkeyup="countChar_Servico(this)"></textarea><br><div id="charNum_Servico">500 caracteres restantes</div>
</td></tr>
<tr><td>
<!-- Observação:<BR>
</td><td></td></tr>
<tr><td>
<textarea name="observacao" id="observacao" rows="6" cols="76" onkeyup="countChar_Servico(this)"></textarea>
</td><td></td></tr>-->
</font>
</table>
<input type="button" name="confirmar" value="CONFIRMAR" onClick="valida();">
