I'm new in Javascript and i'm trying to make an http request to fetch some data and display the results in html. I'm fetching the results and update the html code, but then the html code inside body reloads and shows the default values. My code is,
<head>
<script>
function httpGetAsync() {
var results = new Array(3);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
xhr.onreadystatechange = processRequest;
function processRequest() {
if (xhr.readyState == 4 && xhr.status == 200) {
// populate here results array
// i change the value with the following line
document.getElementById("title_1").innerText = "fetched_value";
}
}
}
</script>
</head>
<body>
<div class="search_btn">
<form id="search_form" method="get" onSubmit="return httpGetAsync()">
<input type="text" class="search" placeholder="Search" id="search">
<input type="submit" value="search" class="search_button">
</form>
</div>
<div id="one">
<p id="title_1">default</p>
</div>
</body>
The 'title_1' changes its text to 'fetched_value' but it then reloads and becomes 'default' again. What am i doing wrong?
It's because your onSubmit does not receive false. Simply add return false to httpGetAsync end
function httpGetAsync() {
var results = new Array(3);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.addEventListener(
"readystatechange",
function processRequest() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("title_1").innerText = "fetched_value";
}
},
false);
xhr.onreadystatechange = processRequest;
return false;
}
You need to prevent the default action on submit, which is to use the "action" attribute on the form element to reload the page (if it's not present the current page is reloaded).
function httpGetAsync(event) {
event.preventDefault();
...
}
I'm new to Javascript, can I use XMLHttpRequest() after I hit submit from form but the result should be the same as onclick event. I have a function named get and by using XMLHttpRequest() I can add a new object within the div sample, it works if it's a button. The only difference is that I want to add new object to the div sample without redirecting to http://127.0.0.1:5000/get?query=apple after I submit the form, form and function get() should be working together in this case. And also I don't want to see the http://127.0.0.1:5000/get?query=apple in the browser's url field after I submit the form. I need some help, I push myself to use pure js as possible and not to rely on jquery.
<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form action="/get" method="GET">
<input name="query">
<input type="submit">
</form>
<script>
function get(query) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "get?query=" + query, true);
xhttp.send();
};
</script>
This is how you can interrupt submit event, and do whatever you want.
<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form id="form">
<input name="query">
<input type="submit" value="Submit">
</form>
<script>
document.querySelector('#form').addEventListener('submit', function(e){
e.preventDefault();
var query = e.target.elements['query'].value;
get(query);
});
function get(query) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "get?query=" + query, true);
xhttp.send();
};
</script>
function get(query) {
console.log("Called Function");
query = document.getElementById('query').value;
console.log(query);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "get?query=" + query, true);
xhttp.send();
};
<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form id="myForm" action="/get" method="POST">
<input type="text" name="query" id="query">
<input type="button" onclick="get()" value="Submit form">
</form>
You have user Form type method="GET" which changed to method="POST" and added onclick="get()" to call the function from javaScript
I have this function. With xhr.response I get my json values. Question: how do I attach these JSON values to my HTML labels? Thank you.
Unrelevant question: Does anyone know of a good website where beginning JSON concepts are compactly summarized?
For example country to the label country.
function initPage(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://ip-api.com/json", false);
xhr.send();
console.log(xhr.status);
console.log(xhr.statusText);
console.log(xhr);
console.log(xhr.response);
}
JSON Output:
Visit http://ip-api.com/json
Desired HTML:
<label id="landcode"></label>
<label id="country"></label>
<label id="regio"></label>
<label id="city"></label>
<label id="postcode"></label>
<label id="latitude"></label>
<label id="longitude"></label>
<label id="ip"></label>
You are doing XMLHttpRequest() call, you need to check if the status == 200 (2xx Success / 200 OK) and readyState = 4 (DONE):
<button type="button" onclick="initPage()">Change Content</button>
<br>
<label id="country">Before XMLHttpRequest CALL</label>
<script>
function initPage() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("country").innerHTML =
this.responseText;
}
};
xhr.open("GET", "http://ip-api.com/json", false);
xhr.send();
console.log(xhr.status);
console.log(xhr.statusText);
console.log(xhr);
console.log(xhr.response);
}
</script>
I am trying to retrieve date from a form submission to use in a SmartyStreet API request. It's not outputting the response from the API.
HTML:
<div class="form-style-5">
<form id="myForm">
<fieldset>
<legend><span class="number">1</span> Input Address</legend>
<input type="text" id="street" name="street" placeholder="Street">
<input type="text" id="city" name="city" placeholder="City">
<input type="text" id="state" name="state" placeholder="State">
<input type="submit" value="Submit" />
</fieldset>
</form>
<fieldset>
<legend><span class="number">2</span> Results</legend>
<div id='resultBox'>
</div>
</fieldset>
</div>
JS:
AUTH_ID = "123456789";
AUTH_TOKEN = "123456789"
$("myForm").submit(function(event) {
street = $("#street").val()
city = $("#city").val()
state = $("#state").val()
var xhr = new XMLHttpRequest();
xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + AUTH_ID + "&auth-token=" + AUTH_TOKEN, true);
xhr.send();
var addresses = JSON.parse(xhr.responseText);
console.log('Hello')
$( "#resultBox" ).text(addresses).show();
event.preventDefault();
});
Any help is appreciated, I just want to know why it isn't working and if there is a better way. Thanks
You can use the onreadystatechange property to monitor the state of your request,when the state changes the function gets called, when the status of the request is 4 (Completed) and Response status code is 200 (OK), then you change the address text using the returned json data from the response text property. I hope this helps.
$("myForm").submit(function(event) {
event.preventDefault();
street = $("#street").val()
city = $("#city").val()
state = $("#state").val()
var xhr = new XMLHttpRequest();
xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + AUTH_ID + "&auth-token=" + AUTH_TOKEN, true);
xhr.send();
var addresses;
xhr.onreadystatechange = function() {//Call a function when the state changes.
if(xhr.readyState == 4 && xhr.status == 200) {
addresses = JSON.parse(xhr.responseText);
$( "#resultBox" ).text(addresses).show();
console.log('Hello');
}
}
});
Try below code. Use document.ready function
<script>
AUTH_ID = "123456789";
AUTH_TOKEN = "123456789"
$(document).ready(function(){
$("#myForm").submit(function(event) {
street = $("#street").val()
city = $("#city").val()
state = $("#state").val()
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var addresses = JSON.parse(xhr.responseText);
console.log(xhr.responseText)
$( "#resultBox" ).text(addresses).show();
}
};
xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + AUTH_ID + "&auth-token=" + AUTH_TOKEN, true);
xhr.send();
event.preventDefault();
});
});
</script>
I'm working with a form for which the mark-up I can't change & can't use jQuery.
Currently the form post the results to a new window. Is it possible to change this to an ajax form so that the results displays on submit instead without altering any mark-up?
Pulling the results (mark-up) from the results page back to the form page.
Here is the mark-up for the form.
<form class="form-poll" id="poll-1225962377536" action="/cs/Satellite" target="_blank">
<div class="form-item">
<fieldset class="form-radio-group">
<legend><span class="legend-text">What mobile phone is the best?</span></legend>
<div class="form-radio-item">
<input type="radio" class="radio" value="1225962377541" name="option" id="form-item-1225962377541">
<label class="radio" for="form-item-1225962377541">
<span class="label-text">iPhone</span>
</label>
</div><!-- // .form-radio-item -->
<div class="form-radio-item">
<input type="radio" class="radio" value="1225962377542" name="option" id="form-item-1225962377542">
<label class="radio" for="form-item-1225962377542">
<span class="label-text">Android</span>
</label>
</div><!-- // .form-radio-item -->
<div class="form-radio-item">
<input type="radio" class="radio" value="1225962377543" name="option" id="form-item-1225962377543">
<label class="radio" for="form-item-1225962377543">
<span class="label-text">Symbian</span>
</label>
</div><!-- // .form-radio-item -->
<div class="form-radio-item">
<input type="radio" class="radio" value="1225962377544" name="option" id="form-item-1225962377544">
<label class="radio" for="form-item-1225962377544">
<span class="label-text">Other</span>
</label>
</div><!-- // .form-radio-item -->
</fieldset>
</div><!-- // .form-item -->
<div class="form-item form-item-submit">
<button class="button-submit" type="submit"><span>Vote now</span></button>
</div><!-- // .form-item -->
<input type="hidden" name="c" value="News_Poll">
<input type="hidden" class="pollId" name="cid" value="1225962377536">
<input type="hidden" name="pagename" value="Foundation/News_Poll/saveResult">
<input type="hidden" name="site" value="themouth">
Any tips/tutorial is much appreciated. :)
The following is a far more elegant solution of the other answer, more fit for modern browsers.
My reasoning is that if you need support for older browser you already most likely use a library like jQuery, and thus making this question pointless.
/**
* Takes a form node and sends it over AJAX.
* #param {HTMLFormElement} form - Form node to send
* #param {function} callback - Function to handle onload.
* this variable will be bound correctly.
*/
function ajaxPost (form, callback) {
var url = form.action,
xhr = new XMLHttpRequest();
//This is a bit tricky, [].fn.call(form.elements, ...) allows us to call .fn
//on the form's elements, even though it's not an array. Effectively
//Filtering all of the fields on the form
var params = [].filter.call(form.elements, function(el) {
//Allow only elements that don't have the 'checked' property
//Or those who have it, and it's checked for them.
return typeof(el.checked) === 'undefined' || el.checked;
//Practically, filter out checkboxes/radios which aren't checekd.
})
.filter(function(el) { return !!el.name; }) //Nameless elements die.
.filter(function(el) { return el.disabled; }) //Disabled elements die.
.map(function(el) {
//Map each field into a name=value string, make sure to properly escape!
return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
}).join('&'); //Then join all the strings by &
xhr.open("POST", url);
// Changed from application/x-form-urlencoded to application/x-form-urlencoded
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//.bind ensures that this inside of the function is the XHR object.
xhr.onload = callback.bind(xhr);
//All preperations are clear, send the request!
xhr.send(params);
}
The above is supported in all major browsers, and IE9 and above.
Here's a nifty function I use to do exactly what you're trying to do:
HTML:
<form action="/cs/Satellite">...</form>
<input type="button" value="Vote now" onclick="javascript:AJAXPost(this)">
JS:
function AJAXPost(myself) {
var elem = myself.form.elements;
var url = myself.form.action;
var params = "";
var value;
for (var i = 0; i < elem.length; i++) {
if (elem[i].tagName == "SELECT") {
value = elem[i].options[elem[i].selectedIndex].value;
} else {
value = elem[i].value;
}
params += elem[i].name + "=" + encodeURIComponent(value) + "&";
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST",url,false);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
return xmlhttp.responseText;
}
Nowadays using FormData is the easiest method. You construct it with a reference to the Form element, and it serializes everything for you.
MDN has an example of this here -- roughly:
const form = document.querySelector("#debarcode-form");
form.addEventListener("submit", e => {
e.preventDefault();
const fd = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.addEventListener("load", e => {
console.log(e.target.responseText);
});
xhr.addEventListener("error", e => {
console.log(e);
});
xhr.open("POST", form.action);
xhr.send(fd);
});
and if you want it as an object (JSON):
const obj = {};
[...fd.entries()].forEach(entry => obj[entry[0]] = entry[1]);
Expanding on Madara's answer: I had to make some changes to make it work on Chrome 47.0.2526.80 (not tested on anything else). Hopefully this can save someone some time.
This snippet is a modification of that answer with the following changes:
filter !el.disabled,
check type of input before excluding !checked
Request type to x-www-form-urlencoded
With the following result:
function ajaxSubmit(form, callback) {
var xhr = new XMLHttpRequest();
var params = [].filter.call(form.elements, function (el) {return !(el.type in ['checkbox', 'radio']) || el.checked;})
.filter(function(el) { return !!el.name; }) //Nameless elements die.
.filter(function(el) { return !el.disabled; }) //Disabled elements die.
.map(function(el) {
return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
}).join('&'); //Then join all the strings by &
xhr.open("POST", form.action);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = callback.bind(xhr);
xhr.send(params);
};
The strategy is to serialise the form and send the data using XHR, then do what you want with the response. There is a good set of utilities and help at Matt Krus's Ajax Toolbox and related Javascript Toolbox.
If you are just serialising the form posted, then the following will do the trick. It can easily be extended to include other form control types:
var serialiseForm = (function() {
// Checkboxes that have already been dealt with
var cbNames;
// Return the value of a checkbox group if any are checked
// Otherwise return empty string
function getCheckboxValue(cb) {
var buttons = cb.form[cb.name];
if (buttons.length) {
for (var i=0, iLen=buttons.length; i<iLen; i++) {
if (buttons[i].checked) {
return buttons[i].value;
}
}
} else {
if (buttons.checked) {
return buttons.value;
}
}
return '';
}
return function (form) {
var element, elements = form.elements;
var result = [];
var type;
var value = '';
cbNames = {};
for (var i=0, iLen=elements.length; i<iLen; i++) {
element = elements[i];
type = element.type;
// Only named, enabled controls are successful
// Only get radio buttons once
if (element.name && !element.disabled && !(element.name in cbNames)) {
if (type == 'text' || type == 'hidden') {
value = element.value;
} else if (type == 'radio') {
cbNames[element.name] = element.name;
value = getCheckboxValue(element);
}
}
if (value) {
result.push(element.name + '=' + encodeURIComponent(value));
}
value = '';
}
return '?' + result.join('&');
}
}());
A modern way using fetch would be:
const formData = new FormData(form);
fetch(form.action, {
method: 'POST',
body: formData
});
Note browser support and use this polyfil if IE-support is needed
function ajaxSubmit(form, callback) {
var xhr = new XMLHttpRequest();
var params = [].filter.call(form.elements, function (el) {return !(el.type in ['checkbox', 'radio']) || el.checked;})
.filter(function(el) { return !!el.name; }) //Nameless elements die.
.filter(function(el) { return !el.disabled; }) //Disabled elements die.
.map(function(el) {
if (el.type=='checkbox') return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.checked);
else return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
}).join('&'); //Then join all the strings by &
xhr.open("POST", form.action);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = callback.bind(xhr);
xhr.send(params);
};
I just took Coomie's answer above and made it work for Radio/Checkboxes. I can't believe how simple and clear this is. With a few exceptions, I'm done using frameworks.
var params = "";
var form_elements = form.elements;
for (var i = 0; i < form_elements.length; i++)
{
switch(form_elements[i].type)
{
case "select-one":
{
value = form_elements[i].options[form_elements[i].selectedIndex].value;
}break;
case "checkbox":
case "radio":
{
if (!form_elements[i].checked)
{
continue; // we don't want unchecked data
}
value = form_elements[i].value;
}break;
case "text" :
{
value = form_elements[i].value;
}break;
}
params += encodeURIComponent(form_elements[i].name) + "=" + encodeURIComponent(value) + "&";
}
var xhr = new XMLHttpRequest();
xhr.open('POST', "/api/some_url");
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200)
{
console.log("xhr.responseText");
}
else
{
console.log("Error! Status: ", xhr.status, "Text:", xhr.responseText);
}
}
};
console.log(params);
xhr.send(params);
Here's the simplest method I came up with. I haven't found an example that uses this exact approach. The code submits the form using a non-submit type button and places the results into a div, if the form is not valid (not all required fields filled), it will ignore the submit action and the browser itself will show which fields are not filled correctly.
This code only works on modern browsers supporting the "FormData" object.
<script>
function ajaxSubmitForm() {
const form = document.getElementById( "MyForm" );
if (form.reportValidity()) {
const FD = new FormData( form );
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("content_area").innerHTML = this.responseText; } };
xhttp.open("POST","https://example.com/whatever.php",true);
xhttp.send( FD );
}
}
</script>
<div id="content_area">
<form id="MyForm">
<input type="hidden" name="Token" Value="abcdefg">
<input type="text" name="UserName" Value="John Smith" required>
<input type="file" accept="image/jpeg" id="image_uploads" name="ImageUpload" required>
<button type="button" onclick="ajaxSubmitForm()">
</form>
</div>