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>
Pergunta
Stalin Nunes
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();">Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.