Question posted in
You can find the official documentation here.

Ajax in django form – Jquery ajax

My Ajax request works correctly when I use change and the input is checkbox, but my Ajax request does not work when use input type submit !!

I want my type in the input submit and when I do this the Ajax request will not work and the page will reload.

  $(document).on('change','.filter-form',function(event){
       event.preventDefault();
       $.ajax({
       type:'GET',
       url:'filter/',
       data : $(this).serialize(),
       dataType: 'json',
       success: function (data) {
       $('#product-main').html(data['form']);
       },
       error: function (data) {
       alert("error" + data);
       }
    });
});

my form :

<form action="" class="filter-form">
        <input type="submit" name="price" value="new">
        <input type="submit" name="discount" value="discount">
        <input type="submit" name="old" value="old">
</form>
Tags:

2

Answers


  1. 0

    First added a clicked property to the identify which submit is clicked. Then used the clicked property to get the value & name of the submit to pass in form submit event handler.

    $(document).ready(function(){

    // To identify which submit is clicked.
    $("form.filter-form input[type=submit]").click(function() {
        $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });

    // Form submit event handler
    $("form.filter-form").submit(function(event) {
        event.preventDefault();
        $clickedInput = $("input[type=submit][clicked=true]"); 
        dataString = {[$clickedInput.prop('name')]: $clickedInput.val()};
        console.log('dataString', dataString);

        $.ajax({
           type:'GET',
           url:'filter/',
           data : dataString,
           dataType: 'json',
           success: function (data) {
               $('#product-main').html(data['form']);
           },
           error: function (data) {
               console.log("error" + data);
           }
        });
    });

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="filter-form">
    <input type="submit" name="price" value="new">
    <input type="submit" name="discount" value="discount">
    <input type="submit" name="old" value="old">
</form>
    Login or Signup to reply.
  2. 0

    I don’t think submit buttons trigger the change event, so you’ll have to listen for something else, also .serialize() do not give you the name/value pair of submit buttons.
    Use the click event on the buttons and use the element properties to get the data to post.

    $(document).on('click','.filter-form input[type=submit]',function(event){
   event.preventDefault();
   $.ajax({
     type:'GET',
     url:'filter/',
     data : {[this.name]: this.value}
     dataType: 'json',
     success: function (data) {
       $('#product-main').html(data['form']);
     },
     error: function (data) {
       alert("error" + data);
     }
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search