function search() {
    var title = document.getElementById("title").value;
    var type = document.getElementById("Type").value;
    var genreSelection = document.getElementsByClassName('menu-hidden')[0].
                                         querySelectorAll('input:checked');
    var size = genreSelection.length;
    var genres = ""

    for (var i=0; i<size; i++) {
        if (size > 1) {
            genres += genreSelection[i].value + ", ";
        } else {
            genres += genreSelection[i].value;
        }
    }

    porcess("dbQuery=set&title=" + title + "&genres=" + genres + "&type=" + type);
}

function porcess(data) {
    var formData = data;
    var xhttp = new XMLHttpRequest();  // Create the xhttp object

    // This is actually run after open and send are done
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
             updatePage(this);  // Send the returned data to further process
        }
    };
    xhttp.open("POST", "process.php", true);  // Open the connection
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(formData);    // Start the process
}

function updatePage(response) {
    // Get the echoed data and insert to div of dynDataField
    document.getElementById("dynDataField").innerHTML = response.responseText;
}

function clearData() {
    document.getElementById("title").value = "";
    document.getElementById("dynDataField").innerHTML = "";
    document.getElementById("Type").value = "";

    var col = document.getElementsByClassName('menu-hidden')[0];
    for (var i=0; i<col.children.length; i++) {
        col.children[i].checked = false;
    }

}
