I am trying to load weather data using a simple http request. The actual request is set up properly, as it works perfectly when not called, but rather when the program just runs it upon loading. However, when I place the code in a function called from an onclick or onsubmit event, the readyStatus foes directly to 4, and the status code stays at 0, and that is it. The request does not get executed. Is there something I do not know about setting up an http request in an event handler function? Or is there a mistake in this work that I have not realized. The relevant code is directly below:
<form class="form-inline">
<div class="form-group">
<label for="city">City: </label>
<input type="city" class="form-control" id="city" placeholder="Enter City">
</div>
<div class="form-group">
<label for="state">State: </label>
<input type="state" class="form-control" id="state" placeholder="Enter State">
</div>
<button type="submit" class="btn btn-lg btn-info" id="submit" onclick="get_data()">Submit</button>
</form>
And the get_data function, where the http request is set up, is below:
function get_data(){
request = new XMLHttpRequest();
request.open("GET", "http://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json", true);
request.onreadystatechange = function(){
alert(request.readyState);
alert(request.status);
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
}
request.send();
}
Mixed content warning with the current code. Changing the url from http to https solves it. Check this snippet, the http button and the https button change the url from/to https. The problem exhibited from http match your reported issue.
function get_data(s){
request = new XMLHttpRequest();
url = "http://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json";
if (s) url = "https://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json";
request.open("GET", url, true);
request.onreadystatechange = function(){
alert(request.readyState);
alert(request.status);
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
}
request.send();
}
<button onclick='get_data()'>http</button>
<button onclick='get_data(1)'>https</button>
I simplified the button, and changed the alerts to console.log(s) on jsbin, and it's working properly (IMO):
function get_data() {
console.log('running');
request = new XMLHttpRequest();
request.open("GET", "http://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json", true);
request.onreadystatechange = function () {
console.log(request.readyState);
console.log(request.status);
request.readyState == 4 &&
request.status == 200 &&
console.log(request.responseText);
}
request.send();
}
<button onclick="get_data()">Submit</button>
http://jsbin.com/cegifi/edit?html,js,console,output
Figured it out, it was the fact that the button was of type submit and not button, so that it would resubmit the page with false information. Thanks for everyone's help!!
Related
I am pulling my hair out here. I have checked several other posts that were related to issues with POST and AJAX, but none I found were helpful. I cannot figure out why this is not working.
I keep getting the error:
Uncaught TypeError: Cannot read property 'value' of null
at loginRequest (loginRequest.js:3)
at HTMLButtonElement.onclick (main.html:325)
Here is the form on the ".html" page (minus my class calls):
<form id="loginform">
<div>
<label for="login_userid"><b>Username</b></label>
<input id="login_userid" type="text" placeholder="Enter Username" name=login_userid"
autocomplete="username" required>
<label for="login_psw"><b>Password</b></label>
<input id="login_psw" type="password" placeholder="Enter Password" name="login_psw"
autocomplete="current-password" required>
<button onclick="loginRequest()">Login</button>
</div>
Then here is the ".js: file, which I am declaring in the head of the ".html" file:
function loginRequest() {
{
var login_userId = document.getElementById('login_userId').value;
var login_ps = document.getElementById('login_psw').value;
const bcrypt = dcodeIO.bcrypt;
var login_psw = bcrypt.hashSync(login_psw, 12);
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "login_userId=" + login_userId + "&login_psw=" + login_psw;
xhr.open("POST", "https://dfs-coach.com/assets/php/login.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = display_data;
function display_data() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//alert(xhr.responseText);
document.getElementById("login_result").innerHTML = xhr.responseText;
} else {
alert('There was a problem with the request.');
}
}
}
}
}
Note: bcrypt.js is also declared in head, after loginrequest.js.
The '#login_result' element is at the top of the html page (login form opens in a modal)
I cannot figure out where my screw up is with this one.. I know it is going to be something I did, i.e., a syntax error, scope issue,. etc... but I cannot find it.
The error returns that the username is null, which is difficult to believe since A: I type it in before hitting the button to trigger the function, and B: it is a required field, so I cannot hit the button if it is not filled.
However, I get that TypeError from above and then the browser tacks the correct info onto the end of the current URL in plain text and it appears in my address bar. This happens both locally and from an active web server.
The Dev Panel shows this as an "Info" entry:
Navigated to
https://www.dfs-coach.com/main.html?login_userid=MyUsernm&login_psw=PwformyUser
(Info typed into form: 'MyUsern' and 'PwformyUser')
Feel free to see the live demo of this error: https://dfs-coach.com/main.html
I would appreciate any help at all on this one.
Thanks
P.S.: I have also tried using both '.innerHTML' and innerText' instead of 'value' on the Dom elements, and also sending the form data as FormData and json. All to no avail.
There two issues which can easily be fixed I found in the code snippet in the question:
1.
In the 1st line of the function you tried to find an element by the id: login_userId, however the element is named login_userid in the HTML code, Make sure that the capitalization is the same otherwise document.getElementById won't find the correct element
2.
Another small mistake in the 4th line of the code where you try to hash login_psw bcrypt.hashSync(login_psw, 12); however that variable does not exist yet. I believe what you are trying to do is hash the login_ps variable made a couple lines earlier
I also suggest you to put the function immediately after the xhr.onreadystatechange
Code that should work:
<body>
<script src="https://cdn.jsdelivr.net/npm/bcryptjs#2.4.3/dist/bcrypt.min.js"></script>
<div id="loginform">
<div>
<label for="login_userid"><b>Username</b></label>
<input id="login_userid" type="text" placeholder="Enter Username" name=login_userid"
autocomplete="username" required>
<label for="login_psw"><b>Password</b></label>
<input id="login_psw" type="password" placeholder="Enter Password" name="login_psw"
autocomplete="current-password" required>
<button onclick="loginRequest()">Login</button>
</div>
</div>
</body>
<script>
function loginRequest() {
{
var login_userId = document.getElementById('login_userid').value;
var login_ps = document.getElementById('login_psw').value;
const bcrypt = dcodeIO.bcrypt;
var login_psw = bcrypt.hashSync(login_ps, 12);
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data = "login_userId=" + login_userId + "&login_psw=" + login_psw;
xhr.open("POST", "https://dfs-coach.com/assets/php/login.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = function display_data() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert(xhr.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
}
}
</script>
I've made various attempts to load XML from external servers, but without success.
The first example loads the XML perfectly when I have the XML document on my server, but not when I try loading the same XML from the external server.
The second example is loading XML from on an external server, but the data that loads on my page doesn't resemble XML.
Am I missing something in my XMLHttpRequest, or is this the Cross Origin problem?
EDIT: The second example was solved by changing responseText to responseXML, however the first example already has responseXML and yet it doesn't work. Why won't the first example function in the same manner as the second example?
first example
var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("myButton").click();
}
});
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET","https://www.w3schools.com/xml/books.xml", true);
xhttp.send();
}
function myFunction(xhttp) {
var a = n.value;
var xmlDoc = xhttp.responseXML;
const { value } = search;
const foundState = [...xmlDoc.querySelectorAll('title')].find(possibleMatch => possibleMatch.textContent === value);
const unit = foundState.parentElement;
console.log(unit.innerHTML);
document.getElementById("titleNode").innerHTML = unit.children[0].textContent;
document.getElementById("authorNode").innerHTML = unit.children[1].textContent;
document.getElementById("yearNode").innerHTML = unit.children[2].textContent;
}
<input type="text" name="search" id="search" placeholder="type 'r'" list="searchresults" autocomplete="off" />
<datalist id="searchresults">
<option value="Everyday Italian">001</option>
<option value="XQuery Kick Start">010</option>
<option value="Learning XML">110</option>
<option value="Harry Potter">101</option>
</datalist>
<button id="myButton" type="button"
onclick="loadDoc('https://www.w3schools.com/xml/books.xml', myFunction)">Submit
</button>
<p>Title node: <span id="titleNode"></span></p>
<p>Author node: <span id="authorNode"></span></p>
<p>Year node: <span id="yearNode"></span></p>
second example
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", "https://data.cityofnewyork.us/api/views/kku6-nxdu/rows.xml", true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("demo").innerHTML =
xhttp.responseXML;
}
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button"
onclick="loadDoc('ajax_info.txt', myFunction)">Change Content
</button>
</div>
Your hunch is correct, this is the Same-Origin Policy in action! Some servers are set up to allow Cross-Origin Resource Sharing (CORS), but that is pretty rare. If you would like to set up one of your websites/servers to allow another Ajax request access, you can follow this MDN guide.
Edit: Scott Marcus is correct about your code.
About your second question:
I ran your code and got this error in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.w3schools.com/xml/books.xml. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
w3schools does not have CORS enabled.
Take a look at this thread and the links posted there to find a way to circuimvent the Same Origin Policy.
I have added a submit button to the index.html page that resides on my server side
<form method="get" action="/start">
<h5>Start Ad-Placer!</h5>
<input type="submit" value="Start">
</form>
I need the button to simply send a http request to http://127.0.0.1:8484/get/start to start some process. Then once the process is done after a few seconds, I need to simply display an alert message with the response message, acknowledging it is done.
How can I do that with minimum efforts (without using JQuery or other libraries).
If you try something like this you can send a HTTP request and then alert a response. Just change https://google.com to your URL.
<h5>Start Ad-Placer!</h5>
<input type="submit" value="Start" onclick="submit()">
<script type="text/javascript">
function submit() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
alert(xhr.response);
}
}
xhr.open('get', 'https://google.com', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}
</script>
I wrote a small form to log-in into my website :
<form id="log_form" onsubmit='return loginjs()' method="post">
<input type='text' placeholder="login" size='30' name='login' class='test'/>
<input type='password' placeholder="password" name='password' size='30'/>
<input type='submit' value='Connect' id='signin' />
</form>
and I wrote this Javascript function to send the form's data to a php page which going to check if everything is ok and make the session up.
function loginjs() {
'use strict';
var form = document.getElementById('log_form');
var btn = document.getElementById('signin');
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState === XMLHttpRequest.DONE) {
if(request.status === 200) {
if (request.responseText != 'ok')
alert(request.responseText);
}
}
}
var post = "login=" + form.login.value + "&password=" + form.password.value;
request.open('POST', 'functions/func_login.php');
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(post);
location.reload();
};
My function is perfectly called each time I press ENTER or click on Submit, but sometimes the alert doesn't show up and the location.reload(); aren't called.
I don't have any error in my console... and if I manually reload the page, i'm logged so my ajax was sent.
I'm looking for 2 days to find the bug, and doesn't succeed to find. Could someone help me?
I can't use jQuery or another library I've to use JS Vanilla :)
Thank you
Try moving the location.reload(); code in the success block of the ajax, i.e. reload the page after the ajax response is received (if no error is received).
I am developing a web page and the purpose is to perform an http POST from form input elements, in JSON format. While the JSON element to be sent is formed properly, the request is never performed. Here is the code I have been using.
Form
<form id="input" action="javascript:snifForm()" >
User ID:
<input type="text" name="userId" id="userId" required>
Name:
<input type="text" name="name" id="name" required>
<div class="form-submit"><input type="submit" value="Submit" color="#ffffff" > </div></p>
</form>
Javascript (JSON.js, JSONRequest.js and JSONRequestError.js are imported)
<script type="text/javascript">
var requestNumber;
function snifForm()
{
var a1=document.getElementById("userId").value;
var a2=document.getElementById("name").value;
var toSend= {interactions: {id_user:a1, id_name:a2}};
var jToSend=JSON.stringify(toSend);
requestNumber = JSONRequest.post(
"http://someurl.com",
jToSend,
function (requestNumber, value, exception) {
if (value) {
processResponse(value);
alert(value);
} else {
processError(exception);
}
}
);
alert(requestNumber);
}
</script>
I also tried the more classic form:
var xmlhttp = new XMLHttpRequest();
var out;
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
out = xmlhttp.responseText;
alert(out);
}
else alert('nothing');
}
xmlhttp.open("POST", "the_same_url", true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(jToSend);
After checking the server logs, no post is done ever :/
You should be attaching the event to the submit action of the form and you need to make sure to cancel the submit action.
I would not add the events directly to the form, but it is
<form id="input" onsubmit="snifForm(); return false;">