How to call a function after textbox lose focus

Question

I have no experience with Javascript/JQuery/AJAX so I'm trying to understand if it's possible to call a function that execute a query on my DB after a textbox lose focus.

I'm displaying a table in my page (using PHP) with text boxes that contains the same values of a table on my DB, and when someone change the value on a text box I want to change the DB table with an UPDATE query to make them equals; is that a way with AJAX or JQuery to do this?

Herbherbaceous

Just clarify some things: JavaScript is a language, jQuery is a library written in JavaScript and Ajax is method of communication. Maybe you find the MDN JavaScript Guide helpful. – Detrude

Answer 1

<input type="text" id="check">​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$("#check").blur(function() {
 alert('working');
});​
</script>

Reading

Answer 2

Bind a handler to the change event:

<textarea onchange='ajax_call()'></textarea>

where ajax_call is a function for updating the DB.

Intranuclear

Yes, its year 2012 and I just saw an inline js. – Flocculate

its not that i dont know about the advanced method available but with a novice, i prefer to used the simplest one availble! Maybe, it's you who should realize its 2012 – Intranuclear

That was a lite joke bro. Keep it cool. But may be you dont realize that your method works on onchange not on losing focus as OP wanted :) – Flocculate

it's 2017 and I am still using inline JS function calls.. and still see nothing wrong with it. Or maybe it's 2012 for whoever is reading this and this is me from the future. – Sapajou

Answer 3

Yes, you can. First you need to wait for JavaScript event like onchange/onblur or other. Than you need to make an Ajax call to the server. It will change the data in db and can result some data, that you can put on the page. You can use jQuery to manipulate your page.

Another way is to wait until a person presses submit button and than update data in the db.

Inositol

Answer 4

<form id='form'>
  <label for="name">name:</label>
  <input type="text" name="name" onblur="makePink()">
</form>

<script>
    function makePink() {
       document.body.style.backgroundColor = 'pink';
    }
</script>

Korwin