Q: AJAX repeatitive values php for a simple to-do app I have the following issue when adding new items. When I add a new item, multiple values are spit. I entered the first 2 in db (phpmyAdmin). The click button displays the new data without the refreshing the page. Different number of copies are returned on each click. sometimes 7 as below, sometimes 13, 30 even up to 100+ copies if the execution hangs for long. Could the onload=process() on <body> be affecting the call?

When I enter a new value, It displays multiple values. (Edit: Apologies. In the snapshot below, ["rd] is meant to spell [new])

Where could the bug be?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To Do List</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous">
    </script>

    <script src="js/item.js" type="text/javascript"></script>
</head>

<body onload="process()">
    <div class="list">
        <h1 class="header">My To Do</h1>
        <div id="todo-items"></div>
    </div>

    <div class="list">
        <div id="item-add" >
            <input type="text" id="name" name="name" placeholder="Enter new item" class="input" autocomplete="off">
            <button id="add">Add Item</button><br /><br />
            <div id="status"></div>
        </div>
    </div>

</body>

 
item.js
var xmlHttp = createXmlHttpRequestObject();

        function createXmlHttpRequestObject() {
            var xmlHttp;

            if(window.ActiveXObject) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {
                    xmlHttp = false;
                }
            } else {
                try {
                    xmlHttp = new XMLHttpRequest();
                } catch(e) {
                    xmlHttp = false;
                }
            }

            if(!xmlHttp) {
                alert("cant create that object hoss");
            } else {
                return xmlHttp;
            }

        }

        function fetch_data(){
            $.ajax({
                url:"/to-do-list/display.php",
                method:"POST",
                success:function(data){
                    $('#todo-items').html(data);
                }
            });
        }
        fetch_data();

        function process() {
            $(document).ready(function(){
                $(document).on('click', '#add', function(){
                    $.ajax({
                        url:"/to-do-list/add.php",
                        method:"POST",
                        data:{name:name},
                        success:function(data){
                            //console.log(data + 'hi');
                            //$('#item-add').submit( function() {
                            //  console.log("are you returning false?");
                            //  return false;
                            //});
                            function clearinput (){
                                $('#item-add :input').each( function(){
                                    $(this).val('');
                                });
                            }
                            clearinput();
                            fetch_data();
                        }
                    });

                });
            });

            if (xmlHttp.readyState==0 || xmlHttp.readyState==4) {
                name = encodeURIComponent(document.getElementById('name').value);
                xmlHttp.open("GET", "item.php?name="+name, true);
                xmlHttp.onreadystatechange = handleServerResponse;

                xmlHttp.send(null);
            } else {
                setTimeout('process()', 1000);
            }
        }

        function handleServerResponse(){
            if(xmlHttp.readyState==4) {
                if(xmlHttp.status==200){
                    xmlResponse = xmlHttp.responseXML;
                    xmlDocumentElement = xmlResponse.documentElement;
                    console.log(xmlResponse.documentElement);
                    message = xmlDocumentElement.firstChild.data;
                    // message = "colin";
                    document.getElementById('status').innerHTML = 
                    '<span style="color:blue">' + message + '</span>';
                    setTimeout('process()', 1000);
                } else {
                    alert('Something went wrong!');
                }
            }
        }


A: Found the bug. Took the ajax call out of the onload function in item.js
