show alert when second input box filled data from first box - javascript

I have this code with me:
<input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
value="" type="text" onKeyPress="strQuery(this.value)"/> *<!--first inputbox-->*
<script>
function strQuery(str) {
if (str.length == 0) {
document.getElementById("valdata").value = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("valdata").value = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "inc.php?q="+str, true);
xmlhttp.send(null);
}
}
</script>
<input id="valdata" name="valdata" value="" type="text" onChange="showalert()"/>*<!--2nd inputbox-->*
<script>
function showalert(){
var X =document.querySelector("#valdata").value;
alert(X);
}
</script>
When I run function strQuery(str) it works 100% and show the result in the second inputbox (#valdata). When second inputbox contains data (from 1st inputbox). the second box not show alert
Do I miss something? How can I do this? (pls not using jquery). many thanks

I've finally found the solution for my problem.
I fix the place of the second JS (showalert) into the first, as follows:
<input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
value="" type="text" onKeyPress="strQuery(this.value)"/>
<script>
function strQuery(str) {
if (str.length == 0) {
document.getElementById("valdata").value = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("valdata").value = xmlhttp.responseText;
showalert()
}
}
xmlhttp.open("POST", "inc.php?q="+str, true);
xmlhttp.send(null);
}
}
function showalert(){
var X =document.querySelector("#valdata").value;
alert(X);
}
</script>
<input id="valdata" name="valdata" value="" type="text"/>
Thanks so much for discussion.

It looks like there's a missing double quote after showalert();
But separately, I think that onchange may only fire in response to user input. If that's the case, simply change your code to:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("valdata").value = xmlhttp.responseText;
document.getElementById("valdata").onchange();
}

Related

Page submission state doesn't change

I have a form like this:
function nametst(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("namevalidity").innerHTML = this.responseText;
}
};
xmlhttp.open("POST", "nametst.php?=namerequest" + str, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
function mailtst(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("mailvalidity").innerHTML = this.responseText;
}
};
xmlhttp.open("POST", "mailtst.php?=mailrequest" + str, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
function submittst(){
nametst(document.getElementsByName('name')[0].value);
mailtst(document.getElementsByName('email')[0].value);
return xls;
}
var xls;
function submittes(callback){
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200){
callback(httpRequest.responseText);
}
};
httpRequest.open('POST', "submitform.php", true);
httpRequest.send();
}
submittes(function (result) {
if (result === "yes"){
xls = true;
document.getElementById("submitanswer").innerHTML = "true";
}
else{
xls = false;
document.getElementById("submitanswer").innerHTML = "false";
}
});
<form method="POST" onsubmit= "return submittst();" action = "welcome.html">  
  Name: <input type="text" name="name" onblur="nametst(value)">
<span id="namevalidity"></span> </p>
email: <input type="text" name="email" onblur="mailtst(value)">
<span id="mailvalidity"></span> </p>
<input type="submit" value="submit">
<p> form validity: <span id="submitanswer"></span> </p>
and if the name and email are valid, submitform.php returns "yes".
When I type wrong name or email the errors will appear. So far, so good. But the form validity is always false, and it won't change even when I click "submit" button. When I set default value for name and email and they are valid, the form validity remains true.
Why does this happen?
And how can I solve it?
so, I knew that the problem was because of callback method. since there was no answer to my question, I'll use synchronous mode without these callbacks.

Vanilla JS+AJAX - check whether a value already exists

I've got a form, which contains an input (a title for a post). I need that input to be filled with a value that doesn't exiest already in my database, so what I'm trying to do is requesting an AJAX call, to check on the fly whether that post title is already created, activated by "onChange" event.
Here is my Vanilla JS\AJAX code:
function checkEx(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function checkExNow(xhttp) {
document.getElementById("pcp_ex").innerHTML = xhttp.responseText;
}
And here is my HTML input:
<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow)" name="pcp_name" type="text" placeholder="Post Title"> <div id="pcp_ex"></div>
Problem is, I have to find a way to send the input's value, in order to check it with my database on that PHP file.
Please, teach me how to do this using vanilla JS.
Thank you in advance!
You need to also send to your function the current value of the input field
function checkEx(url, cFunction, valueToCheck) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url+"?check="+valueToCheck, true);
xhttp.send();
}
<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow, this.value)" name="pcp_name" type="text" placeholder="Post Title"> <div id="pcp_ex"></div>
Here you could check a complete example.
Thanks to your help, I managed.
For those who reached that post with similar issue, wondering how to do this, this is how I managed:
JS:
function checkEx(url, cFunction, valueToCheck) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url+"?check="+valueToCheck, true);
xhttp.send();
}
function checkExNow(xhttp) {
document.getElementById("pcp_ex").innerHTML = xhttp.responseText;
}
HTML:
<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow, this.value)" name="pcp_name" class="reg_input" type="text" placeholder="Post Title">
<span id="pcp_ex"></span>
PHP:
$exe = $_GET['check'];

Why is XMLHttpRequest failing the readystate and status state in localhost

Hi I have this code that for some reasons I don't understand just refuse to work. I really don't know what I will do anymore.
This is my code:
<script>
function findMatch() {
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else {
xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('results').innerHtml = xmlHttp.responseText;
}else {
console.log('not ready yet');
}
}
xmlhttp.open('GET','aindex.php',true);
xmlhttp.send();
}
</script>
<form>
Enter a name<br>
<input type="text" id="search" name="keyword"
onkeydown="findMatch();">
</form>
<div id="results"></div>
//THE PHP FILE TO OUTPUT
<?php
echo 'Did it work';
?>
It prints not ready in the console indicating that the readystate and status test failed. I am working with xamp.
Please pals, any help will be highly appreciative.
Thank.
You're not sending the search keyword to the PHP script.
var keyword = document.getElementById("search").value;
xmlhttp.open("GET", "aindex.php?keyword=" + encodeURIComponent(keyword)", true);
xmlhttp.send();
There's also little point in reporting an error when xmlhttp.state is not 4, other states are normal as intermediate steps. If you want to report an error, do it when xmlhttp.status is not 200.
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.getElementById('results').innerHtml = xmlHttp.responseText;
} else {
console.log("Bad status: " + xmlhttp.status);
}
}

Start and stop AJAX by selecting radio buttons

I have a small form that only has two radio buttons. To turn on automatic checking and one to disable it:
<form class="user-containter-form">
<input type="radio" id="refreshOn" name="perCheck" value="on" checked="checked">Periodic Checking On<br>
<input type="radio" id="refreshOff" name="perCheck" value="off" onclick="alert('hello');" onclick="getTweets()">Periodic Checking Off
</form>
And I have an AJAX request for the actual getting of info.
if(document.getElementById('refreshOn').checked) {
setInterval(function () {sendRequest()}, 2000);
function sendRequest(){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
if(xmlhttp.status == 200){
document.getElementById("test").innerHTML=xmlhttp.responseText;
} else if(xmlhttp.status == 400) {
alert('There was an error 400')
} else {
alert('something else other than 200')
}
}
}
xmlhttp.open("GET","getTweets.php?",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
}
By default I have it set to on, but I would like the user to be able to disable to refresh. How can I achieve this?
Your html become:
<input type="radio" id="refreshOff" name="perCheck" value="off" onclick="disableAutoRefresh();" onclick="getTweets()">Periodic Checking Off
You declare new variable global and define new function:
var autoRefresh = true
function disableAutoRefresh(){
autoRefresh = false;
}
You modify your code
if(document.getElementById('refreshOn').checked) {
setInterval(function () {if (autoRefresh) sendRequest()}, 2000);
//rest of your code
//...
}
set the interval to a variable and clear the variable based on user input
var theInterval;
if(document.getElementById('refreshOn').checked) {
theInterval = setInterval(function () {sendRequest()}, 2000);
function sendRequest(){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
if(xmlhttp.status == 200){
document.getElementById("test").innerHTML=xmlhttp.responseText;
} else if(xmlhttp.status == 400) {
alert('There was an error 400')
} else {
alert('something else other than 200')
}
}
}
xmlhttp.open("GET","getTweets.php?",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();
}
}
$('input').click(function(){
if(document.getElementById('refreshOff').checked){
clearInterval(theInterval);
}
});

URL Redirect based on input but if input url does not exist do not redirect cant get PHP to work

#themask
Hello and thanks for your help, I have tosed the php and now have just this code
<script>
document.forms[0].onsubmit =
function() {
var to = document.getElementById('myInput').value;
var ajax = new XMLHttpRequest;
ajax.onreadystate = function() {
if(this.readyState == 4 && this.status != 404) {
window.locaiton.replace(to);
} else {
window.location.replace('http://www.mysite.com/incontinence/protective_underwear/presto_protective_underwear/');
}
};
ajax.open('GET',to);
ajax.send(null);
};
</script>
<form onsubmit="location.href='http://www.mysite.com/coupons/' + document.getElementById('myInput').value; return false;" >
<input type="text" id="myInput" />
<input name="Submit" type="submit" id="Submit" />
</form>
But it is still sending me to incorrect urls if a bad code is used. Its like it is skipping the java all together.
Any additional help would be great.
Thank you,
Micah
Thank you,
Micah
Try using get_headers()
$headers = get_headers('http://www.activelifemed.com/incontinence/protective_underwear/presto_protective_underwear/')
if($headers[0] == 'HTTP/1.1 200 OK'){
//exists
}
else{
//doesn't exist
}
http://www.php.net/manual/en/function.get-headers.php
You can make this using JavaScript:
document.forms[0].onsubmit =
function() {
var to = document.getElementById('myInput').value;
var ajax = new XMLHttpRequest;
ajax.onreadystate = function() {
if(this.readyState == 4 && this.status != 404) {
window.locaiton.replace(to);
} else {
window.location.replace('http://www.mysite.com/incontinence/protective_underwear/presto_protective_underwear/');
}
};
ajax.open('GET',to);
ajax.send(null);
};

Categories