Below is the HTML code
<?php
include_once 'config.php';
?>
<!DOCTYPE HTLM>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<title>Formulário teste</title>
<!-- Biblioteca de font -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300italic,400italic,300,700,700italic&subset=latin,greek,cyrillic-ext,latin-ext,cyrillic,vietnamese" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- font final -->
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="57x57" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-96x96.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-160x160.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-160x160.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-160x160.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-160x160.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-32x32x.png">
<link rel="icon" type="image/png" sizes="96x96" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="160x160" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-160x160.png">
<link rel="icon" type="image/png" sizes="192x192" href="http://www.leforte.com.br/wp-content/uploads/2017/07/favicon-192x192.png">
<!-- Final favicon -->
<!-- css -->
<link rel="stylesheet" type="text/css" href="geral.css">
<!-- Final CSS -->
</head>
<body>
<section class="container">
<div class="resp"></div>
<form id="formulario" method="post" enctype="multipart/form-data" name="formulario">
<ul id="progress">
<li class="ativo">Dados Pessoais</li>
<li>Atendimento</li>
<li>Avalição</li>
<li>Finalizar</li>
</ul>
<fieldset>
<h2>Dados Pessoais</h2>
<h3>Preencha o campo abaixo</h3>
<input type="text" name="nome" placeholder="Insira seu nome...">
<input type="number" name="cpf" placeholder="Digite seu cpf...">
<input type="tel" name="telefone" placeholder="(xx) xxxxx-xxxx">
<input type="email" name="email" placeholder="Insira seu e-mail...">
<input type="button" name="next1" class="next acao" value="Proximo">
</fieldset>
<fieldset>
<h2>Atendimento</h2>
<p class="subtitulo">Informe se você recomendaria o Hospital LeForte a um parente ou amigo. Use uma nota de 0 à 5, sendo <b>0 "Nem um pouco provável"</b> e <b>5 "Altamente provável"</b>:</p>
<select name=nota" class="servicos-utilizado">
<option value="0">Selecione o quanto recomendaria...</option>
<option value="Nem um pouco provavel">1- Nem um pouco provável</option>
<option value="Pouco provavel">2- Pouco provável</option>
<option value="provavel">3- Provável</option>
<option value="muito provavel">4- Muito provável</option>
<option value="alto provavel">5- Altamente provável</option>
</select>
<textarea name="nota_comentario" id="comentario" cols="30" rows="7" placeholder="Comente sua nota..."></textarea>
<p class="pergunta-1">Qual é a sua relação com Hospital Leforte?</p>
<select name="relacao_hospital" class="servicos-utilizado">
<option value="0">Selecione sua relação...</option>
<option value="paciente">Paciente</option>
<option value="acompanhante">Acompanhante</option>
<option value="medico">Médico</option>
</select>
<p class="pergunta-1">Qual serviço do Hospital você utlizou?</p>
<select name="servicos" class="servicos-utilizado">
<option value="0">Selecione o hospital</option>
<option value="prontoatendendimento">Pronto Atendimento</option>
<option value="Centro Cardiologia">Centro de Cardiologia</option>
<option value="Centro de Oncologia">Centro de Oncologia</option>
<option value="coleta de exames">Coleta de Exames</option>
<option value="Radioterapia">Radioterapia</option>
<option value="Internacao">Internação</option>
<option value="Centro de Diagnostico">Centro de Diagnóstico</option>
<option value="Check-up">Check-up</option>
<option value="Nucelo Torax">Nucleo avançado do Tórax</option>
<option value="Banco de Sangue">Banco de Sangue</option>
<option value="Servico de Reabilitacao">Serviço de Reabilitação</option>
<option value="Ambulatório">Ambulatório</option>
<option value="Nucleo da Dor">Núcleo da Dor e distúrbios de movimento</option>
</select>
<input type="button" name="prev" class="prev acao" value="Anterior">
<input type="button" name="next2" class="next acao" value="Proximo">
</fieldset>
<fieldset>
<h2>Avalie-nos</h2>
<h3>Avalie os itens abaixo, conforme o seguinte critério:</h3>
<ul class="avaliacao">
<li>Muito abaixo das expectativas</li>
<li>Abaixo das expectativas</li>
<li>Expectativas Atendidas</li>
<li>Acima das expectativas</li>
<li>Muito acima das expectativas</li>
<li>Não utilizou o serviço do hospital</li>
</ul>
<h4 class="subtitulo-1">Sua Avaliação</h4>
<ul class="avaliacao-ass">
<p>Assistêncial</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="resposta-1">
<p>1- As informações sobre o seu tratamento foram em tempo adequado e de forma compreensível?</p>
<div class="estrelas">
<input type="radio" id="vazio" name="avaliacao_1" value="" checked>
<label for="estrela_um"><i class="fa"></i></label>
<input type="radio" id="estrela_um" name="avaliacao_1" value="1">
<label for="estrela_dois"><i class="fa"></i></label>
<input type="radio" id="estrela_dois" name="avaliacao_1" value="2">
<label for="estrela_tres"><i class="fa"></i></label>
<input type="radio" id="estrela_tres" name="avaliacao_1" value="3">
<label for="estrela_quatro"><i class="fa"></i></label>
<input type="radio" id="estrela_quatro" name="avaliacao_1" value="4">
<label for="estrela_cinco"><i class="fa"></i></label>
<input type="radio" id="estrela_cinco" name="avaliacao_1" value="5">
</div>
</ul>
<ul class="resposta-1">
<p>2- Suas necessidades individuais foram ouvidas e respeitadas pela equipe?</p>
<div class="estrelas">
<input type="radio" id="vazio" name="avaliacao_2" value="" checked>
<label for="avaliacao_um"><i class="fa"></i></label>
<input type="radio" id="avaliacao_um" name="avaliacao_2" value="1">
<label for="avaliacao_dois"><i class="fa"></i></label>
<input type="radio" id="avaliacao_dois" name="avaliacao_2" value="2">
<label for="avaliacao_tres"><i class="fa"></i></label>
<input type="radio" id="estrela_tres" name="avaliacao_2" value="3">
<label for="avaliacao_quatro"><i class="fa"></i></label>
<input type="radio" id="avaliacao_quatro" name="avaliacao_2" value="4">
<label for="avaliacao_cinco"><i class="fa"></i></label>
<input type="radio" id="avaliacao_cinco" name="avaliacao_2" value="5">
</div>
</ul>
<ul class="resposta-1">
<p>3- A equipe mostrou-se alinhada/integrada em relação ao seu cuidado?</p>
<div class="estrelas">
<input type="radio" id="vazio" name="avaliacao_3" value="" checked>
<label for="avaliacao_3_um"><i class="fa"></i></label>
<input type="radio" id="avaliacao_3_um" name="avaliacao_3" value="1">
<label for="avaliacao_3_dois"><i class="fa"></i></label>
<input type="radio" id="avaliacao_3_dois" name="avaliacao_3" value="2">
<label for="avaliacao_3_tres"><i class="fa"></i></label>
<input type="radio" id="avaliacao_3_tres" name="avaliacao_3" value="3">
<label for="avaliacao_3_quatro"><i class="fa"></i></label>
<input type="radio" id="avaliacao_3_quatro" name="avaliacao_3" value="4">
<label for="avaliacao_3_cinco"><i class="fa"></i></label>
<input type="radio" id="avaliacao_3_cinco" name="avaliacao_3" value="5">
</div>
</ul>
<input type="button" name="prev" class="prev acao" value="Anterior">
<input type="button" name="next3" class="next acao" value="Proximo">
</fieldset>
<fieldset>
<h2>Finalizar</h2>
<h3>Você gotaria de receber informação do hospital por meio de veículos de comunicação?</h3>
<select name="final_comunicar" class="servicos-utilizado">
<option value="">Selecione...</option>
<option value="sim">Sim, eu gostaria de receber...</option>
<option value="nao">Não</option>
</select>
<p class="subtitulo">Boletins Informativos dos centros, núcleos e especialidades Utilize este espaço para deicar dúvidas, comentários ou sugestões:</p>
<textarea name="sugestao" id="sugestao" cols="30" rows="10" placeholder="Deixe sua sugestão..."></textarea>
<input type="button" name="prev" class="prev acao" value="Anterior">
<input type="submit" name="next" class="acao" value="Enviar">
</fieldset>
</form>
</section>
<script type="text/javascript" src="js/libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</body>
</html>
JavaScript code
$(function(){
var atual_fs, next_fs, prev_fs;
var formulario = $('form[name=formulario]');
function next(elem){
atual_fs = $(elem).parent();
next_fs = $(elem).parent().next();
$('#progress li').eq($('fieldset').index(next_fs)).addClass('ativo');
atual_fs.hide(800);
next_fs.show(800);
}
$('.prev').click(function(){
atual_fs = $(this).parent();
prev_fs = $(this).parent().prev();
$('#progress li').eq($('fieldset').index(atual_fs)).removeClass('ativo');
atual_fs.hide(800);
prev_fs.show(800);
});
$('input[name=next1]').click(function(){
var array = formulario.serializeArray();
if(array[0].value == '' || array[1].value == '' || array[2].value == '' || array[3].value == '' ){
$('.resp').html('<div class="container erros"><p>Preencha todos os campos corretamentes...</p></div>')
}else{
$('.resp').html('');
next($(this));
}
});
$('input[name=next2]').click(function () {
var array = formulario.serializeArray();
if (array[4].value == '' || array[5].value == '' || array[6].value == '' || array[7].value == '') {
$('.resp').html('');
next($(this));
// } else {
// $('.resp').html('');
// next($(this));
// }
});
$('input[name=next3]').click(function(){
var array = formulario.serializeArray();
if(array[8].value == '' || array[9].value == '' || array[10].value == '' ){
$('.resp').html('<div class="container erros"><p>Ops!! Esqueceu de preencher algum campo...</p></div>')
}else{
$('.resp').html('');
next($(this));
}
});
$('input[type=submit]').click(function(evento){
var array = formulario.serializeArray();
if(array[11].value == '' || array[12].value == ''){
$('.resp').html('<div class="erros"><p>Ops! Esqueceu de preencher algum campo...</p></div>')
}else{
$.ajax({
method: 'post',
url: 'cadastrar.php',
data: {cadastrar: 'sim', campos: array},
dataType: 'json',
beforeSend: function(){
$('.resp').html('<div class="erros"><p>Aguarde enquanto processamos...</p></div>')
},
success: function(valor){
if(valor.erro == 'sim'){
$('.resp').html('<div class="erros"><p>'+valor.getErro+'</p></div>');
}else{
$('.resp').html('<div class="container ok"><img src="Logo-le-forte.png"><p>Agradecemos pela sua atenção!</p><a class="btn-voltar" href="index.html">Voltar</a></div>');
}
}
});
}
evento.preventDefault();
});
});
PHP code
<?php
include_once 'conexao.php';
if(isset($_POST['cadastrar']) && $_POST['cadastrar'] == 'sim'):
$novos_campos = array();
$campos_post = $_POST['campos'];
$respostas = array();
foreach($campos_post as $indice => $valor){
$novos_campos[$valor['name']] = $valor['value'];
}if(!strstr($novos_campos['cpf']) <> 11){
$respostas['erro'] = 'sim';
$respostas['getErro'] = 'Insira corretamente o cpf...';
}elseif(!strlen($novos_campos['telefone']) <> 11){
$respostas['erro'] = 'sim';
$respostas['getErro'] = 'Insira seu telefone corretamente...';
}elseif(!strstr($novos_campos['email'], '@')){
$respostas['erro'] = 'sim';
$respostas['getErro'] = 'E-mail invalido...';
}else{
$respostas['erro'] = 'nao';
$inserir_banco = $con->prepare("INSERT INTO pesquisa_satisfacao SET nome = ?, cpf = ?, telefone = ?, email = ?, nota = ?, nota_comentario = ?, relacao_hospital = ?, servicos = ?, avaliacao_1 = ?, avaliacao_2 = ?, avaliacao_3 = ?, final_comunicar = ?, sugestao = ?");
$array_sql = array(
$novos_campos['nome'],
$novos_campos['cpf'],
$novos_campos['telefone'],
$novos_campos['email'],
$novos_campos['nota'],
$novos_campos['nota_comentario'],
$novos_campos['relacao_hospital'],
$novos_campos['servicos'],
$novos_campos['avaliacao_1'],
$novos_campos['avaliacao_2'],
$novos_campos['avaliacao_3'],
$novos_campos['final_comunicar'],
$novos_campos['sugestao']
);
if($inserir_banco->execute($array_sql)){
$respostas['msg'] = 'inserido corretamente...';
}else{
$respostas['erro'] = 'sim';
$respostas['getErro'] = 'Por favor, tente mais tarde...';
}
}
echo json_encode($respostas);
endif;
?>