Javascript/JQuery POST "url" undefined (undefined)

Question

I've attached an onlcick event to a form's submit button to override the default POST request, but I'm having some trouble getting it to work.

What I want is for the item clicked to add to the shopping cart, but only show a modal confirmation and not refresh the page.

This code was working in my static example but something I've done since integrating it has made it break.

function cartSubmit(addbtn)
{
var form = addbtn.parentNode.parentNode.parentNode; 
var formData = jQuery(form).serializeArray();
jQuery.post("/myurl/", formData, function(r){
jQuery.colorbox({html:'<div style="padding:10px;"><h2>Product added to cart.</h2></div>'});        
 });
 return false;
}

Now I get an error in console saying POST "http://localhost/myurl/" undefined (undefined) then the form submits normally (refreshes the page), but seems also to submit with the javascript because it adds the item to the cart twice.

Anyway, any help is greatly appreciated!

A similar (not exact duplicate) question was asked and answered here : http://stackoverflow.com/questions/3303874/jquery-form-not-submitting-with-id-submit-but-will-submit-with-a-submi/3303917#3303917 — NateDSaint, May 03 '11 at 19:05

ryanmarc · Accepted Answer · 2011-05-05T22:00:53.317

2

You could try binding that function to the form through the submit event, for example, assuming your form has an id of myform add the following into your document ready, and you wont need the onclick attribute of your submit button anymore:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
    <form id="someform-123" method="post">
      <input type="text" id="field1" />
      <input type="submit" class="add_to_cart" value="Add" />
    </form>
    <hr>
    <form id="someform-789" method="post">
      <input type="text" id="field2" />
      <input type="submit" class="add_to_cart" value="Add" />
    </form>

    <script type="text/javascript">
      $('.add_to_cart').closest('form').submit(function(e) {
        e.preventDefault();
        alert('form id: ' + $(this).closest('form').attr('id'));
      });
    </script>
  </body>
</html>

edited May 05 '11 at 22:00

answered May 03 '11 at 17:54

ryanmarc

1,670
1
10
9

you need to add a }) to the end of line 6 of your code example. I would edit it for you but I don't have enough rep. – NateDSaint May 03 '11 at 19:06
Thanks, added. They got lost in my copy / paste. – ryanmarc May 03 '11 at 19:19
Thanks for the replies! That's exactly what I was doing when I was testing the code at first. The problem is though that the form is dynamically generated as "add-to-cart-##" (the ## are the number of the product or an id of some sort) How would I attach it in this case? – Ian Bullock May 05 '11 at 19:16
For a quick example, i've edited my answer to some basic html with two forms. When you submit either form it will alert the id of the form that holds the button clicked. Using a similar technique, you should be able to replace the code inside the click event function and have it do your ajax post rather than an alert. – ryanmarc May 05 '11 at 22:03

score 0 · Answer 2 · answered May 10 '11 at 21:57

I was having the same issue, an aborted AJAX request. I've fixed it using a return false on my button. If you have (for example):

<form method="post" action="">
Name: <input type="text" name="whatever" id="whatever" />
<input type="submit" id="join" value="Join" />
</form>

And

$("#join").click(function(){
  $.ajax({
    url: 'whatever.php',
    type: 'POST',
    data: 'name=' + $("#join").val(),
    success: function(r){ alert(r); }
  });
});

That will have the ABORT on whatever.php To fix it, cancel the submission of the form, adding a return on the button:

$("#join").click(function(){
  $.ajax({
    url: 'whatever.php',
    type: 'POST',
    data: 'name=' + $("#join").val(),
    success: function(r){ alert(r); }
  });
  return false;
});

Javascript/JQuery POST "url" undefined (undefined)

2 Answers2