Stop page redirect after submitting the form with jQuery

Question

I have a simple code, and I try to make a post without redirecting the page. So far my code looks like this:

$(function() {
    $('#btn').on('click', '.document', function(e) {
        e.preventDefault();
        $.ajax({
           
            type: 'post',
            url: '/save',
            data: {
                html: '<p>Sucess</p>',
                delay: 1
            },
            dataType: 'html',
           
            success: function(data) {
                console.log('success');
                $('.document').append(data);
            },
     
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <form action="/save" method="post" autocomplete="off" id="theForm">
    
    <button id="btn" type="submit" name="send">
      Send
    </button> 
  </form>
  
  <span class="document"></span>

Can anybody try to help me with this? I don't know why my code doesn't work, I want to be able to POST without reloading and redirecting the page.

Check: https://stackoverflow.com/questions/4038567/prevent-redirect-after-form-is-submitted — Zaid Al Shattle, Jul 02 '21 at 12:56

score 1 · Answer 1 · answered Jul 02 '21 at 12:56

You're attaching a delegated event handler to a span with no content, and the primary selector isn't a parent of that span.

The correct approach would be to attach a submit event handler to the form element instead.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="/save" method="post" autocomplete="off" id="theForm">
  <button id="btn" type="submit" name="send">Send</button>
</form>

<span class="document"></span>

jQuery($ => {
  $('#theForm').on('submit', e => {
    e.preventDefault();

    $.ajax({
      type: 'post',
      url: '/save',
      data: {
        html: '<p>Sucess</p>',
        delay: 1
      },
      dataType: 'html',
      success: function(data) {
        console.log('success');
        $('.document').append(data);
      }
    });
  });
});

Thank you for the code, I try that but it doesn't work, I created fiddle: https://jsfiddle.net/ygakp574/ — Ivan Nukli, Jul 02 '21 at 13:22
Check the console for errors. Is the AJAX request working? Which browser are you testing with? — Rory McCrossan, Jul 02 '21 at 13:28

Stop page redirect after submitting the form with jQuery

1 Answers1