0

Preciso que o ajax pegue o valor digitado no input e mostre esse valor em uma div sem clicar em um botão, estou utilizando o Ajax para isso, mas não está dando certo. O que eu poderia fazer para resolver?

Meu Ajax

$(document).ready(function(){
$('input#valor').on('change',function () {
        var valor = $(this).val();

        $.ajax({
                 type: "POST",
                 url: "SaveDecision.php",
                 data: {valor: valor },
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
      })
  });
});

Html para digital e receber o valor na div.

<input value="" type="text" class="form-control" name="valor" id="valor" placeholder="valor">

<div id="autosavenotify"></div>

tentei assim mas também nao funcionou

$(document).ready(function(){
    $('input#valor').on('keypress',function () {
        var valor = $(this).val();

        $.ajax({
                 type: "POST",
                 url: "SaveDecision.php",
                 data: {valor: valor },
                 success: function(msg) {
                     $('#autosavenotify').text(msg);
                 }
      })
  });
});
1
  • $('input#valor').on('keypress',function () { Commented 14/05/2019 às 18:30

2 Respostas 2

2

$(document).ready(function(){
  $('input.input').keyup(function() {
    $('div.showDiv').html($(this).val());
  })
})
input,div {
padding: 6px;
display:block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class='input' type='text'>
<div class='showDiv'></div>

Adaptando à sua necessidade, funcionaria na teoria assim:

1) Retornando a response de sucesso do $.ajax();

$(document).ready(function(){
    $('input#valor').keyup(function() {
        var valor = $(this).val();
        $.ajax({
                 type: "POST",
                 url: "SaveDecision.php",
                 data: {valor: valor },
                 success: function(msg) {
                     $('#autosavenotify').html(msg);
                 }
      })
  });
});

2) Apenas inserindo na DIV independente do response do $.ajax();

$(document).ready(function(){
    $('input#valor').keyup(function() {
        var valor = $(this).val();
        $('#autosavenotify').html(valor);
        $.ajax({
                 type: "POST",
                 url: "SaveDecision.php",
                 data: {valor: valor },
                 success: function(msg) {
                     // $('#autosavenotify').html(msg);
                     console.log(msg);
                 }
      })
  });
});

Mas lembre-se, que a cada evento (tecla subindo), a função será executada, e o seu AJAX também, isso pode comprometer o desempenho da sua aplicação, visto que o PHP executa apenas uma Thread por vez.

5
  • teria que usar o Ajax, pois vou precisar fazer um cálculo com o valor digitado no input, como ficaria?
    – user141968
    Commented 14/05/2019 às 18:36
  • 1
    Confere aí, no seu código, altere a referência da sua DIV, seria isso?
    – ElvisP
    Commented 14/05/2019 às 18:40
  • 1
    Trata no seu PHP o uso das chamadas do AJAX, validando se há necessidade de continuar seu código PHP, faz algumas regrinhas para evitar o consumo excessivo de recursos do servidor.
    – ElvisP
    Commented 14/05/2019 às 18:41
  • 1
    Atualizei com os dois exemplos.
    – ElvisP
    Commented 14/05/2019 às 18:48
  • funcionou, muito obrigado
    – user141968
    Commented 14/05/2019 às 18:55
1

Altera o text para html

$('#autosavenotify').html(msg);

Se quiser colocar o valor em um input use .val(msg)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .