Ajax copy text from one textarea to another via post

Question

I am trying to use ajax to post the text from one text area to a php page to echo back into another textarea. When I do this it works for about 5 characters and then stops completely. I've tried with and without encoding doesn't seem to make a difference since I'm just trying simple plan text like "ddddddddddd".

in example.html

<!DOCTYPE html>
<html>
<body>
<style>
.center{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}

</style>

<div class="center">

<textarea   onkeyup="changed()" onkeydown="changed()" onkeypress="changed()"  id="b1" rows="30" cols="81">
</textarea>

<textarea id="b2" rows="30" cols="81">
</textarea>

</div>

</body>
</html>
<script>
function changed(){

var text =document.getElementById("b1").value;

if(!text){
text ="";
}

     var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Ajax is not supported by this browser");
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {

                document.getElementById('b2').value =xhr.responseText;

        }
    }

    xhr.open('POST', 'echo.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("text=" + text);



}

</script>

In echo.php

<?php 
 $mytext = $_POST["text"];
 echo $mytext;

?>

I've looked at several similar posts but none of them fix my issue. I'm not using a form. Do I have to? Textarea not POSTing with form

Do you mean to have a space in between '$my' and 'text' in your echo.php file? — JasonJensenDev, Jul 30 '15 at 19:59
My bad when I copied it to this page I must of fat fingered a space. Thats not the problem in actual code. Thanks tho! — Arthur Putnam, Jul 30 '15 at 20:01
Very bad idea sending three requests on every keystroke. Your server is going to have a hard time handling all those requests and they are going to have race conditions. — epascarello, Jul 31 '15 at 03:57
throttle your ajax calls https://github.com/cowboy/jquery-throttle-debounce/ — epascarello, Jul 31 '15 at 04:01
I will look in to that suggestion. I don't know jQuery yet but I can see what your saying. Thanks for the input! — Arthur Putnam, Jul 31 '15 at 15:19

VMcreator · Accepted Answer · 2015-07-31T04:00:14.367

I don't know what you're trying to do, but you can achieve the same output with less requirement, if you change your script to this:

<script>
function changed(){
    var text =document.getElementById("b1");
    if(!text){
       text ="";
    }
    else
    {
        text=text.value;
    }
    var text2 =document.getElementById("b2");
    if(!text2)
    {
       text2.value=text;
    }
}
</script>

Hope it helps.

EDIT

Found out the error now, seems like you're ajax request returns randomly.

I typed 'asd' = it will fire an ajax
Typed 'asdf' = it will fire another ajax

Now the error occur when the second ajax respond first, so the value of second text-area will be 'asdf' at first, but then later on the first ajax respond, it will overwrite the current value to 'asd'.

to solve this, change you're script to this:

    <script>
    var pending_request=false;
    function changed(){
    if(pending_request==false)
    {
        var text =document.getElementById("b1").value;
        if(!text){
            text ="";
        }
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        else {
            throw new Error("Ajax is not supported by this browser");
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById('b2').value =xhr.responseText;
                pending_request=false;
            }
        }
        pending_request=true;
        xhr.open('POST', 'echo.php');
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("text=" + text);
    }
    else
    {
      setTimeout(function(){ changed(); }, 3000);
    }
   }
   </script>

demo here

The idea is to wait for pending ajax request to respond before sending another :D

PS: Excuse me for my bad English.

score 0 · Answer 2 · answered Jul 31 '15 at 22:23

I made the changes suggested by VMcreator and saw major improvements but it still would "break". Preventing any other characters to be received. I tryed the same steps on his demo. It worked perfectly. I decided to try hosting my page and php script on another hosting provider and it WORKED!

I called my hosting provider (godaddy) and they said that since the server was receiving fast requests from the same ip it was rejected by their spam filter. Although my ip wasn't blocked many of my requests were thus, causing even worse race conditions.

Immediate solution - switch hosting provider

long term solution - (hasn't happened yet) change security settings to accept requests.

Hi sir, I suggest you use websocket for this. Use only ajax with client->server , but if you need to send vice versa, then you need websocket. This may be the long term solution you're looking for. - I'm glad I can help :) — VMcreator, Aug 03 '15 at 02:18

Ajax copy text from one textarea to another via post

2 Answers2