CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user3854743
user3854743

Reputation: 571

Update div when typing in text field

I want to update a div while changing the value of a input field.

Eg.

<form>
<input type="text" name="test"><!--Eg. 5+5-->
</form>

<div id="SomeId">
<img src=loading.gif>
</div>

So when you changed the value of the input field, it updated the div SomeId, with a external file Eg. calculate.php?test=5+5

So how can I listen on updating a input field?

Upvotes: 0

Views: 2344

Answers (2)

Bob Brown
Bob Brown

Reputation: 1502

<input type="text" onkeypress="doSomething(this.value);"> will send the entire value of the input element to the function after every key press.

Note that best practice is to bind the function on page load using JavaScript, and not with onkeypress but doing the latter gives a one-line example.

Here's a doSomething function for testing:

function doSomething(what) {
    console.log(what);
}

Edited to add: If you don't want to process every keystroke, use the onchange event: <input type="text" onchange="doSomething(this.value);">

Another edit: 

var timerHandle = false; // global!
function setTimer(what) {
    console.log("Captured keys: " + what);
    if (timerHandle) clearTimeout(timerHandle);
    timerHandle = setTimeout(sendItOff,1000); // delay is in milliseconds
}
function sendItOff() {
    what = document.getElementById("test").value;
    console.log("Sending " + what);
}

The input element now has to have an ID: <input type="text" name="test" id="test" onkeypress="setTimer(this.value);">

This uses a one second (1000 ms) timer. That is very short.

Upvotes: 2

teshvenk
teshvenk

Reputation: 403

In the focusout of the text field, Call java script function that should call ajax call to that calculate.php. Return response from php file and update that in particular div Id.

function onfocusoutupdatevalue(){
  $.ajax({
  type: "POST",
  url: "calculate.php",
  data: { value: "5+5" }
  }).done(function( ans ) {
    $("#SomeId").val(ans) 
  });
}

You need to add jQuery lib file.

Upvotes: 0

Related Questions