Question

I wish to use forms to input data to an e-commerce cart I use, but wish to do this without the page refreshing after the user clicks the ‘add to cart’ button from the form. I have found many examples of submitting a form without a page refresh using jquery eg:
Submit A Form Without Page Refresh using jQuery
however have been unable to get this to work despite trying a few different solutions.

My form:

<form method="POST" id="formname">
<input name="userid" id="userid" value="00000000" type="hidden">
<input name="product" id="product" value="product name" type="hidden">
<input name="price" id="price" value="1.00" type="hidden">
<input name="qty" id="qty" value="1" type="hidden">
<input name="nocart" id="nocart" value="1" type="hidden">
<input name="units" id="units" value="1" type="hidden">
<input name="scode" id="scode" value="xxxx" type="hidden">
<input name="hash" id="hash" value="xxxxxxxx" type="hidden">
<input name="return" id="return" value="http://www.returnaddresshere" type="hidden">
<input type="submit" value="Add to cart">
</form>

and the script:

<script src="jquerylocation.js"></script>
<script>
$(document).ready(function(){
$("form#formname").submit(function(event) {
    event.preventDefault();
    var userid = $("#userid").val();
    var product = $("#product").val();
    var price = $("#price").val();
    var qty = $("#qty").val();
    var nocart = $("#nocart").val();
    var units = $("#units").val();
    var scode = $("#scode").val();
    var hash = $("#hash").val();
    var return = $("#return").val();

    $.ajax({
        type: "POST",
        url: "http://ww#.aitsafe.com/cf/add.cfm",
        data: "userid=" + userid + "&product=" + product "price=" + price + "&qty=" + qty "nocart=" + nocart + "&units=" + units "scode=" + scode + "&hash=" + hash + "&return=" + return,
        success: function(){alert('order added to cart');}
    });
});
});
</script>

I am not sure where the problem lies as I’m very new to javascript and jquery. All the examples I have seen use php as well to handle the input from the forms; would the fact that the e-commerce uses coldfusion require a different approach?

Thank you in advance your help.

Answer 1

url: "http://ww#.aitsafe.com/cf/add.cfm", is the culprit here
You cannot send an Ajax Request to another domain than the other on which your application is deployed. This is because of the Same Origin Policy implemented in web-browers — a security measure.