at the first I consider both if and else block executed. After added debugger to code, I don't know why my code run more than once.
function Submit(form) {
var timer_starttime = document.getElementById("timer_starttime");
var timer_finishtime = document.getElementById("timer_finishtime");
if (wait_s.reportValidity() && wait_m.reportValidity()) {
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "/submit_program";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
document.getElementById("success-alert").className = "alert alert-success alert-dismissible";
console.log(this.responseText);
console.log("if");
debugger;
} else {
document.getElementById("error-alert").className = "alert alert-danger alert-dismissible";
console.log("else");
}
};
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({
"timer_finishtime": timer_finishtime.value,
"timer_starttime": timer_starttime.value
}));
}
return false;
}
console.log("end");
<form id="TimeForm" action="" method="POST">
...
<button type="submit" class="btn btn-primary" onclick="return Submit(this);">Save</button>
When you send an AJAX request, the request goes through a number of states. See the documentation of XMLHttpRequest.readyState for the full details.
The onreadystatechange function will be called each time the state changes. So your else block will be executed repeatedly for all the initial states. Then when the request completes successfully, the if block will be executed.
You should only check for an error in the final state 4, not treat all the other states as errors.
function Submit(form) {
var timer_starttime = document.getElementById("timer_starttime");
var timer_finishtime = document.getElementById("timer_finishtime");
if (wait_s.reportValidity() && wait_m.reportValidity()) {
var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
var theUrl = "/submit_program";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
//document.getElementById("ajax_res").innerHTML = this.responseText;
document.getElementById("success-alert").className = "alert alert-success alert-dismissible";
console.log(this.responseText);
console.log("if");
debugger;
} else {
document.getElementById("error-alert").className = "alert alert-danger alert-dismissible";
console.log("else");
}
}
};
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({
"timer_finishtime": timer_finishtime.value,
"timer_starttime": timer_starttime.value
}));
}
return false;
}
console.log("end");
<form id="TimeForm" action="" method="POST">
...
<button type="submit" class="btn btn-primary" onclick="return Submit(this);">Save</button>
Related
I have the following script that shows me information in a div, it works very well but with a button ... I am trying to make it walk from a link, I tried many ways and nothing, any ideas?
<script>
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("contenido").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("contenido").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getcustomer.php?q="+str, true);
history.pushState(null, "", str+ ".xhttp");
xhttp.send();
}
</script>
<input type='button' value='6df67913c1' onclick='showCustomer(this.value);' />
You have to do something like this
const myLinkButton = document.getElementById('my-Link-button')
;
myLinkButton.onclick=e=>
{
e.preventDefault() // -> disable link action for new url
console.log( myLinkButton.dataset.value )
}
<a href="#" data-value="6df67913c1" id="my-Link-button" >button by link</a>
Use <a href="JavaScript: void (0)" onclick="callYourFunction()>link<\a>
You can do this.
<script>
function showCustomer(element) {
const str = element.getAttribute('data-value')
var xhttp;
if (str == "") {
document.getElementById("contenido").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("contenido").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getcustomer.php?q="+str, true);
history.pushState(null, "", str+ ".xhttp");
xhttp.send();
}
</script>
Same, from link
hi when im trying to use xhttp.send(); it keeps returning
net::ERR_EMPTY_RESPONSE
my code is like this. when the user tries to presses too fast it kicks him off of the page. is there a way to stop this?
document.domain = "bitcoinrpg.com";
function UsernameTaken(name) {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (name == "") {
document.getElementById("UsernameTaken").innerHTML = "";
return;
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("UsernameTaken").innerHTML = this.responseText;
}
};
xhttp.open("GET", "CheckUsername.php?q=" + name, true);
xhttp.send();
}
function BattlePlayers() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("BattleTable").innerHTML = this.responseText;
}
};
xhttp.open("POST", "GetPlayers.php?", true);
xhttp.send();
PlayerInfo();
}
function PlayerInfo() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("CharacterBar").innerHTML = this.responseText;
}
};
xhttp.open("POST", "PlayerInfo.php?", true);
xhttp.send();
}
function FightPlayer(enemyName) {
var elements = document.getElementsByClassName("BattleButton");
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute("disabled", "disabled");
}
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("battlestatus").innerHTML = this.responseText;
BattlePlayers();
}
};
xhttp.open("GET", "FightPlayer.php?enemyname=" + enemyName, true);
xhttp.send();
}
function InventoryShow() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("InventoryTable").innerHTML = this.responseText;
}
};
xhttp.open("POST", "PlayerInventory.php?", true);
xhttp.send();
}
I've tried messing about with just about every php.ini setting ive tried renaming each xhttp variable for each function every time it just returns the same. you can see what im meaning here
For anyone experiencing the same thing and you are with GoDaddy for your hosting. you need to switch its a problem on there end and switching fixed it for me.
I'm trying to create an AJAX call with the post method, and can't get it to work right. The script hangs at the processing stage (readyState does not go on to 4).
I'd appreciate it if someone could enlighten me on the issue here. I've looked at a couple of tutorials, and it seems that my code -should- work.
function newRequestPost(url, post, threadid, cfunc) {
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var params = "post="+post+"&threadid="+threadid;
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(params);
}
function openModalPreview(threadid) {
var post = document.getElementById("post_txt").value;
newRequestPost("url", post, threadid, function() {
if(xmlhttp.readyState == 1) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = "Loading...";
}
if(xmlhttp.readyState == 2) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = "Received";
}
if(xmlhttp.readyState == 3) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = "Processing...";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = xmlhttp.responseText;
}
});
}
How do I retrieve returndata variable outside fn() function?
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var returndata = xmlhttp.responseText;
}
}
xmlhttp.send(vars);
}
You need to define global variable before function and then store the result into this variable. The way you do it now, is definition of local variable.
var returndata;
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
returndata = xmlhttp.responseText;
}
}
xmlhttp.send(vars);
}
AJAX requests are asynchronous. You cannot have the pizza before it is baked. In real life you call the pizza company. They bake it and you wait. AJAX is the same. So setting the returndata won't do it all by itself.
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var returndata = xmlhttp.responseText;
}
}
xmlhttp.send(vars);
}
The readystate function isn't there for nothing. It waits until the request has been processed. From there on you can go on. Every function/script that is depended on the returned data should be called upon from that function.
Still you can do this:
var returndata; //this will now be a global variable.
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var returndata = xmlhttp.responseText;
doSomeThing(); //fire depended value.
}
}
xmlhttp.send(vars);
}
function doSomething()
{
if(returndata)
{
//do Something
}
else
{
alert("Data isn't loaded yet");
}
}
I'm trying to work on xmlhttprequests which isn't working. When inserting an alert box I receive a status of 0. Cant quite figure out what's wrong.
function submitChat() {
if (form1.uname.value != '' && form1.msg.value != '') {
var uname = form1.uname.value;
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
alert(xmlhttp.status);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "insert.php?uname=" + uname + "&msg=" + msg, true);
xmlhttp.send();
} else {
alert("All Fields are Mandatory !!!");
return;
}
}
<form name="form1" action="#">`` Chatname:
<input type="text" name="uname" />
<br/>
<textarea name="msg"></textarea>
Send
<br/>
<br/>
</form>
<div id="chatlogs">
Loading Chat History !!!!!!!!!!
</div>
You should do .open() before your alert. So your code becomes like this:
function submitChat() {
if (form1.uname.value != '' && form1.msg.value != '') {
var uname = form1.uname.value;
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","insert.php?uname="+uname+"&msg="+msg,true);
alert (xmlhttp.status);
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readystate==4 && xmlhttp.status==200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
} else {
alert("All Fields are Mandatory !!!");
return;
}
}