I am trying to get this ajax method to work but, for some reason my success function will not execute and I can not retrive informtion from my server. If any one could tell me what I am doing wrong I would apperciate it. My code is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery3_2_1.js" type="text/javascript"></script>
<script src="Test.js" type="text/javascript"></script>
</head>
<body>
<form class="ajax">
<input type="hidden" name="Item" value="Chicken">
<input type="hidden" name="Price" value="2.99">
<input type="hidden" name="Qty" value="5">
<button type="submit">ADD TO CART</button>
</form>
<div id="response1"></div>
</body>
</html>
my server code is here:
<?php
//UpdateCart.php
echo "This is a test.";
?>
here is my jquery:
$(document).ready(function(){
$('form.ajax').submit(function(){
alert('Trigger');
$.ajax({
type: "post",
url: "UpdateCart.php",
dataType: "text",
success: function(response){
$('#response1').html('reponse variable equals: '+response);
},
error:function(){
$('#response1').html('in error function');
}
});//end ajax function
});//end submit function
});//end ready function
When I run the code, the error function is always executed and I never reach the success function block of code. I tried changing the dataType to html but, that does not work. I replaced the submit function with the on function and used the submit parameter and I still can not execute any code in my success function. However, when I remove code that listens to the submit event, I am able to reach my success function. But, I do not want this behaviour from my program. I want to be able to control the request to the server with the submit event. I do not get back any errors from the error function nor do I see anything when I check the network tag in my browser's developer console. I even tried looking into apache's access and error logs but, I do not see any errors or any sign of my code communicating. Any suggestions?
p.s. Thanks for all the suggestions. Just to clarify, here are the first things that I tried. I checked the traffic transmitted between the server and my browser and I am not seeing the requested information being returned from my server. I suspect the the ajax method is not sending the request in the first place however, the request is being made. I copied and pasted my uniform request identifier from one code to the next so, I know that it is correct. I took out the action attribute because my application was making the call to the server using the uniform request locator provided by the code in the html and not the url provided by the property in the ajax method. I even went so far as to check apache's access and error logs to see if I could see any http errors that might have been made but, there was no indication of any traffic between my browser and my server. I have tried to use the "event.preventDefault();" but that did not work either. I used the function in the code block that has the submit event listener; I placed it at the end of the code block and it still does not work. I am baffled and do not know what I am doing wrong.
