Update button using jQuery

Question

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

Answer 1

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 will also have to add a class within your tag <form>. Follow the code not to do refresh and then how will you have to leave your <form> To class is useful, because if you want to create other forms with this script will have the possibility, already with ID no, yeah ID is unique

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="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>

How would you have to change your <form>, don’t worry about leaving it without action=nomedoarquivo.php and without method='POST' after all, I have already indicated this in the above script

<form action='' method='' class='ajax'>

Answer 2

You must use the AJAX method to do this.
Ajax works with asynchronous requests in the background (simply put, it makes an HTTP request without the user seeing and without the page being reloaded)
Follow 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 in practice you have to change some lines of code.
For study, follow a link with some explanations about AJAX.
https://www.w3schools.com/js/js_ajax_intro.asp
http://api.jquery.com/jquery.ajax/

Answer 3

Taking into account that you have a form and want to send it without updating the page you should think about some details. For default, when the submit is given, your form is sent to the action defined, 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>