Testing AJAX?

[lurtnowski]

I have a form and am trying to submit it using AJAX and ran into a little snag
Heres the form

<form id="type">
<input type="text" class="form-control" name="Type" placeholder="Type add." required maxlength="50" idx="type_to_add">
<button class="btn btn-outline-secondary" type="submit"><span class="icon-plus"></span></button>
</form>

But when I press submit I get an error

Heres the script

<script>
document.getElementById('type').addEventListener('submit', insertType);
function insertType(e) {
	e.preventDefault();
	var type = document.getElementById('type_to_add').value;
	var xhr = new XMLLHttpRequest();
	xhr.openn("GET","insert_type.php?Type="+type, true);
	
	xhr.onload = function() {
		console.log('Submitted');
	}
	
	xhr.send();
}
	
	
</script>
the error points to the type variable, but I dont see how it can be null

[John_Betong]

@lurtnowski

document.getElementById('type').addEventListener('submit', insertType);

Try this:

document.getElementById('type').addEventListener('submit', insertType(parameter) );

From where did you copy the script?

[Paul_Wilkins]

Here’s the line being complained about:

	var type = document.getElementById('type_to_add').value;

The complaint is because document.getElementById('type_to_add') is null.
That is null because no element with an id of ‘type_to_add’ can be found.

Looking at the HTML code, I see that you have what might be a mis-named attributed called idx instead of id.

<input type="text" class="form-control" name="Type" placeholder="Type add." required maxlength="50" idx="type_to_add">

I would rename idx to id, and see how things go from there.

[lurtnowski]

man, had a bunch of typos (not wearing my glasses betrayed me)
Got it working now

Im trying to insert the input into a mysql table
I thought that is what this part did

document.getElementById('type').addEventListener('submit', insertType);
function insertType(e) {
	e.preventDefault();
	var type = document.getElementById('type_to_add').value;
	var xhr = new XMLHttpRequest();
	xhr.open("GET","insert_type.php?Type="+type, true);
	
	xhr.onload = function() {
		console.log('Submitted');
	}
	
	xhr.send();
}
	

the insert_type.php didn’t work?

[Paul_Wilkins]

@lurtnowski

the insert_type.php didn’t work?

Does the network panel show the get request being sent?

[lurtnowski]

Yes, when I open up the network tab, I can see it went through

[m3g4p0p]

@lurtnowski

xhr.open("GET","insert_type.php?Type="+type, true);

We’d have to see the PHP code then… but for a start, are you sure inserting an item should be a GET request?

[lurtnowski]

I really wasn’t sure if I should use GET or POST
, I thought the opnly difference was using GET would put it in the url and POST did not, is that not the cas e?
heres the php file

<?php
if(isset($_GET['Type'] {
//$Type = $_GET['Type'];
//$sql = "INSERT INTO furniture_types (name) VALUES ('".$Type."')";
//mysqli_query($conn, $sql);
$stmt = $mysqli->prepare("INSERT INTO furniture_types (name) VALUES (?)");
$stmt->bind_param("s", $_GET['Type']);
$stmt->execute();
$stmt->close();	  
}
?>

[m_hutley]

But if the receiving page is looking for the data in the POST fields, and not the URL… then sending it on the URL will result in it not seeing anything.

You execute your query, but you don’t appear to be checking to see if there were any errors in your query.

What happens if you echo $mysql->error(); after your execute? (Check the Response to your request by looking at the details of that request in your network panel)

[lurtnowski]

I made those changes, but when I submit the form then check out the response I get

It says there is a parse error on line 4, but heres the php page

<?php
if(isset($_POST['Type'] {
//$Type = $_GET['Type'];
//$sql = "INSERT INTO furniture_types (name) VALUES ('".$Type."')";
//mysqli_query($conn, $sql);
$stmt = $mysqli->prepare("INSERT INTO furniture_types (name) VALUES (?)");
$stmt->bind_param("s", $_POST['Type']);
$stmt->execute();
echo $stmt->error();
$stmt->close();	  
}
?>

[m3g4p0p]

@lurtnowski

I really wasn’t sure if I should use GET or POST

If your script inserts into the database, POST or PUT is the way to go; GET requests are always assumed to have no side-effects.

@lurtnowski

It says there is a parse error on line 4, but heres the php page

You’re missing the closing parenthesis after the if condition… are you not using a a text editor that highlights such errors? Basically any proper code editor will recognise at least basic syntax errors – personally I’d suggest VSCode which is free and leaves little to be desired IMHO.

[m_hutley]

@m3g4p0p

parenthesis

ses*

(He’s missing both the if and isset closers.)

[lurtnowski]

thanks, always ddo that for some reason.
So, corrected the error

<?php
if(isset($_POST['Type'])) {

	$stmt = $mysqli->prepare("INSERT INTO furniture_types (name) VALUES (?)");
	$stmt->bind_param("s", $_POST['Type']);
	$stmt->execute();
	echo $stmt->error();
/* 		if(!$stmt->error()) {
			echo "inserted";
		} else {
			echo "not inserted";
		} 
*/
	$stmt->close();	  
}
?>

heres the network tab details

But I noticed the record wasn’t addded even though it looks like there was no error
Is there a way I can test to see iof the query worked?

[m_hutley]

@lurtnowski

But I noticed the record wasn’t addded even though it looks like there was no error
Is there a way I can test to see iof the query worked?

These two statements are self-answering? You checked to see if a record was added, which is how you test if the query worked?

Your last screenshot shows a request to insert_type with no URL parameter. So your code did nothing because your isset returned false.

[Paul_Wilkins]

It might help if we were to see the headers of insert_type.php, instead of the response.

[lurtnowski]

heres the headers,

I’m trying to echo out the query to see what is wrong?

[Paul_Wilkins]

You will need to scroll down so that we can see the post headers that were sent to the server.

[lurtnowski]

this better?

[Paul_Wilkins]

Thank you.

The request headers show a content length of zero. That combined with the general request method being POST, indicates something odd is happening. Because, the JavaScript code uses GET instead.

xhr.open("GET","insert_type.php?Type="+type, true);

Doesn’t seem to match this header output:

Request Method: POST
...
Content Length: 0

It seems that something else made that POST request, instead. The GET request from the JavaScript code is not what you are looking at in the headers there.

[lurtnowski]

checked the source of the page and have

xhr.open("POST","insert_type.php", true);

in the script

think I stumbled onto something, when I submit the form, check the response, I see

and heres my php page

<?php
echo "form submitted";
if(isset($_POST['Type'])) {

	echo $_POST['Type'];
	
	$stmt = $mysqli->prepare("INSERT INTO furniture_types (name) VALUES (?)");
	$stmt->bind_param("s", $_POST['Type']);
	$stmt->execute();
	echo $stmt->error();
/* 		if(!$stmt->error()) {
			echo "inserted";
		} else {
			echo "not inserted";
		} 
*/
	$stmt->close();	  
}
?>

does that tell you anything?