Обновление div при вводе текстового поля

Question

Я хочу обновить div при изменении значения поля ввода.

Например.

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

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

Поэтому, когда вы изменили значение поля ввода, оно обновило div SomeId с помощью внешнего файла Eg. calculate.php? test = 5 + 5

Так как я могу слушать обновление поля ввода?

Answer 1

<input type="text" onkeypress="doSomething(this.value);"> отправит все значение входного элемента в функцию после каждого нажатия клавиши.

Обратите внимание, что наилучшей практикой является привязка функции к загрузке страницы с использованием JavaScript, а не с помощью onkeypress, но при этом последнее дает пример с одной строкой.

Вот doSomething функция для тестирования:

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

Edited добавить: Если вы не хотите обрабатывать каждое нажатие клавиши, используйте onchange событие: <input type="text" onchange="doSomething(this.value);">

Другой редактировать:

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); 
} 

Элемент ввода теперь должен иметь идентификатор: <input type="text" name="test" id="test" onkeypress="setTimer(this.value);">

Используется таймер 1 секунда (1000 мс). То есть очень короткий.

Answer 2

В фокусе текстового поля вызовите функцию java script, которая должна вызывать вызов ajax для этого метода вычисления.php. Возвратите ответ из файла php и обновите его, в частности div Id.

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

Вам необходимо добавить файл jQuery lib.