<html>

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

    <script>
        function Ajax1Valor(idvalor, idresult, archivo) {
            var valor = $('#' + idvalor).val();

            if (valor.length == 0) {
                document.getElementById(idresult).innerHTML = "";
                return;
            } else {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById(idresult).innerHTML = this.responseText;
                    }
                };

                xmlhttp.open("GET", archivo + "?q=" + valor, true);
                xmlhttp.send();
            }

        }

        function Ajax2Valor(idvalor1, idvalor2, idresult, archivo) {
            var valor1 = $('#' + idvalor1).val();
            var valor2 = $('#' + idvalor2).val();

            if (valor1.length == 0 || valor2.length == 0) {
                document.getElementById(idresult).innerHTML = "";
                return;
            } else {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById(idresult).innerHTML = this.responseText;
                    }
                };
                xmlhttp.open("GET", archivo + "?q1=" + valor1 + "&q2=" + valor2, true);
                xmlhttp.send();
            }

        }

    </script>
</head>

<body>
    <p><b>Calculo del doble:</b></p>
    <form action="">
        <label for="fname">Numero:</label>
        <input type="text" id="fnam1" name="fname" onkeyup="Ajax1Valor('fnam1','txtHint','calculoDoble.php')">
    </form>
    <p>Resultado: <span id="txtHint"></span></p>
    <hr>

    <p><b>Calculo del suma:</b></p>
    <form action="">
        <label for="fname">Numero 1:</label>
        <input type="text" id="valor1" name="valor1">
        <br>
        <label for="fname">Numero 2:</label>
        <input type="text" id="valor2" name="valor2">
        <button onclick="Ajax2Valor('valor1','valor2','txtHint2','suma.php')"></button>
    </form>
    <p>Resultado: <span id="txtHint2"></span></p>
</body>



</html>