Copy/append ajax textarea response to another non-ajax textarea

Question

Hello,

I have ajax domain lookup script.

Look here for DEMO:

Here is JS code for Ajax form Textarea1

<script type="text/javascript">
//Specify the time to wait before checking
var intervalToCheckForChange = 250; // in milliseconds, 300 = 0.3sec
var request;
var statusDivJS;
var isAvailableDivJS;
var domainInput;
var domainsAvailableInput;
var isInProgress = false;
var prevCheckValue = ".com";
var whatDomainDivJS;
var intStartCheck;
var isLoaded = false;
var intFailedResponse;
var timesError = 0;
<?php if ($allowedTLDs != null) { ?>
var allowedTLDs = new Array(<?php
                $totalSize = count($allowedTLDs);
                for ($i = 0; $i < $totalSize; $i++)
                {
                    echo '"'.$allowedTLDs[$i].'"';
                    if ($i != ($totalSize-1)) echo ',';
                }
                ?>  );
<?php } else { ?>               
var allowedTLDs = null;
<?php } ?>
var ajaxDomainForm;
var showAvailableDomains = <?php if (SHOW_AVAILABLE_DOMAINS) echo 'true'; else echo 'false'; ?>;
var enableCaptcha = <?php if (ENABLE_RECAPTCHA) echo 'true'; else echo 'false'; ?>;
var recaptcha_text;
function checkDomain()
{   
    if (isInProgress) return;
    isInProgress = true;
    prevCheckValue = domainInput.value;
    if (domainInput.value.indexOf(".") < 0)
    {
        statusDivJS.innerHTML = "<span style='color:red;'>Enter the TLD (e.g: "+domainInput.value+".COM)<\/span>";
        isInProgress = false;   
        return;
    }
    else if ((enableCaptcha) && ((Recaptcha == null) || ((Recaptcha.get_response() == ''))))
    {
        statusDivJS.innerHTML = "<span style='color:red;'>Please fill in the captcha field below [ <a href='#' onClick='checkDomain();return false;'>Retry<\/a> ]<\/span>";
        isInProgress = false;   
        return;
    }
    else
    {
        //check whether valid extension
        extension = prevCheckValue.substr(prevCheckValue.indexOf('.')+1);
        if ((extension != '') && (allowedTLDs != null))
        {
            found = false;
            for (i = 0; i < allowedTLDs.length; i++)
            {
                if (allowedTLDs[i] == extension)
                {
                    found = true;
                    break;
                }
            }
            if (found == false)
            {
                statusDivJS.innerHTML = "<span style='color:red;'>TLD not allowed. Only "+allowedTLDs+" TLDs allowed<\/span>";
                isInProgress = false;   
                return;
            }
        }
    }
    re = new RegExp("^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)*[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?$"); 
    if (prevCheckValue.match(re) == null)
    {
        statusDivJS.innerHTML = "<span style='color:red;'>Invalid Domain (Letters, numbers and hypens only) <\/span>";
        isInProgress = false;   
        return;
    }
    statusDivJS.innerHTML = "<span style='color:green;'><img src='prg.gif' height='16' width='16' alt='in progress'>Checking "+prevCheckValue+" [ <a href='#' onClick='abortRequest();return false;'>Abort<\/a> / <a href='#' onClick='retryRequest();return false;'>Retry<\/a> ]<\/span>";
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        request = new XMLHttpRequest();
    } 
    else if (window.ActiveXObject) { // IE
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    recap_challenge = '';
    recap_response = '';
    <?php if (ENABLE_RECAPTCHA) { ?>
    recap_challenge = Recaptcha.get_challenge();
    recap_response = Recaptcha.get_response();
    if (recap_challenge == null) return;
    Recaptcha.destroy();
    recaptcha_text.style.display="none";
    <?php } ?>
    var requestUrl = "?aj=&ma="+Math.random()+"&domain="+prevCheckValue+"&rc="+recap_challenge+"&rr="+recap_response;
    //document.location.href = requestUrl;return;
    request.open("GET",requestUrl,true);
    request.onreadystatechange = processResponse; 
    intFailedResponse = setTimeout("failedResponse()",15000);
    try {request.send(null); }
    catch (e) 
    {
        timesError++;
        statusDivJS.innerHTML = "<span style='color:red;'>Error connecting to server ("+timesError+"x)<\/span>";    
    }
}
function failedResponse()
{
    if (!isInProgress) return;
    isInProgress = false;   
    timesError++;
    statusDivJS.innerHTML = "<span style='color:red;'>Error connecting to server ("+timesError+"x)(<a href='#' onClick='checkDomain();return false;'>Retry<\/a>)<\/span>";
    request.abort();
    request = null;
}
function retryRequest()
{   
    if (!isInProgress) return;
    request.abort();
    isInProgress = false;   
    request = null;
    statusDivJS.innerHTML = "<span style='color:red;'>Retrying<\/span>";
    checkDomain();
}
function abortRequest()
{
    if (!isInProgress) return;
    request.abort();
    isInProgress = false;   
    request = null;
    statusDivJS.innerHTML = "<span style='color:red;'>Aborted<\/span>";
}
function updateDomainTld(tldBox)
{
    var domainText = domainInput.value;
    if (domainText.indexOf('.') == -1) return;
    domainText = domainText.substr(domainText,domainText.indexOf('.'));
    domainInput.value = domainText + "." + tldBox.value;
}
function processResponse()
{   
    statusDivJS = document.getElementById("statusDiv"); 
    if (request.readyState == 4)
    {           
        clearTimeout(intFailedResponse);
        var requestXML = request.responseXML; 
        if ((requestXML != null) && (typeof(requestXML) == "object") && (requestXML.getElementsByTagName("domainname")[0] != null))
        {   
            statusDivJS.innerHTML = "Done (<a href='#' onClick='checkDomain();return false;'>Force Check<\/a>)";
            isInProgress = false;
            var domain = requestXML.getElementsByTagName("domainname")[0].firstChild.data;  
            var available = requestXML.getElementsByTagName("available")[0].firstChild.data;
            var errorMsg = "";
            if (requestXML.getElementsByTagName("errorMsg")[0].firstChild != null)
            {
                errorMsg = requestXML.getElementsByTagName("errorMsg")[0].firstChild.data;
                if (errorMsg.indexOf('Captcha') > -1)
                {
                    Recaptcha.create("<?php echo RECAPTCHA_PUBLIC_KEY; ?>",
                        "recaptcha_div", {
                           theme: "white",
                           callback: Recaptcha.focus_response_field
                        });
                    recaptcha_text.style.display="";
                }
            }
            if (available == "true") 
            {
                statusDivJS.innerHTML = "<span style='color:green;'>'"+domain+"' is available!<\/span>";
                                available = "<span style='color:green;'><b>YES<\/b><\/span> ";
                if (showAvailableDomains)
                {
                    if (domainsAvailableInput.value.indexOf(domain +" ") == -1)
                        domainsAvailableInput.value = domainsAvailableInput.value + domain +" \n";
                }
            }
            else
            {
                statusDivJS.innerHTML = "'"+domain+"' is not available.";
                available = "<span style='color:red;'>NO<\/span>";
            }
            if (errorMsg != "")
            {
                statusDivJS.innerHTML = "<span style='color:red;'>"+errorMsg+"<\/span> [ <a href='#' onClick='checkDomain();return false;'>Retry<\/a> ]";           
            }
            if (whatDomainDivJS != null)
                whatDomainDivJS.innerHTML = domain;
            if (isAvailableDivJS != null)
                isAvailableDivJS.innerHTML = available;
        }
        else
        {
            failedResponse();
            return;
        }       
    }
    else if (request.readyState == 3)
    {
        statusDivJS.innerHTML = "Request sent...";
    }
}
function checkForChange()
{
    if (!isLoaded) return;
    if (domainInput == null) return;
    if (domainInput.value == '') return;
    clearTimeout(intStartCheck);
    if (prevCheckValue != (domainInput.value)) 
    {
        intStartCheck = setTimeout("checkDomain()",intervalToCheckForChange);
    }
}
function bodyonLoad()
{
    statusDivJS = document.getElementById("statusDiv");
    isAvailableDivJS = document.getElementById("isAvailableDiv");
    domainInput =  document.getElementById("domain");
    domainsAvailableInput = document.getElementById("domainsAvailable");
    whatDomainDivJS = document.getElementById("whatDomainDiv");
    ajaxDomainForm =  document.getElementById("ajaxDomainForm");
    <?php if (ENABLE_RECAPTCHA) { ?>
    Recaptcha.create("<?php echo RECAPTCHA_PUBLIC_KEY; ?>",
        "recaptcha_div", {
           theme: "white",
           callback: Recaptcha.focus_response_field
        });
     <?php } ?>
     recaptcha_text = document.getElementById('recaptcha_text');
    isLoaded = true;
    setInterval("checkForChange()",intervalToCheckForChange);
}
window.onload = bodyonLoad;
</script>

Here is HTML code for Ajax textarea1

<form onSubmit="checkDomain();return false;" id="ajaxDomainForm" action="">
<input name="domain" type="text" id="domain" style="font-size:2em; width:60%;" onKeyUp="checkForChange();" maxlength="255">
<div id='statusDiv' style="font-weight:bold">Type a domain name!</div><br>
<textarea name="domainsAvailableInput" cols="40" rows="7" id="domainsAvailable" readonly="readonly"></textarea>
<div id='whatDomainDiv' style="font-weight:bold">Domain</div>
<div id='isAvailableDiv' style="font-size:5em">?</div>
</form>

Here is HTML code for NON-Ajax Form textarea2

<form id="" method="post" action="/domainchecker.php?search=bulk">
<textarea name="bulkdomains" cols="60" rows="8"></textarea>
<input type="submit" id="Submit" value="Lookup">
</form>

What I want is, Once I get ajax response from server in textarea1, Copy / append it to textarea2.

The reason for this is I am unable to perform action within textarea1 due to limitations of domainchecker.php of form2

How Can I achieve this ?

Thanks.

• Mandar

Answer 1

The easiest thing to do is to put the response in both places as part of the ajax call.

I would suggest trying out jQuery, you'll find it makes your JS code ten times easier to read and write

Answer 2

If it's simply appending a response, you can use this(just add id's to the textareas):

document.getElementById("bulkdomains").value += responseText

Answer 3

He...he.. This Worked.

See Working DEMO

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

//These are my two textboxes as I mentioned in my Question.//

    <textarea name="domainsAvailableInput" id="domainsAvailable" cols="60" rows="8"></textarea>

    <textarea name="bulkdomains" id="client" cols="60" rows="8"></textarea>

// On clicking this checkbox textarea1 value is copied to textarea2.//

    <input type="checkbox" id="Get">

    <script type="text/javascript">
        $("input:checkbox").click(function () {
     if (this.checked) {
       $('#client').val($('#domainsAvailable').val());
     } else {
       $('#client').val($('').val());
        }
        });    
    </script>