Update after typing without refresh

Asked

Viewed 1,332 times

0

I have a list of names that come from the database and I need to update these names when necessary. I bring everyone already inside the form and update with a Javascript.

With a record works perfectly. The problem is when I bring more than one name from the bank, hence it only works on the first form.

<?php
$consulta = mysql_query("
SELECT * FROM categoria limit 2");
while ($dados = mysql_fetch_array($consulta)) {
?>
<form method="POST" action="" id="ajax_form">
    <div class="row">
        <div class="col-md-6 form-group">
            <input type="text" id="id_categoria" name="id" class="form-control" value="<?echo$dados['id_categoria']?>" readonly>
            <input type="text" id="nome" name="nome" class="form-control" maxlength="100" placeholder="Seguimento" value="<?echo$dados['nome']?>" required autofocus>
            <button class="btn btn-primary" type="submit">Atualiza</button>
        </div>
    </div>
</form> 
<?}?>

JS

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#ajax_form').submit(function(){
    var data = { 
       id_categoria: $('#id_categoria').val(),
       nome: $('#nome').val()
      };
    $(this).text("Atualizando"); // Aqui voce muda o texto do botao caso queira
    $.ajax({
        type: "POST",
        url: "seguimento_lista_sql_update.php",
        data: data,
        cache: true
    })
});
}); 
</script>   
  • 1

    Select the code that updates, that is, the following page_lista_sql_update.php ?

1 answer

0


Try this way more simplified, I made some updates in the form for the button to have an id (the same of the category) and the text field to have an id too (s+id_category), I changed the Submit to button and added a class atualiza to it, I also removed the field id_categoria because it was not necessary, if you want to display, just adapt in the model:

Form with the amendments:

<form method="POST">
    <div class="row">
        <div class="col-md-6 form-group">
            <input type="text" class="form-control" id="s<?=@$dados['id_categoria']?>" maxlength="100" placeholder="Seguimento" value="<?=@$dados['nome']?>" required autofocus>
            <button id="<?=@$dados['id_categoria']?>" class="btn btn-primary atualiza" type="button">Atualiza</button>
        </div>
    </div>
</form>

Jquery:

<script type="text/javascript">
    jQuery(document).ready(function(){
        $('button.atualiza').click(function() {
            botao = $(this);
            botao.text("Atualizando");
            $.ajax({
                type: "POST",
                url: "seguimento_lista_sql_update.php",
                data: { id_categoria: botao.attr('id'), nome: $('input#s'+botao.attr('id')).val() },
                cache: true
            }).done(function(data) {
                botao.text("Atualiza");
            });
        });
    }); 
</script>  

I hope it helps, hugs

  • worked perfectly! Taking advantage there is some function that I can put together with the.text button to change the class in how much the update is being made?

  • There are 3 functions, search more about: .removeClass() , .addClass() and .toggleClass()

  • Thank you! @Mastria

Browser other questions tagged

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