<!doctype html>
<html lang="en">
<head>
<title>Tim's Language Helper</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
    table.main, td.col_ctl, td.col_word, td.col_meaning {
        border: 1px solid red;
        border-collapse: collapse;
        padding:5px;
    }
    table.meaning, td.meaning {
        border: none;
        border-collapse: collapse;
    }
   
    p.debug {
        display: none;
    }

</style>
<script>

    
    // AJAX request to add word
    function add_word(language) {
        word = document.getElementById("i_word").value
        alert("word entered is: " + word)
        if (word.trim() == "") {
            document.getElementById("message").innerHTML = "Word is blank"
        } else {
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                document.getElementById("message").innerHTML = this.responseText;
            }
            request = "add_word.php?word=" + word + "&language=" + language
            xhttp.open("GET", request, true);
            xhttp.send();
        }
    }
    

</script>
</head>
<body>
<h2>Add Word</h2>

    <br/>Word: <input type="text" id="i_word">
    <br/><button onclick="add_word(1)">Add Word</button>

<div id="message"></div>

<?php

?>

</body>
</html>