I have an html form (see code below) with an ajax button. I would like to send the form parameters via AJAX post.
My problem is that I’m not sure how can I target the value of the HTML form fields (the value that the user inserted).
How do I send the HTML parameters via ajax post using JavaScript?
FYI: I do not want to use formData.
Here is the code:
<body>
<form id="my-form-id" method="post" action="Calendar_form3.php">
Year:<INPUT NAME="gregorian_year" SIZE=4 MAXLENGTH=4 value="2016">(1-6000)
Latitude: <INPUT NAME="latitude" value="40.7127">
Longitude: <INPUT NAME="longitude" value="-74.0059">
<button id="ajax-button" type="button">Ajax button</button>
</form>
<script>
function displayCalendar() {
var divtarget = document.getElementById("main");
var xhr = new XMLHttpRequest();
xhr.open('post', 'Calendar_form3.php', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
console.log('readyState: ' + xhr.readyState);
if (xhr.readyState == 2) {
divtarget.innerHTML = 'LOADING';
}
if (xhr.readyState == 4 && xhr.status == 200) {
var text = xhr.responseText;
divtarget.innerHTML = text;
}
}
xhr.send(gregorian_year=???&latitude=???&longitude=???);
}
var button = document.getElementById("ajax-button");
button.addEventListener("click", displayCalendar);
</script>
<div id='main'>
result here
</div>
</body>
And here is the code in page Calendar_form3.php:
<?php
echo "ajax working!!";
echo $_POST['gregorian_year'] . $_POST['latitude']. $_POST['longitude'];
?>
How can i complete this code line:
xhr.send(gregorian_year=???&latitude=???&longitude=???);
In other words, given my HTML form, how do I send the html parameters via AJAX post using JavaScript ?
First of all, use getElementsByName() DOM method to get the gregorian_year, latitude and longitude field values, like this:
var gregorian_year = document.getElementsByName("gregorian_year")[0].value;
var latitude = document.getElementsByName("latitude")[0].value;
var longitude = document.getElementsByName("longitude")[0].value;
And then use these variables in AJAX's send() method, like this:
xhr.send("gregorian_year="+gregorian_year+'&latitude='+latitude+'&longitude='+longitude);
function displayCalendar() {
var divtarget = document.getElementById("main");
var xhr = new XMLHttpRequest();
//Get Input Values
var lon = document.getElementsByName('longitude')[0].value;
var lat = document.getElementsByName('latitude')[0].value;
var ger = document.getElementsByName('gregorian_year')[0].value;
//make the params string
var params = "latitude=" + lat + "&longitude=" + lon + "&gregorian_year=" + ger;
//Initialize as POST
xhr.open("POST", 'Calendar_form3.php', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
console.log('readyState: ' + xhr.readyState);
if (xhr.readyState == 2) {
divtarget.innerHTML = 'LOADING';
}
if (xhr.readyState == 4 && xhr.status == 200) {
var text = xhr.responseText;
divtarget.innerHTML = text;
}
}
//Send
xhr.send(params);
}