Ajax dont answer me the true condition

Question

This is the html div:

<div class="alert alert-success alert-dismissable feedstatus hidden">
                          <button type="button" class="close" data-dismiss="alert">&times;</button>
                          <span class="glyphicon glyphicon-ok-sign" style="color:#0c0; font-size:40px;"> </span></a><br/>Message recieved.<br/>Thanks <strong class="feedbacker"></strong> 
                        </div>
                        <form role="form" onsubmit="regFeedback()">
                            <div class="form-group">
                                <input class="form-control bordering" id="feedbacker" type="text" name="name" placeholder="Name" style="border:none; border:0px solid #fff;" required/><br>
                                <input class="form-control bordering" id="feedbackemail" type="email" name="email" placeholder="tu@email.com" style="border:none; border:0px solid #fff;"  required/><br>
                                <textarea class="form-control bordering" id="feedback" name="feedback" placeholder="Write me something before go" style="border:none; border:0px solid #fff;"  required/></textarea><br>
                                <button type="submit" class="btn btn-block">Send</button>
                            </div>
                        </form>
                    </div>

In the other hand, the javascript:

function regFeedback() {
var name=document.getElementById('feedbacker').value;
var mail=document.getElementById('feedbackemail').value;
var feed=document.getElementById('feedback').value;
var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
 } else {
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
   xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
        $(document).ready(function() {
           $("form").remove();
           $(".feedstatus").removeClass("hidden");
           $(".feedbacker").text(name);
           alert("Mensaje recibido. Gracias");
       });
   }
   };
    xmlhttp.open("GET","https://page.php?name="+name+"&email="+mail+"&feedback="+feed,true);
   xmlhttp.send();
   }

The data arrive to the data base, but the callback event where verifies: "if (this.readyState==4 && this.status==200) {" looks like don't work. I'm new in this, but i made it work well. But from a moment editing to another, something is wrong :/

maybe you should use jquery ajax instead of native it's much easier to understand. — Beginner, May 09 '17 at 07:21
No @Ahmed Ginani, i change it by security reasons. I have it well and the it saves the data. The trouble is in the answer after data saved: the jquery inside the if condition. — Abax, May 09 '17 at 07:29

brk · Answer 1 · 2017-05-09T07:32:42.247

0

Not tested but I think instead of

 if (this.readyState==4 && this.status==200)

will be

if (xmlhttp.readyState==4 && xmlhttp.status==200)

this is a keyword in javascript & it refers to an object; that is, the subject in context, or the subject of the executing code

Also it is surprising so see the document.ready function is inside ajax success function

edited May 09 '17 at 07:32

answered May 09 '17 at 07:30

brk

48,835
10
56
78

Let me check. Thanks :3 – Abax May 09 '17 at 07:31
@Greg remove the document.ready function but only keep the code – brk May 09 '17 at 07:34
Done! @brk. Thanks – Abax May 09 '17 at 07:54
@Greg does my answer helped you ? – brk May 09 '17 at 07:55
I assume it's better to use 'xmlhttp' instead 'this' is better, thanks. But the trouble contunues :/ – Abax May 09 '17 at 07:59

score 0 · Answer 2 · edited May 10 '17 at 06:21

Use this:

<div class="alert alert-success alert-dismissable feedstatus hidden">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <span class="glyphicon glyphicon-ok-sign" style="color:#0c0; font-size:40px;"> </span></a><br/>Message recieved.<br/>Thanks <strong class="feedbacker"></strong> 
    </div>
    <form role="form">
        <div class="form-group">
            <input class="form-control bordering" id="feedbacker" type="text" name="name" placeholder="Name" style="border:none; border:0px solid #fff;" required/><br>
            <input class="form-control bordering" id="feedbackemail" type="email" name="email" placeholder="tu@email.com" style="border:none; border:0px solid #fff;"  required/><br>
            <textarea class="form-control bordering" id="feedback" name="feedback" placeholder="Write me something before go" style="border:none; border:0px solid #fff;"  required/></textarea><br>
            <button type="button" onclick="regFeedback()" class="btn btn-block">Send</button>
        </div>
    </form>
</div>

**You are using button as submit, use this as a button and call javascript at button onclick Replace your Html code with this:** — sangram singh, May 09 '17 at 07:40

score 0 · Answer 3 · answered May 09 '17 at 07:48

0

You have to use your xmlhttp object while checking for state change instead of this.

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {       
       $("form").remove();
       $(".feedstatus").removeClass("hidden");
       $(".feedbacker").text(name);
       alert("Mensaje recibido. Gracias");       
}
};

Also you are not require to perform action on $(document).ready() function, you can perform actions directly in success block.

answered May 09 '17 at 07:48

Nishesh Pratap Singh

2,131
2
13
20

Done! But not. Thanks – Abax May 09 '17 at 07:57
What issue are you getting now? – Nishesh Pratap Singh May 09 '17 at 07:58
The same although all you answers guys – Abax May 09 '17 at 08:02
Please check browser's log, then you will be more close to the issue. – Nishesh Pratap Singh May 09 '17 at 08:03
I have too long watching it and no idea. I will paste it. – Abax May 09 '17 at 08:11
XMLHttpRequest cannot load https://page?parameters. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://page.000webhostapp.com' is therefore not allowed access. – Abax May 09 '17 at 08:12
This error means, you are trying to access pages from different protocol. Please have a look at http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work for more information on that. – Nishesh Pratap Singh May 09 '17 at 08:19
Nishesh Pratap nishesh.pratap@gmail.com Hello 09/05/17 04:23 – Abax May 09 '17 at 08:32
As your website is hosted with **http://** protocol and you are using **https://** in your ajax url, that is the issue change it to **`http://greg`** – Nishesh Pratap Singh May 09 '17 at 08:33
Oh right works!!! :D ... Thanks \n --- But i remember i had secure http before, i will check that T.T – Abax May 09 '17 at 08:41

Ajax dont answer me the true condition

3 Answers3