CODEWITHSUNDEEP
javascriptjqueryajax
softwareplay
softwareplay

Reputation: 1409

Jquery ajax call click event submit button

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.

Upvotes: 12

Views: 133024

Answers (1)

Awlad Liton
Awlad Liton

Reputation: 9351

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>

Upvotes: 17

Related Questions