Submitting form data with ajax javascript

Question

I'm having trouble getting an ajax/javascript setup to work to send data async to a PHP script for processing. I'm leaving the PHP part out here because I can't get the javascript to fire yet and will happily attack the PHP myself once I can get this working.

I have below in my ... the nailthumb & colorbox stuff is not part of this scenario, they do other things and I should note that they work fine. It's .ajax-like where this comes into play and where nothing executes. I have tried adding an alert() to troubleshoot but it never fires :( The intention is that when the link that has an onclick() is pressed, magic happens!

Can anyone spot why the javascript isn't firing?

<script type="text/javascript">

            jQuery(document).ready(function() {
                jQuery('.nailthumb-container').nailthumb({width:300,height:140,titleWhen:'load',fitDirection:'center center'});
                $('a.btn-screenshot').colorbox({
                    rel: 'nofollow'
                    });
                $('a.image').colorbox({
                    rel: 'colorbox-group',
                    maxWidth: '75%',
                    scalePhotos: true,
                    titleScrolling: true
                    });

                $(".ajax-like").submit(function(){
                    alert("Initial part going...");
                    var data = {
                      "action": "like"
                      };
                    data = $(this).serialize() + "&" + $.param(data);
                    $.ajax({
                      type: "POST",
                      dataType: "json",
                      url: "galleryajax.php", //Relative or absolute path to response.php file
                      data: data,
                      success: function(data) {
                        alert("Form submitted successfully.\nReturned json: " + data["json"]);
                      }
                      });
                    return false;
                    });
            });
</script>

This is the form in the HTML itself...

<span class="thumb-comment">
            <form class="ajax-like" method="post" accept-charset="utf-8">
              <input type="hidden" name="mcname" value="'.$row['MCName'].'" placeholder="Favorite restaurant" />
              <input type="hidden" name="galleryid" value="'.$row['GalleryID'].'" placeholder="Favorite beverage" />
                <a onclick="form.submit();">
                <i class="fa fa-heart"></i>

                0</a>
                </form>
            </span>

Answer 1

$(".ajax-like").submit()

This actually waiting a submit event on you form .ajax-like.

First, remove this <a> tag.

And to start this event, you need something like a submit input.

<input type="submit" />

If you need to style your input as in your example, you can prefer to use a <button type="submit"><i class="fa fa-heart"></i>0</button> instead of the input.

Answer 2

add an <input type='submit'> to your form, instead of the 'a' tag so that event handler for 'submit' gets executed. You could use a button to include your icon:

<form class="ajax-like" method="post" accept-charset="utf-8">
  <input type="hidden" name="mcname" value="'.$row['MCName'].'" placeholder="Favorite restaurant" />
  <input type="hidden" name="galleryid" value="'.$row['GalleryID'].'" placeholder="Favorite beverage" />
  <button type='submit'>
     <i class="fa fa-heart"></i>
     0
  </button>
</form>