PHP/javascript onchange not working with textarea

Question

I am having a problem with this javascript function, but I am not sure what is really going on. To keep the story short; I made a dropdown list using select, with several options(project names). These options are taken from a database. Each project has a name(listed in the dropdown list) and content. The content is supposed to be loaded in to a textarea. Now this is the part that I made and works.

However, the problem is that when I change something in the content(in the textarea) of a project, the dropdown list stops working. I can still click on it and change to a different project, but that project is not loaded.

Here is my javascript

<script>
        function getContent()  {
            var mail = document.getElementById("email").value;
            var project = document.getElementById("projects").value;
            var xhr;
            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) { // IE 8 and older
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            var data = "project=" + project+  "&email=" + mail;
            xhr.open("POST", "/includes/projects.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(data);
            xhr.onreadystatechange = display_data;
            function display_data() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        //alert(xhr.responseText);
                        document.getElementById("projectcontent").innerHTML = xhr.responseText;
                    } else {
                        alert(xhr.status);
                    }
                }
            }
        }
    </script>

And here is my dropdown and textarea.

<form>
<select id="projects" onchange="getContent()"><option>Select project</option>
        <?php
        foreach($projects as $project)
        {?>
            <option value="<?php echo $project['id'];?>"><?php echo $project['name']; ?></option>
        <?php
        }
        ?>
 </select><input type="hidden" id="email" value="<?php echo $_SESSION['user']; ?>" /></form><br />
<textarea id="projectcontent"></textarea>

What is going wrong here? Why does the getContent function work at the beginning, but when I change the content of the textarea, it stops working?

Answer 1

You have to set the value property of the text area not the innerHTML

document.getElementById("projectcontent").value = xhr.responseText;

Answer 2

you can make this function very simple using jquery.

function getContent()  
 {      
     var mail = $("#email").val();
     var project = $("#projects").val();

    $.ajax({
            type : "POST",
            url : "/includes/projects.php",
            data : "project=" + project+  "&email=" + mail,
            success : function(result)  {  $("#projectcontent").val(result);  }
           });  
 }