Jquery ajax call click event submit button

Question

I've built an ajax call that's submitted when a user clicks the submit button. I've included jquery and wrote the following code (taken from the jquery documentation):

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
  $("Shareitem").click(function(e){
      e.preventDefault();
    $.ajax({type: "POST",
            url: "/imball-reagens/public/shareitem",
            data: { id: $("Shareitem").val(), access_token: $("access_token").val() },
            success:function(result){
      $("sharelink").html(result);
    }});
  });
});
</script>

Html:

<div id="sharelink"></div>
[...]
<input type="hidden" name="id" value="" id="id"></dd>
<dd id="access_token-element">
<input type="hidden" name="access_token" value="xxxxxxxx" id="access_token"></dd>
<dt id="Shareitem-label">&#160;</dt><dd id="Shareitem-element">
<input type="submit" name="Shareitem" id="Shareitem" value="UpdatedByPreviousAjaxCall"></dd></dl></form>

The problem is, the submit action is executed but the ajax call is not, so the form is performing the requested submit action instead of staying on the same page and updating the content of the div tag.

What am I missing? Where am I wrong? Thanks in advance for any tips.

Answer 1

You did not add # before id of the button. You do not have right selector in your jquery code. So jquery is never execute in your button click. its submitted your form directly not passing any ajax request.

See documentation: http://api.jquery.com/category/selectors/
its your friend.

Try this:

It seems that id: $("#Shareitem").val() is wrong if you want to pass the value of

<input type="hidden" name="id" value="" id="id">

you need to change this line:

id: $("#Shareitem").val()

by

id: $("#id").val()

All together:

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#Shareitem").click(function(e){
          e.preventDefault();
        $.ajax({type: "POST",
                url: "/imball-reagens/public/shareitem",
                data: { id: $("#Shareitem").val(), access_token: $("#access_token").val() },
                success:function(result){
          $("#sharelink").html(result);
        }});
      });
    });
    </script>