I have the following code to send the data via Jquery AJAX and notice that I have three values that need to be sent to the receiving file(Addtocart.php). The transmission and reception were good, but after a while I do not know why it no longer sends.. When one of the values is canceled and two remain, it sends.. but when three values are not sent.
ajax
<script >
$(document).ready(function() {
$("#add-to-card").click(function() {
var quantityq = $("#quantityq").val();
var user = $("#user").val();
var product__id = $("#product__id").val();
$.ajax({
url: 'Addtocart.php',
method: 'POST',
data: {
quantityq: quantityq,
user: user,
product__id: product__id
},
success: function(data) {
$('#result').html(data);
}
});
});
});
</script><input step="1" min="1" max="50" name="quantityq" id="quantityq" value="1" title="Qty" class="input-text qty text" size="4" type="number">
<input type="hidden" name="user" id="user" value="72663">
<input type="hidden" name="product__id" id="product__id" value="4">
</div>
<button type="submit" id="add-to-card" class="btn sqaure_bt fll display-f">send</button>It is not clear what issue you are facing, as you didn't post an example that shows the issue clearly.
But Rather than binding to click event of the button, you should bind to submit event of the form. This way, client-side form validation will work correctly and your JS code will be a lot smaller.
<form id="myForm">
<input step="1" min="1" max="50" name="quantityq" id="quantityq" value="1" title="Qty" class="input-text qty text" size="4" type="number">
<input type="hidden" name="user" id="user" value="72663">
<input type="hidden" name="product__id" id="product__id" value="4">
<button type="submit" id="add-to-card" class="btn sqaure_bt fll display-f">send</button>
</form>
<script>
$(document).ready(function() {
$("#myForm").submit(function(e) {
e.preventDefault();
let postData = $(this).serialize();
$.ajax({
url: 'Addtocart.php',
method: 'POST',
data: postData,
success: function(data) {
$('#result').html(data);
}
});
});
});
</script>