Nora Nora - 1 month ago 5
Ajax Question

ajax inserting null values into SQL table (POST method)

Im trying to insert data from inputs into an SQL table via an Ajax request.

The Ajax request itself seems to work, but it doesn't get the inputs value before inserting a new line into the SQL table : a new line is indeed added, but all other values are set to default except for the time and date which is correct.

I looked for many tutorials to check I did write my Ajax function properly but all I found were jQuery Ajax tutorials, so I don't really know what I'm doing wrong here.

HTML :

<form method="POST">
value1: <input type="text" name="value1" maxlength="4"> <br>
value2: <input type="text" name="value2" maxlength="4"> <br>
value3: <input type="text" name="value3" maxlength="4"> <br>
</form>
<button onclick="send_ajax()"> Send</button>


Ajax function :

function send_ajax() {
console.log('function clicked');
if (window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
//code for IE6, IE5
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log('data sent');
}
}
xmlhttp.open('POST', 'filled_inputs_test.php', true);
xmlhttp.send();
}


Any idea what I'm doing wrong ?

Note : considering that my php file works perfeclty when called via submit button without using Ajax, I think the problem comes from Ajax not getting my inputs value before calling the php file.

I didn't add the php code because it's quite long, but please let me know if you need to check it

Answer

You're trying to send empty request. Try to change send section to this:

xmlhttp.send(new FormData(document.getElementsByTagName('form')[0]));