Jump to content
PrzFernando

Passar informação com onClick

Recommended Posts

Sim existe.

Essa técnica é executada pela linguagem JavaScript, chamando uma página externa sem a necessidade de refresh.

 

Ela se chama AJAX.

 

Tenho um post no github explicando como efetuar isso de forma incremental com jQuery.

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

 

Porem é possivel fazer tranquilamente somente com recursos do XMLHttpRequest.

 

Caso tenha interesse em aprender JavaScript 'puro' tenho um tutorial aqui:

https://github.com/gabrieldarezzo/helpjs-ravi

 

  • +1 1

Share this post


Link to post
Share on other sites
3 minutos atrás, gabrieldarezzo disse:

Sim existe.

Essa tecnica é executada pela linguagem JavaScript, chamando uma página externa.

Sem a necessidade de refresh.

tenho um post no git explicando como efetuar isso de forma incremental.

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

Sensacional o link! Muito obrigado, parabéns pelo trabalho

Share this post


Link to post
Share on other sites

Editei o post resposta haha.

 

Que bacana, qualquer duvida pergunta aqui.
Estou pra refazer aquele post usando apenas javascript (sem jquery)

 

Share this post


Link to post
Share on other sites

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 DinhoPHP
      Olá!
      Alguém pode me dar uma luz sobre fazer um ORDER BY, hora ASC ou hora DESC? Por favor! Estou utilizando PHP e JS no projeto.
       
      $pegadados = $pdo->prepare("SELECT * FROM produtos WHERE categoria LIKE '%$dataSearch%' OR marca LIKE '%$dataSearch%' OR produto LIKE '%$dataSearch%' OR modelo LIKE '%$dataSearch%' OR descricao LIKE '%$dataSearch%' ORDER BY $filter $filter2");
    • By DinhoPHP
      Olá!
      Alguém pode me dar uma luz sobre fazer um ORDER BY, hora ASC ou hora DESC? Por favor! Estou utilizando PHP e JS no projeto.
       
      $pegadados = $pdo->prepare("SELECT * FROM produtos WHERE categoria LIKE '%$dataSearch%' OR marca LIKE '%$dataSearch%' OR produto LIKE '%$dataSearch%' OR modelo LIKE '%$dataSearch%' OR descricao LIKE '%$dataSearch%' ORDER BY $filter $filter2");
    • By manoaj
      Boa tarde pessoal!
      Criei um sistema simples pra web utilizando PHP no backand.
      Mas agora antes do lançamento do sistema surgiu a necessidade de um app de consulta a esse sistema com funções básicas da plataforma Web, ou seja nem todas as funcionalidades serão implementadas no app agora no início.
      Qual a minha melhor alternativa no desenvolvimento híbrido hj em questão de agilidade no desenvolvimento considerando que minha plataforma web e o banco de dados mysql já estão prontos???
    • By Airton Cruz
      Bom dia galera,
      Estou com uma situação que preciso resolver aqui na empresa. Tenho que abrir um popup a partir de botão, isso é facil, mas o botão faz parte de um formulário que precisa ser validado no momento do click do botão, ou seja, quando o usuário clicar no botão deve aparecer um POPup e validar o formulário de usuário e senha juntos.
       
      Segue o Codigo.
       
      -- criação da função do POPup
       
          <script language="javascript">
                          
                  function abrirPopup(url,w,h) {
                  var newW = w + 100;
                  var newH = h + 100;
                  var left = (screen.width-newW)/2;
                  var top = (screen.height-newH)/2;
                  var newwindow = window.open(url, 'name', 'width='+newW+',height='+newH+',left='+left+',top='+top);
                  newwindow.resizeTo(newW, newH);
                   
                  //posiciona o popup no centro da tela
                  newwindow.moveTo(left, top);
                  newwindow.focus();
                  return false;
                  }
          </script>
       
       <form name="formCliente" id="formCliente" action="http://www.google.com.br" method="post" class="clearfix" >
                          <input type="email" name="email" placeholder="E-mail:" value="" required="true"/>
                          <input type="password" name="senha" placeholder="Senha:" value="" required="true"/>
                         <button type="submit" class="bt-ok" onclick="return abrirPopup('popup2.html', 500, 270)">OK</button>
                          <div class="clear"></div>
                          <!--<div class="esqueci-minha-senha link-com-seta"><span></span><a href="/" title="Esqueci minha senha">esqueci minha senha</a></div>-->
                      </form>
       
       
      Por favor, preciso de ajuda urgente.
       
    • By DinhoPHP
      Olá!
      Não consigo entender o porque a minha função cadValor() funciona e a desc() não
       
      file.js
      <script> var txtval = document.querySelector('#inputValor'); var res = document.querySelector('#inputCopyValor'); //ONDE QUERO ESCREVER var res2 = document.querySelector('#seuValor'); // VALOR INDO PARA HOLERITE var res3 = document.querySelector('#seuValorMult'); // VALOR QUE SERÁ DOBRADO function cadValor(){ var val = Number(txtval.value); res.placeholder = val.toFixed(2); res2.placeholder = val.toFixed(2); var dobro = val * 2; // dobra o valor res3.placeholder = dobro.toFixed(2); // pega o valor dobrado } function desc(){ var txtDobro = document.querySelector('#seuValorMult'); // VALOR QUE FOI DOBRADO var txtSacado = document.querySelector('#seuValorDia2'); var txtRestante = document.querySelector('#seuValorRes'); var resDobro = Number(txtDobro.value); var resSacado = Number(txtSacado.value); //var resRestante = Number(txtRestante.value); var resRest = resDobro; txtRestante.placeholder = resRest.toFixed(2); } </script> file.php
      <div class="container"> <!-- PRIMEIRA LINHA --> <div class="d-flex justify-content-center mt-3"> <div id="divHolerite" class="col-12 col-sm-8 col-md-6 col-lg-4"> <div class="d-flex flex-column justify-content-center align-items-end bg-dark"> <div class="col-12 mb-3"> <label for="inputValor">Admin: Cadastrar Valor</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValor" class="form-control" type="text" name="inputValor" onkeypress="return onlynumber();"> <button type="submit" value="ativa" class="btn btn-danger text-uppercase ml-3" data-toggle="modal" data-target="#modalHolerite" onclick="cadValor()">ativa</button> </div> </div> <div class="col-12"> <button type="reset" value="clean" class="btn btn-light btn-lg text-uppercase mb-3">apagar cadastro</button> </div> <hr style="background-color: #777777; widht: 100%;"> </div> <!-- SEGUNDA LINHA --> <div class="d-flex flex-column flex-nowrap align-items-start bg-dark mb-3"> <div class="col-8 mb-3"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputCopyValor" class="form-control" type="text" name="inputCopyValor" placeholder="" readonly> </div> </div> <div class="col-12 mb-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDia" class="form-control" type="text" name="inputValorDia" placeholder="0,10" readonly> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3">sacar</button> </div> <div class="d-flex"> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm mr-3">descontar</button> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDesc" class="form-control" type="text" name="inputValorDesc"> </div> </div> </div> </div> </div> </div> <!-- HOLERITE --> <!-- Modal --> <div class="modal fade" id="modalHolerite" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <!-- HOLERITE --> <div class="container"> <!-- PRIMEIRA LINHA --> <div id="test" class="d-flex justify-content-center mt-3"> <div id="divHolerite" class="col-12 col-md-10 col-lg-8"> <div class="d-flex flex-column justify-content-center align-items-end bg-dark"> <div class="col-12 mb-3"> <h2 class="text-uppercase text-center text-white">holerite</h2> <div class="row"> <div class="col-12 col-sm-6"> <label for="seuValor" class="text-left text-uppercase">seu valor</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValor" class="form-control" type="number" name="seuValor" placeholder=""> </div> </div> <div class="col-12 col-sm-6"> <label for="inputValorDia" class="text-left text-uppercase">total: 200 dias</label> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="inputValorDia" class="form-control" type="number" name="inputValorDia"> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> </div> </div> <div class="col-12 col-sm-6"> <label for="seuValorMult" class="text-left text-uppercase">valor multiplicado</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorMult" class="form-control" type="number" name="seuValorMult"> </div> </div> </div> </div> <hr style="background-color: #777777; widht: 100%;"> </div> <!-- SEGUNDA LINHA --> <div class="d-flex flex-column justify-content-center bg-dark mb-3" style="padding-left: 10px; padding-right: 0px;"> <div class="row overflow-visible"> <div class="col-12 col-sm-4"> <span class="text-white font-data">00/00/2019:</span> </div> <div class="col-12 col-sm-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorDia2" class="form-control" type="number" name="seuValorDia2" placeholder="0,10" readonly> <div class="input-group-prepend"> <span class="input-group-text">por dia</span> </div> <button type="submit" value="saque" class="btn btn-danger text-uppercase btn-sm ml-3 mr-2" onclick="desc()">sacar</button> </div> </div> </div> <div class="form-row col-12" style="border: 2px white solid;"> <div class="col-12 col-sm-6"> <label for="seuValorSacado" class="text-left text-uppercase"><br></label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorSacado" class="form-control" type="number" name="seuValorSacado"> </div> <label for="seuValorSacado" class="text-center text-uppercase">valor sacado</label> </div> <div class="col-12 col-sm-6"> <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 5vw;">seu valor restante</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">R$</span> </div> <input id="seuValorRes" class="form-control" type="number" name="seuValorRes" placeholder="" readonly> </div> <label for="seuValorRes" class="text-center text-uppercase" style="margin-left: 10vw;">pra saque</label> </div> </div> </div> <!-- Termina linha geral --> </div> <!-- FIM DO HOLERITE --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>  
×

Important Information

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