Change value according to the input typed using Ajax without clicking a button

Asked

Viewed 112 times

0

I need the ajax to take the amount typed in input and show this value in a div without clicking a button, I’m using Ajax for this, but it’s not working. What I could do to solve?

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 to digital and receive value in div.

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

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

I tried it but it didn’t work either

$(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);
                 }
      })
  });
});
php ajax

  • $('input#valor').on('keypress',function () {

2 answers

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>

Adapting to your need would work in theory like this:

1) Returning to $.ajax Success Report();

$(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) Only by inserting into the DIV independent of the $.ajax Sponse();

$(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);
                 }
      })
  });
});

But remember, that with each event (up key), the function will be executed, and your AJAX too, this can compromise the performance of your application, since PHP runs only one Thread at a time.

  • I would have to use Ajax, because I will need to make a calculation with the value typed in the input, as it would be?

  • 1

    Check your code, change your DIV reference, that would be?

  • 1

    Treat in your PHP the use of AJAX calls, validating if there is need to continue your PHP code, make some rules to avoid excessive consumption of server resources.

  • 1

    I updated with the two examples.

  • worked, thank you very much

1

Changes the text for html

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

If you want to put the value on one input use .val(msg)

Browser other questions tagged php ajax

You are not signed in. Login or sign up in order to post.