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
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');
}
});
});
});
What I have tried:
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 with the server. Any suggestions?
I tried this code and it also does not reach the success function:
my server code is here:
$(document).ready(function(){
$('form.ajax').on('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');
}
});
});
});
I can reach the success function with this code but it does not have the functionality that I want; it has the submit listener removed:
$(document).ready(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');
}
});
});
Submit an article or tip