Copy/append ajax textarea response to another non-ajax textarea
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
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
If it's simply appending a response, you can use this(just add id's to the textareas):
document.getElementById("bulkdomains").value += responseText
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"></script>
//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>
精彩评论