Jump to content
  • 0
CrysMorais

Como verificar se no questionário tem perguntas do tipo 'radio' ou 'checkbox'

Question

Boa tarde pessoal,

Sou nova por aqui e também sou nova na programação, e gostaria da ajuda de alguém, se possível.

Eu montei uma pagina que cria questionários, onde o usuário  pode criar perguntas com 4 tipos de respostas (Radio, Checkbox, Text e Number).

Porém não sei como verificar se no questionário, foi criado pelo menos uma pergunta de cada tipo.

 

Montei assim:

 

<select name="tipoconsquestao" id="tipoconsquestao" style="color:#000000; font-size:9px; width:130px; ">
             <option value="1" selected >Única escolha</option>
             <option value="2">Múltipla escolha</option>
             <option value="3">Texto livre</option>
             <option value="4">Número livre</option>
</select>

 

Criei um bloco desses para cada tipo de pergunta:

 

<%if (ArrayQuestions(6,i) = 1) then%>

<td width="8%" align=center>
       <input name="<%=conta_grupo%>" data-sm-tipo="<%=ArrayQuestions(6,i)%>" data-sm-vrmaxquestao="<%=ArrayQuestions(11,i)%>" data-sm-questao-numero="<%=ArrayQuestions(2,i)%>"  data-sm- alternativa="<%=ArrayQuestions(3,i)%>" data-sm-questao="<%=conta_grupo%>" id="<%=conta_Alternativa%>" type="radio" value="<%=ArrayQuestions(3,i) %>" <%if ArrayQuestions(4,i) = 1 then response.write "checked"%>/>
</td>
<td width="92%" >&nbsp;&nbsp;&nbsp;<b><%=ArrayQuestions(1,i)%><b></td>
<% end if %>

 

 

Recebo aqui:

 

        var arrayquestoes = [];
        var arrayalternativas = [];
        var questionarioRadio = [];
        var questionarioCheck = [];
        var questionarioText = [];

        var questionarioNum = [];

 

for (var i = 1; i <= n_grupos; i++) {

            var countRadio = 0;
            var countCheck = 0;
            var countText = 0;
            var countVrText = 0;
            var countVariosVrText = 0;
            var countNum = 0;

            
            $("[data-sm-questao='" + i + "']").each(function (index, value) {

                var questao = $(this).attr("data-sm-questao-numero");
                var alternativa = $(this).attr("data-sm-alternativa");
                //alert(alternativa);

                var vralternativa = $(this).val();
                var tipoalternativa = $(this).attr("data-sm-tipo");
                

                
                vrmaxtotalizacao = $(this).attr("data-sm-vrmaxquestao");
                
                
                arrayquestoes[i - 1] = questao;
    
                //==============================================================================================================    
                // Verifica todos os campos tipo questão 1 (Radiobuttons) e carrega o array questionarioRadio com true ou false
                //==============================================================================================================  

                if (eval(tipoalternativa) == 1)
                {
                    if (this.checked) {
                        questionarioRadio[countRadio] = true;

                        if (textoalternativas == '') {
                            textoalternativas = questao + '|' + alternativa + '|' + 1;
                        }
                        else {
                            textoalternativas = textoalternativas + ';'+ questao + '|' + alternativa + '|' + 1;
                        }
                    }
                    else
                    {
                        questionarioRadio[countRadio] = false;
                    }

                    countRadio = countRadio + 1;
                    //console.log(cont);
                    
                }
 

 

    Faço a validação aqui:

 

          

 for (var k = 0; k < questionarioRadio.length; k++) {

            if (questionarioRadio[k])
            {
                if (!saidafinalRadio)
                {
                    saidafinalRadio = true;
                }
            }
        }

        if (questionarioRadio.length == 1)
        {
            saidafinalRadio = true;
        }

}

 

if (!saidafinalRadio)
        {
            alert('Por favor responda todas as questões de única escolha.');
            return;
        }

 

 

E mando para o banco de dados.

 

 

 

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Danelelel
      Código php
       
      <?php
      error_reporting(0);
      session_start();
      include "gdrive/curl_gd.php";
      require('profile.php');
      require('../conexao/conexao.php');
      $tokenC   = $_SESSION['token'];
      $explod = explode('idMC', $tokenC);
      $idCont = explode('id', $explod[0]);
      $idConta = $idCont[1];
      $idMembro = $explod[1];
      $idM  = $idMembro;
      $id   = mysqli_real_escape_string($conn, $_GET['id']);
      $retry   = mysqli_real_escape_string($conn, $_GET['retry']);
      $epid      = mysqli_real_escape_string($conn, $_GET['epid']);
      $quality = mysqli_real_escape_string($conn, $_GET['quality']);
      $vide = mysql_query("SELECT * FROM `vid_flix` WHERE id='$id'");
      $vid  = mysql_fetch_assoc($vide);
      if($vid['tipo'] == 2){
          if($quality == NULL or $quality == "medium"){
              $link = $vid['link'];
          }elseif($quality == "high"){
              $tokenC   = $_SESSION['token'];
              $explod = explode('idMC', $tokenC);
              $idCont = explode('id', $explod[0]);
              $idConta = $idCont[1];
              $idMembro = $explod[1];
              $cons = mysql_query("SELECT * FROM `login_flix` WHERE id='$idConta'");
              $consult = mysql_fetch_assoc($cons);
                  $vip = $consult['vip'];
                  if($quality == "high" && $vip == "1"){
                      $link = $vid['link'];
                  }else{
                      $link = "No Permit";
                  }
          }
          $titulo = $vid['titulo'];
          $bg     = $vid['bg'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $bg);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $bg);
          $id = $vid['id'];
          $type=$vid['tipo'];
          $gdrive = $vid['gdrive'];
      }
      if($vid['tipo'] == 1){
          
          $video = mysql_query("SELECT * FROM `ep_flix` WHERE epId='$epid'") or die(mysql_error());
          $ep    = mysql_fetch_array($video) or die(mysql_error());
          
          $titulo      = $vid['titulo'].' : '.$ep['titulo'];
          $bg       = str_replace("w227_and_h127_bestv2", "original", $ep['img']);
          $bg       = str_replace("w533_and_h300_bestv2", "original", $ep['img']);
          $bg       = $bg;
          $dub       = $vid['leg_dub'];
          $service  = $vid['service'];
          
              $link     = $ep['link'];
         
          $gdrive = $ep['gdrive'];

          $id = $vid['id'];
          $type=$vid['tipo'];
          $epid = $epid;

          //PROXIMO EP//
           $epAt  = $ep['ep'];
           $tempAt = $ep['temp'];
           $nextEp = $epAt + 1;
          
          $p = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempAt' && ep='$nextEp'");
          $c1 = mysql_num_rows($p);
        
          if($c1 > 0){
              $epATT = mysql_fetch_assoc($p);
              $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
          }elseif($c == 0){
              $tempNext = $tempAt + 1;
              $pp = mysql_query("SELECT * FROM `ep_flix` WHERE id='$id' && temp='$tempNext' && ep='1'");
              $cc = mysql_num_rows($pp);
              if($cc > 0){
                  $epATT = mysql_fetch_assoc($pp);
                      $proxEp = "play.php?id=".$id."&idm=".$idMembro."&retry=0&epid=".$epATT['epId']."&quality=".$quality;
                  
              }
          }
          //PROXIMO EP//
          $linkTest = $ep['link'];
          
      }
         
      $user = mysql_query("SELECT * FROM `perfil_flix` WHERE idMC ='$idMembro'");
      $u = mysql_fetch_array($user);
      $nome = $u['nome'];
      $color = $u['color'];
      $icon = $u['icon'];
      if($gdrive == '1'){
              $url = $link;
              $gid = get_drive_id($url);
              
              $iframeid = my_simple_crypt($gid);
              $linkdown = Drive($url);
              $fileG = $iframeid;
              $link = $linkdown;
      }
      ?>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="css/video-play.css">
      <div class="chat hid">
          <div class="view">
          

          </div>
          <div class="text-chat">
              <input type="text" id="chat-value" class="chat-value" name="chat-value" placeholder="...">
              <button class="mic" id='mic'><i class="fas fa-microphone"></i></button>
          </div>
      </div>
      <div class="media"></div>
      <?php
      if($gdrive != 2){
      if($link != "No Permit"){
      ?>
      <script type="text/javascript">
          var vidLink     = "<?=$link?>";
          var titlevid     = "<?=$titulo?>";    
          var poster         = "<?=$bg?>";
          var nextEpp     = "<?=$proxEp?>";
      </script>
      <script src="flipclock/flipclock.js"></script>
      <script src="js/play.js"></script>
      <script type="text/javascript">
          
          var retryLoad =     setInterval(function(){
              var statusvid = vid.readyState;
               if(statusvid == '4'){
                  var dura = vid.duration;
                  var time = '<?=$retry?>'/100*dura;
                  vid.currentTime = time;
                  clearInterval(retryLoad);
              }
          },50);
          
                  setInterval(function(){
              $.ajax({
                type: "POST",
                url: "../player/function/savep.php",
                data: {
                    'idf' : "<?=$_GET['id']?>",
                    'temp': progress,
                    'idm' : '<?=$idM?>'
                  },
                dataType: 'json',
                success: function (data) {
                          
                      }
              });
                  },10000);
      </script>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html("<center style='color:white;'>Para ter acesso ao Recurso HD é necessario ser membro vip.</center>");
          </script>
          <?
      } ?>
      <script type="text/javascript">
          function nextEp(){
              $('.nextEp').click(function(){
                  location.href="<?=$proxEp?>";
              });
              }
          setInterval(function(){
              $('.chat .view').load("chat-view.php?id=<?=$id?>");
          },500);
          $('.chat-value').on('keyup',function(e){
              var code = (e.keyCode ? e.keyCode : e.which);
                  if (code==13) {
                      var msg = $(this).val();
                      var user= "<?=$nome?>";
                      var cor = "<?=$color?>";
                      var icon= "<?=$icon?>";
                      var id_vid= "<?=$id?>";    
                      $.ajax({
                            type: "POST",
                            url: "cadXat.php",
                            data: {
                                'id_vid':id_vid,
                                'msg' : msg,
                                'user': user,
                                'cor' : cor,
                                'icon':icon
                              },
                            
                      });
                      $(this).val("");
                  }
          });
          $('.smstext').click(function(){
              var hidC = $('.chat').hasClass("hid");
              if(hidC == true){
                  $('.chat').removeClass("hid");
              }else if(hidC == false){
                  $('.chat').addClass("hid");
              }
          });
          function toggleMute(element) {
          element.muted = false;
          element.play()
      }
      window.addEventListener('load', function () {
          setTimeout(function () {
              toggleMute(document.querySelector('video'));
          }, 1000);
      });
      </script>
      <style type="text/css">
          .chat{
              height: calc(98vh - 12%);
          }
          @media screen and (max-width: 800px){
              .chat{
              height: calc(98vh - 22%);
          }
          }
          @media screen and (max-width:  500px){
              .chat{
                  width: 60%;
              }
          }
          @media screen and (max-width:  350px){
              .chat{
                  width: 70%;
              }
          }
      </style>
      <?php }else{
          ?>
          <script type="text/javascript">
              $('.media').html('<iframe src="<?=$link?>"></iframe>');
          </script>
          <style type="text/css">
              .media iframe{
                  width: 100%;
                  float: left;
                  height: 100vh;
                  border:transparent;
              }
          </style>
          <?
      } ?>
       
      Codigo arquivo js
       
          $('.media').append('<div class="play-video"></div>');
          $('.play-video').append('<div class="loading"></div>');
          $('.play-video').append('<div class="header"></div>');
          $('.header').append('<div class="info"><div>');
          $('.info').append('<div class="line-time"><div>');
          $('.line-time').append('<input type="range" class="line-control" min="0" max="100" value="0" onmousedown="line()" onclick="line()" onchange="line()">');
          $('.line-time').append('<div class="line-curren"></div>');
          $('.line-time').append('<div class="line"></div>');
          $('.line-time').append('<div class="line-time-slide"></div>');
          $('.info').append('<div class="time">0:00:00</div>');
          $('.info').append('<div class="controls-vid"></div>');
          $('.controls-vid').append('<button class="play_pause"><i class="material-icons">play_arrow</i></button>');
          $('.controls-vid').append('<button class="vol-slide"><i class="material-icons">volume_up</i></button>');
          $('.controls-vid').append('<button class="expand"><i class="material-icons">fullscreen</i></button>');
          
          $('.controls-vid').append('<span class="title-vid">'+titlevid+'</span>');
          $('.info').append('<div class="volup hid"><vid>');
          $('.volup').append('<input type="range" onkeyup="vol()" onmousedown="vol()" onclick="vol()" onchange="vol()" min="0" max="100" value="70" class="volups">');
          $('.volup').append('<div class="seta-baixo"></div>');
          $('.play-video').append('<div class="encript"></div>');
          $('.play-video').append('<div class="video-play"></div>');
          $('.header').append('<button class="playing-vid"><i class="material-icons">play_arrow</i></button>');    
          $('.video-play').append('<video id="vid-nf" poster="'+poster+'"></video>');
          $('#vid-nf').append('<source src="'+vidLink+'" type="video/mp4">');
          
          var vid = document.getElementById("vid-nf"); 
          function line(){
              var val =     $('.line-control').val();
              var durational = vid.duration;
              var por = val / 100 * durational;
              vid.currentTime=por;
          }
          $('.play_pause').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          $('.playing-vid').click(function(){
              var play = $('.play_pause i').html();
              
              if(play == "play_arrow"){
                  $('.play_pause i').html('pause');
                  $('.playing-vid i').html('pause');
                  vid.play();
              }if(play == "pause"){
                  $('.play_pause i').html('play_arrow');
                  $('.playing-vid i').html('play_arrow');
                  vid.pause();
              }
          });
          setInterval(function(){
              var statusvid = vid.readyState;
              if(statusvid == '0'){
                  $('.loading').css('display','block');
              }else if(statusvid == '1'){
                  $('.loading').css('display','none');
              }else if(statusvid == '2'){
                  $('.loading').css('display','block');
              }else if(statusvid == '3'){
                  $('.loading').css('display','none');
              }else if(statusvid == '4'){
                  $('.loading').css('display','none');
              }
          },50);
          $('.expand').click(function(){
              var expand = $('.expand i').html();
              if(expand == 'fullscreen'){
                  $('.expand i').html('fullscreen_exit');
                  var el = document.documentElement
                      , rfs = // for newer Webkit and Firefox
                             el.requestFullScreen
                          || el.webkitRequestFullScreen
                          || el.mozRequestFullScreen
                          || el.msRequestFullScreen
                      ;
                      if(typeof rfs!="undefined" && rfs){
                        rfs.call(el);
                      } else if(typeof window.ActiveXObject!="undefined"){
                        // for Internet Explorer
                        var wscript = new ActiveXObject("WScript.Shell");
                        if (wscript!=null) {
                           wscript.SendKeys("{F11}");
                        }
                      }
              }else{
                  $('.expand i').html('fullscreen');
                  if (document.cancelFullScreen) {  
                    document.cancelFullScreen();  
                  } else if (document.mozCancelFullScreen) {  
                    document.mozCancelFullScreen();  
                  } else if (document.webkitCancelFullScreen) {  
                    document.webkitCancelFullScreen();  
                  }
              }
          });
          $( document ).ready(function() {
               var regiao = document;
              var timeout = setTimeout(showTela, 4000);
              $(regiao).mousemove(onEvent);
              $(regiao).mousedown(onEvent);
              $(regiao).keydown(onEvent);

              function onEvent() {
                clearTimeout(timeout);
               
                  $('body').css('cursor','auto');
                $('.header').css('opacity','1');
                timeout = setTimeout(showTela, 4000);
              }
              function showTela() {
                $('body').css('cursor','none');
                $('.header').css('opacity','0');
              }
            
             });
              $('.vol-slide').click(function(){
                  var hid = $('.volup').hasClass('hid');
                  if(hid == true){
                      $('.volup').removeClass('hid');
                      $('.line-time').addClass('hid');
                      $('.time').addClass('hid');
                  }else if(hid == false){
                      $('.volup').addClass('hid');
                      $('.line-time').removeClass('hid');
                      $('.time').removeClass('hid');
                  }
              });
              function vol(){
                  var volu = $('.volups').val();
                  var vol = volu / 100;
                  if(volu < 50){
                      $('.vol-slide i').html('volume_down');
                  }
                  else if(volu > 50){
                      $('.vol-slide i').html('volume_up');
                  }
                  if(volu == 0){
                      $('.vol-slide i').html('volume_off');
                  }
                  vid.volume = vol;
              };
              var progress = '';
              var per = '';
              var clo = '60';
              var clou = '';
              setInterval(function(){
                  var current = vid.currentTime;
                  var duration= vid.duration;
                   per =  duration - current ;
                  var percorid = current * 100;
                   progress = percorid / duration;
                  $('.line').css('margin-left', 'calc('+progress+'% - 8.5px)');
                  $('.line-curren').css('width',progress+'%');
                  
                  var dur = String(duration);
                  var perc = String(per);
                  if(dur != 'NaN'){
                      var date = new Date(null);
                      date.setSeconds(perc); // specify value for SECONDS here
                      var result = date.toISOString().substr(12, 7);
                  $('.time').html(result);
                  if(per < '30' && nextEpp != ''){
                      if(clou == ''){
                          clou = '1';
                          $('.header').append('<button class="nextEp"><i class="material-icons">play_arrow</i><p>Próximo Episódio em</p><span class="restTime"></span></button>');
                          $('.info').addClass('hid');
                          $('.playing-vid').addClass('hid');
                          nextEp();
                      }
                  }
                  }
              },50);
                  var mytimer = setInterval(function(){
                      if(per < '30' && nextEpp != ''){
                          $('.restTime').html(clo);
                          if(clo > 0){
                              clo --;
                          }else if(clo == 0){
                              location.href=nextEpp;
                              clearInterval(mytimer);
                          }
                      }
                      },1000);
              
              $('.settings').click(function(){
                  var check = $('.settings').hasClass('active-s');
                  if(check == true){
                      $('.settings').removeClass('active-s');
                      $('.line-time').fadeIn('slow').css('display','block');
                      $('.time').fadeIn('slow').css('display','block');
                      $('.quality').fadeOut('slow').css('display','none');
                  }else if(check == false){
                      $('.settings').addClass('active-s');
                      $('.line-time').fadeOut('slow').css('display','none');
                      $('.time').fadeOut('slow').css('display','none');
                      $('.quality').fadeIn('slow').css('display','block');
                  }
              });
              
    • By WagnerFilho
      Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!
      Eu separei os arquivos js por responsabilidades.
      Cada arquivo será encarregado para uma determinada função.
      Estou carregando estes arquivos da seguinte forma:

       
      <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern
      Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?
      Como posso fazer isto ?
      Então tenho alguns arquivos js.
       
      app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js
        app.js
      let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name);  
      controllerExample.js
      ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document );  
      modelExample.js
      ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document );  
      ajax
      let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };
       
    • By Motta
      As 7 linguagens de programação que você deve aprender em 2020
    • By michelmir
      Olá!
       
      Recentemente fiz uma postagem aqui no fórum a respeito de se carregar valores em um input text baseando-se na opção selecionada em uma select box, onde obtive uma solução. Por conta disso resolvi adicionar um complemento neste  meu código onde o mesmo deve carregar valores corretamente dentro de uma input text utilizando o plugin TypeAhead.js e o evento onchange do Jquery.
       
      Como forma de demonstrar a minha dúvida em funcionamento, criei uma página como forma de testar a solução. O que ocorre é que quando seleciona uma opção no select box  "Categorias", o Ajax manda um request para o php script onde o mesmo retorna os valores corretamente em JSON conforme a imagem do console do navegador Chrome abaixo:
       
       
       
      Até aqui os valores relacionados com a opção selecionada no select box "Categorias" são carregados corretamente porém se eu não atualizar a página "F5" e ao mesmo tempo eu selecionar alguma outra opção dentro do select box, o input text carrega além dos valores relacionados, todos os valores não relacionados com a opção selecionada ou seja, o input text somente carrega os valores corretamente se eu atualizar a página em questão.
       
      Abaixo uma imagem demonstrando os valores carregados em uma input text quando seleciono uma outra opçao no select box quando não se atualiza a página. Todos os valores não relacionados também são carregados:
       

       
      Abaixo publico o html e os scripts Ajax, Typeahead e PHP que estou utilizando neste projeto:
       
      HTML
      <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!-- jQuery UI library --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script> </head> <body> <div class="container"> <br> <h1>DYNAMIC TWITTER TYPEAHEAD</h1> <br> <div class="row"> <?php // Include the database config file include_once 'dbConfig.php'; // Fetch all the country data $query = "SELECT * FROM categorias ORDER BY categoria ASC"; $result = $db->query($query); ?> <!-- categoria dropdown --> <div class="col-md-4"> <select id="categoriaFK" name="categoriaFK" class="form-control"> <option value="">seleciona categoria</option> <?php if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo '<option value="'.$row['categoriaID'].'">'.$row['categoria'].'</option>'; } }else{ echo '<option value="">Categoria não encontrada</option>'; } ?> </select> </div> <div class="col-md-4" id="prod"> <div ><input type="text" name="produtos" id="produtos" class="form-control input-lg typeahead" autocomplete="off" placeholder="" /></div> </div> <div class="col-md-4"> <div id="imagem" name="imagem"></div> </div> </div> </div> </body> </html>  
      No script abaixo, o Ajax envia um request para o script PHP que por sua vez retorna os valores em JSON para o Ajax que envia para o TypeAhead e carrega o input text com valores relacionados. Após selecionar uma opção no input text, o Jquery envia um valor relacionado para a div "#imagem" :
       
      $(document).ready(function(){ var produtos; var nomes = []; // array var lista = {}; // objeto $('#categoriaFK').on('change', function(){ var queryID = $(this).val(); $.ajax({ url:"fetch.php", method:"POST", data:{categoria:queryID}, dataType:"json", success:function(data){ console.log(data); $.each(data, function(i, optionHtml){ $('#produtos').append(optionHtml); }); $("#imagem").empty(''); $(".typeahead").val(''); produtos = data; } }); $('.typeahead').typeahead({ source: function(query, result) { $.each(produtos, function(idx, item){ if(!~nomes.indexOf(item.nomeProduto)) nomes.push(item.nomeProduto); lista[item.nomeProduto] = item.imagem; }); return result(nomes); }, afterSelect: function (data) { var img = lista[data]; $('#imagem').html(img); }, }); }); });  
      Abaixo, o php script que seleciona os valores baseando-se no valor selecionado do select box e os envia em formato JSON para o Ajax:
       
      <?php require_once 'dbConfig.php'; if(!empty($_POST["categoria"])){ $query = " SELECT * FROM produtos WHERE categoriaFK = ".$_POST['categoria']." "; $result = $db->query($query); $data = array (); if ( $result->num_rows > 0 ) { while($row = $result->fetch_assoc ()) { $data[] = $row; } header("Content-type: application/json; charset=utf-8 cache-control: no-cache, no-store, must-revalidate"); echo json_encode($data); exit(); } } ?> No caso como mencionado acima, nesta página que criei demonstra o funcionamento de todo o código acima, porém acredito que devo modificar o script para que o mesmo carregue valores corretamente quando seleciono alguma opção no select box "Categorias" sem precisar atualizar a página para que o mesmo carregue corretamente. 
       
      Como posso proceder? Desde já agradeço a atenção de todos.
    • By Rodrigo Biaggio
      Senhores, conseguem me ajudar a evoluir na questão abaixo??
       
      Tenho esse código simples, aonde chamo uma API e percorro um array e pego apenas um campo e faço a soma. Só que preciso retornar além do campo "consumedHostUnits" e o campo "name", conforme print.
       

       
      Alguém poderia me dar uma luz, como fazer isso? 
       
      O resultado seria mostrando 
       
      Name: APIGateway | ConsumedHostsUnits: 2
       
      Segue o HTML:
       
      <!DOCTYPE html> <html lang="pt-br"> <title>API Management</title> <head> <meta charset="8"> </head> <body> <script> var urlapi = ''; function fazerRequisicao(){ var url = urlapi + document.getElementById('hostgroup').value; //var url = urlapi; var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, false); xhttp.send(); var arrayElements = xhttp.responseText.split(','); var i; var sumComsumed = 0.0; for (i = 0; i < arrayElements.length; i++) { if(arrayElements[i].includes("consumedHostUnits")) { sumComsumed = sumComsumed + +arrayElements[i].split(":")[1]; } } document.getElementById("div-responsetext").innerHTML = sumComsumed; } </script> <button onclick="fazerRequisicao();">Pesquisar</button> <input type="text" id="hostgroup" style="width: 100px;"> <hr/> <div id="div-responsetext"></div> </body> </html> Obrigado.
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.