Change the Submit-Button with AJAX-function for instantly reacting for an input [closed]

问题

I want to change the possibility to get the answer of the value in the input in this form (to provide the russian word for a number) from the submit-Button to a dynamic AJAX-function to get the answer instantly.

Thank you !!!

With the help of @user1978142 it works perfectly. But now I search for a solution to add a Play-Button, which spellout the word with Google TTS (Text-To-Speech) I find a solution for Google TTS, but it only works on 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:

Since jQuery is tagged, and given that NumberFormatter is already installed, a simple $.ajax is all you need. Take note of the encoding also (I think ru is meant for russian). Consider this example:

Your 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 (Sample Name)

Create the php file that will handle the ajax request. This will process it and return your value.

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

来源：https://stackoverflow.com/questions/24297316/change-the-submit-button-with-ajax-function-for-instantly-reacting-for-an-input

标签

php

jquery

ajax

dynamic

onchange