CODEWITHSUNDEEP
javascriptjquery
Jack022
Jack022

Reputation: 1257

Jquery POST request not being sent

I have the following code:

<script>
$(document).ready(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'><button name='button' class='btn btn-danger btn-sm f-14 mr-1' type='submit'>Set</button></form>",
        showCloseButton: false,
        showCancelButton: false,
        focusConfirm: false,
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Go forward',
    });
});
</script>

When the page is loaded, this code will show a panel with a form on it. On this panel there is a simple form which will send a POST request. This code works, the POST request is sent without any problem.

The problem is, though, that the same code with just a simple edit, doesn't work:

<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'><button name='button' class='btn btn-danger btn-sm f-14 mr-1' type='submit'>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>

In this case, the panel is not shown on page load, but after a button is hit. In this case, when i try to submit the form, the POST request is not sent and the page refreshes, i've checked the console and no error shows up there. Can someone help me find what i'm doing wrong?

Upvotes: 0

Views: 39

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Set your button type as type="button"

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

Upvotes: 2

Related Questions