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>

add an input type='submit' to your form, instead of the 'a' tag so that event handler for 'submit' gets executed. — Todd
– Todd, Commented Dec 12, 2014 at 17:58
is that correct? If so I'll put it in answer form so you can accept it. — Todd
– Todd, Commented Dec 12, 2014 at 18:00
The basic problem is that form.submit() isn't working because the variable form isn't set -- you should be getting an error in the Javascript console from that. — Barmar
– Barmar, Commented Dec 12, 2014 at 18:02
Todd yes please. Confirm it does work. I appreciate that you could find the solution with the question posted rather than complaining without anything constructive like others. — runelynx
– runelynx, Commented Dec 12, 2014 at 18:08

Yoann Augen · Accepted Answer · 2014-12-12 18:16:54Z

2

$(".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.

edited Dec 12, 2014 at 18:16

answered Dec 12, 2014 at 18:05

Yoann Augen

2,0563 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Todd · Accepted Answer · 2014-12-12 18:11:27Z

0

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>

answered Dec 12, 2014 at 18:11

Todd

5,4843 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

Submitting form data with ajax javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related