Change the submit button using the AJAX function to respond instantly to input

I want to change the ability to receive a response from an input value in this form (to provide a Russian word for a number) from a submit button to an AJAX dynamic function to get an answer instantly.

Thank!!!

Using @ user1978142 it works fine. But now I'm looking for a solution to add a Play-Button that pronounces a word using Google TTS (Text-To-Speech) I find a solution for Google TTS, but it only works in Google Chrome.

<?  
    $ru = new NumberFormatter("ru", NumberFormatter::SPELLOUT);     
?>

<form method="get" action="index.php">
    Zahl: 
    <input name="zahl" type="text" size="15" maxlength="15">
    <input type="submit" value="Anzeigen">
</form> 

<?
    if (is_numeric($_REQUEST['zahl'])) echo $ru->format($_REQUEST['zahl']);
?> 
-1
source share
1 answer

jQuery , , NumberFormatter , $.ajax - , . ( , ru ). :

index.php

<form method="POST" action="index.php">
    <label for="zahl">Zahl:</label> <br/>
    <input id="zahl" name="zahl" type="number" size="15" maxlength="15"><br/><br/>
    <div id="results" style="width: 400px;"></div> <!-- results appear here -->
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('#zahl').on('keyup', function(){
            // ajax request server
        $.ajax({ url: 'number_process.php', type: 'POST', dataType: 'text', data: {value: $(this).val()},
            success: function(response) {
                $('#results').text(response); // append to result div
            }
        });
    });

});
</script>

number_process.php ( )

php, ajax. .

<?php

if(isset($_POST['value'])) {
    $ru = new NumberFormatter("ru", NumberFormatter::SPELLOUT);
    // normal processing
    $value = $ru->format($_POST['value']);
    echo mb_convert_encoding($value, 'UTF-8', 'auto'); // russian characters
    exit;
}
?>
+1

Source: https://habr.com/ru/post/1545524/


All Articles