Question posted in
You can find the official documentation here.

$.ajax not working when used in ("click") event listener – Jquery ajax

This is my Javascript code:

const checkbox = document.querySelector("#checkbox");
const button = document.querySelector("#button");

button.addEventListener("click", function(e){
    var text = "";
    if(checkbox.checked === true){
        text = "Is Checked";
    }

    $.ajax({
        url: '/update_if_checked/',
        data: {'is_checked': text},
        type: 'POST'
     }).done(function(response){
       console.log(response);
     });

});

I am getting an error which says $.ajax is not a function at HTMLButtonElement.

Here, checkbox is an input of type checkbox and when the button whose id is "button" is clicked, I want to send the data i.e. if the checkbox is checked to the Django Server.

I have imported this version of jquery in HTML:

<script src="https://code.jquery.com/jquery-3.1.1.min.js">

EDIT

Sorry about the id of the button that’s button only.

HTML:

<div>Check<input type="checkbox" id="checkbox"></div>
<button id="button">Submit</button>
Tags:

4

Answers


  1. 0

    Your html elements has two similar ids

    <div>Check<input type="checkbox" id="**checkbox**"></div>
<button id="**checkbox**">Submit</button>

    Change one to checkboxinput and the other to checkboxbutton

    Login or Signup to reply.
  2. 0

    Try this maybie:

    $(document).ready(function () {
     //Try to add your event listener here
}
    Login or Signup to reply.
  3. 0

    Simply using your code works fine. Make sure to include jQuery BEFORE your regular JS code. Tried in JSFiddle and do not get any $.ajax() errors besides CORS, of course, because we do not have access to the path (URL for AJAX call).

    const checkbox = document.querySelector("#checkbox");
const button = document.querySelector("#button");

button.addEventListener("click", function(e){
    var text = "";
    if(checkbox.checked === true){
        text = "Is Checked";
    }

    $.ajax({
        url: '/update_if_checked/',
        data: {'is_checked': text},
        type: 'POST'
     }).done(function(response){
       console.log(response);
     });

});
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Check<input type="checkbox" id="checkbox"></div>
<button id="button">Submit</button>
    Login or Signup to reply.
  4. 0

    First of all in your html code, both of the elements i.e. the checkbox and the button have same id. Make it different.

    <div>Check<input id="checkbox" type="checkbox"></div>
<button id="button">Click</button>

    The script part, I have written it using jquery.

    <script>
  $(document).ready(function(){
     $("#button").click(function(){
        var text = "";
        if($("#checkbox").is(":checked")){
            text = "Is Checked";
        }
        $.ajax({
          type: 'POST',
          url: '/update_if_checked/',
          contentType: 'application/json',
          data: JSON.stringify({"is_checked": text}),
          success: function(response){
             console.log(response);
          },
          error: function(error){
             console.log(error);
          }
        }).done(function(response){
            console.log(response);
        });
     });
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search