Jquery button doesn't submit a request

user_10290511 0
Viewed 45

I have the following code:

<script>
$(document).ready(function() {
  $('#manage').click(function() {
      swal({
          title: 'Choose your settings',
          type: 'info',
          html:"<form method='post' id='set'>{% csrf_token %}<input type='text' class='set-pref' placeholder='Enter your preference' name='input_val' id='settings'><button name='button' class='btn btn-danger btn-sm f-14 mr-1' type='button'>Set</button></form>",
          showCloseButton: false,
          showCancelButton: false,
          focusConfirm: false,
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Go forward',
      });
    });
});
</script>

<button name="button" id="manage" type="submit" class="btn btn-danger btn-sm f-14 mr-1">manage</button>

When the button is hit, a panel shows. The problem is that the form inside the panel is not being submitted by the button. When i fill the input field and hit the button, nothing happens. Changing the button to type='submit' won't work either, because it will just refresh the page without submitting anything. I'm sure the problem is inside my previous block of code, but here is how i'm sending the request anyway:

<script>
$(document).ready(function () {
  $("#set").submit(function (event) {

      callAJAX(viewsurl,
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={'settings': $('#settings').val()},

      'post',
       function(data){


       }, null, null );
  return false; 
  });

});

</script>
jquery
1 Answers

Your problem seems that you're dynamically creating a FORM that is still not existent on the page via Laravel's Swal html:.

My suggestion is to dynamically assign your handler using the .on() method:

jQuery(function ($) { // DOM ready and $ alias in scope

  $(document).on('submit', '#set', function (event) {
    event.preventDefault(); // Prevent browser submit form

    callAJAX(
       viewsurl,
       {"X-CSRFToken": getCookie("csrftoken")},
       parameters={'settings': $('#settings').val()},
       'post',
       function(data){
         // joy joy
       },
       null,
       null
     );
  });

});

and make sure to use 

....type='submit'>Set</butt....
user_3839040
Related