Refresh button using jQuery

2

I want to update two fields in the database but without needing to refresh the page but I'm having trouble implementing something like this. That when I click on the UPDATE button the Phone and Mobile fields will be updated in the bank. Follow the image on my screen [!] [Insert the image description here] [1]] [1]

    
asked by anonymous 14.11.2017 / 12:58

3 answers

0

You should use the AJAX method to do this. Ajax works with asynchronous requests in the background (simplifying, it makes an HTTP request without the user seeing and without the page being reloaded)
Here is an example:

$.ajax({
        type:'GET',
        url: "sua_url",
        success: function (data) {            
            //Aqui vc muda os campos que quer mudar
            $('#id_do_input').html(data)
        },
        error: function (data) {
            //Caso de algum erro ele entra nessa função. Sempre é bom tratar uma mensagem de erro....
        }
});

(Just remembering that the example I gave is just for you to understand how ajax works, to use it in practice you have to change some lines of code.) For a study, follow a link with some explanations on AJAX.
link
link

    
14.11.2017 / 13:07
0

Considering that you have a form and want to submit it without refreshing the page you should think of some details. By default , when submit is given, your form is sent to action set, then you must cancel this action default first to then manipulate the data and send it to script that will update the bank

<script type="text/javascript">

$(document).ready(function(){
    $('#ajax_form').on('submit', function(e){
        e.preventDefault(); //Vai cancelar o envio padrão para o action do form
        $.ajax({
            type: "POST",
            url: $('#ajax_form').attr('action'), // pega o action do form
            data: $('#ajax_form').serialize(), // serializa os inputs
            success: function(retorno){
                console.log(retorno); //escreve no console os dados retornados
            }
        });
    });
});
</script>
    
14.11.2017 / 13:13
0

With this code using ajax that I will show below, you will not have refresh on your page, but your button will have to be type=submit and you will also have to add class inside your% with%. Follow the code to not refresh and then as you will have to leave your <form> a <form> is useful, because if you want to create other class with this script you will have the possibility, already with forms no, therefore ID is unique

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scripttype="text/javascript">

$(document).ready(function(){
    $('ajax').submit(function(){

        var dados = $( this ).serialize();

        $.ajax({
            type: "POST",
            url: "nomedoarquivo.php",
            data: dados,
            success: function( data )
            {
                alert( data );
            }
        });

        return false;
    });
});
</script>

As you would have to change your ID , do not worry about leaving it without <form> and without action=nomedoarquivo.php after all, I already indicated this in the script above

<form action='' method='' class='ajax'>
    
14.11.2017 / 13:06