AJAX confirmation

[phppup]

I am trying to use a form that I found online. It is AMAZINGLY stylish (LOL) and presumably uses an AJAX implementation to integrate its jQuery features.

Now that I've finally gotten most of the features to meet my liking, I want to confirm the transfer of data upon submitting.

I read through the previous post jquery / javascript function return by Digger and realize the asynchronous impossibility of the task.

So am I forced to go on faith now? Is there no way to confirm (from a PHP standpoint) that the data is being sent? 

Is the only way of verifying my progress to create and insert into a table, and then select the data for a viable confirmation?

I was expecting to just run a var_dump to confirm.

Edited February 21 by phppup

[requinix]

What kind of "confirmation" are you trying to get? A popup for the user that they want to submit? A confirmation checkbox included with the form? Something to present to the user after they've submitted the form?

[phppup]

@requinix A confirmation (that will be removed from the script) that tells me that everything in development is working as expected to this this point.

An assurance that if a problem occurs, I can essentially eliminate troubleshooting back to the form bc I'll have confirmed that the data is being sent and therefore development can move forward with confidence.

Then, if, for instance, a table isn't being populated, I can limit my review to the PHP and SQL for bugs.

Edited February 21 by phppup

[maxxd]

If all the code is yours, just have php return the status of the call. If you're interfacing with a third party API, check your developer tool's network tab. You can see the request being sent and chances are the third party sends a response packet. Either way, best bet is to console.log the ajax response.

[phppup]

I suppose I'm used to having the webpage reload/advance when a submit button is clicked.

I'm a bit lost in how my PHP is accessed when the data is submitted.

My "nerve center" of AJAX is

jQuery.ajax({
				url : "myPHPcode.php",
				data : 'userName=' + $("#userName").val() + '&userEmail='
						+ $("#userEmail").val() + '&subject='
						+ $("#subject").val() + '&content=' + $(content).val(),
				type : "POST",
				success : function(data) {  ... do stuff

Is anything missing?

Does it call the PHP file every time the submit button active (with all field valid)?

Since the page doesn't reload, I'm not able to receive a PHP coded response.

My PHP

if(isset($_POST['submit'])){
echo "success"; } else { echo "failed";
}

failed on load and never changes.

 

 

Quote

 

Edited February 22 by phppup

[maxxd]

Yes - ajax will load the specified php script and it will execute. In your sample code, you're not passing a variable named 'submit', so your php code won't run. It's been a bit since I've used jQuery, but it should be a simple case of collecting the data and sending it in the second parameter of the $.post() method from the javascript. The php will receive the data and any output will be returned to the calling script.

[maxxd]

*DELETED*

Edited February 22 by maxxd
missed the point

[phppup]

Changed the PHP to

if(isset($_POST['userName'])){
echo "success"; } else { echo "failed";
}

but still no obvious response.

 

 

[maxxd]

Sorry, I was multitasking and therefor distracted earlier (hence my deleted post). I can give you a quick example using the fetch() api though it's been a while since I've used jquery ajax functions so I couldn't get that working - hopefully this'll still give you a nudge in the right direction.

Unsolicited opinion; it's worth looking into fetch() or axios() if you want to move beyond jquery. I find them both simpler to use and easier to read (especially axios). Having said that, there's nothing wrong with jquery but it's not something I personally have seen used for new development in a while.

html:

<form action="" id="my-form">
  <input type="text" name="test-1" id="test-1">
  <input type="text" name="test-2" id="test-2">
  <input type="submit" value="Click me">
</form>

javascript:

let frm = document.getElementById('my-form');

frm.onsubmit = e => {
  e.preventDefault();
  let dt = new FormData(e.target);
  
  dt.append('new-value', 'test-3');
  
  let ret = fetch('/jstest2-handle.php', {
    method: 'post',
    body: dt
  }).then(d => {
    return d.text();
  }).then(ret => {
    console.log(ret);
  });
}

jtest2-handle.php:

print(json_encode([
	'var1' => 'return1',
	'var2' => 'return2',
	'varPost1' => $_POST['test-1'],
	'varPost2' => $_POST['test-2'],
	'varPost3' => $_POST['new-value']
]));

The console.log() output is this:

{"var1":"return1","var2":"return2","varPost1":"test1","varPost2":"test2","varPost3":"test-3"}

Obviously I put 'test1' into the `test-1` input, and 'test2' into the `test-2` input.

[phppup]

Eureka!! I got it working.

I set up a SELECT statement in PHP to echo a table when the script is called.

The page never refreshed when using the form in AJAX, but when I refresh the page, it displays all entries made to the form by PHP.

I suppose my only lingering question is, within this standard AJAX context

jQuery.ajax({
				url : "myPHPcode.php",
				data : 'userName=' + $("#userName").val() + '&userEmail='
						+ $("#userEmail").val() + '&subject='
						+ $("#subject").val() + '&content=' + $(content).val(),
				type : "POST",
				success : function(data) {  ... do stuff

where the final action is "success," is there a way to get confirmation of success of the PHP code?

In other words, it seems that "success" will blow confetti simply because the JS got that far (regardless of PHP issues), but would it still trigger "success"  if the PHP file failed?

If the PHP was designed to INSERT into a database, and the connection could not be made (therefore triggering an error in PHP/SQL), can a notification of the failure be given?

From what I've experienced, I don't like the one-way street of this Asynchronous method   *humor*

PS: what is the correct way to change my "data" section to a serialized method?

I saw it mentioned, and it seems to offer more flexibility with less keystrokes, but I haven't been able to implement it.

Thanks to everyone for helping.

Edited February 24 by phppup

[maxxd]

The ajax call doesn't interact directly with the php - the only time it'll register a failure is when the call itself fails. So if you call a non-existent endpoint or if the server is down, the ajax call will invoke the error method. If however the php can't find the record or there is an error in your code that doesn't halt the execution of said code, there will still be a successful response from the server and the ajax will treat it as a successful response.

What typically happens is the php script returns a json-encoded array with a 'success' index that indicates whether or not the php function worked. This is what I meant when I said 'just have php return the status of the call' - add a boolean to the return payload that can tell the javascript if the php failed in a manner that didn't cause a server exception.

[phppup]

Quote

 'just have php return the status of the call' - add a boolean to the return payload that can tell the javascript if the php failed in a manner that didn't cause a server exception.

That's a little deeper than I'm currently capable, and I don't really have the time to do the homework.