jquery form submit can't handle success/error notifications-CodePudding

I want to show a success notification if the submit was successful with this js notify library but it's doesn't works.

If I change the new Notify({ ... }) function to a simple alert("success"); then the alert is showing up...

But if I insert the same js code in the browser's Console then it's showing the notify ...

<form action="" method="post">
    <div >
        <label for="title"><h6>Title</h6></label>
        <input type="text"  name="title" id="title">
    </div>
    <div >
        <label for="content"><h6>Content</h6></label>
        <textarea  id="content" name="content"></textarea>
    </div>
    <div >
        <button type="submit"  id="edit">Save</button>
    </div>
</form>
<script>
 $("#edit").click(function() {

     var title = $("#title").val();
     var content = $("#content").val();
     $.ajax({
         type: "POST",
         url: "edit.php",
         data: {
            title: title,
            content: content
         },
         cache: false,
         success: function(data) {
            new Notify({
                status: 'success',
                title: 'Test',
                text: 'Success',
                effect: 'fade',
                speed: 300,
                customClass: null,
                customIcon: null,
                showIcon: true,
                showCloseButton: true,
                autoclose: false,
                autotimeout: 3000,
                gap: 20,
                distance: 20,
                type: 1,
                position: 'right top'
            })
         },
         error: function(xhr, status, error) {
             console.error(xhr);
         }
     });
      
});
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-notify.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-notify.min.js"></script>

CodePudding user response：

This statement in your comment under the question clarifies the issue:

I want to send the form's data then the page is just reloading immadiatelly and the notify doesn't showing up

The issue is because you've not called preventDefault() on the event which is raised. Therefore the form is still submit through the standard manner and a page redirect occurs. As you're using AJAX you need to prevent this behaviour.

Also note that it's slightly more semantic to hook the event handler to the submit event of the form element instead of the click of the submit button. Try this:

$("form").on('submit', e => {
  e.preventDefault(); // stop form submission

  $.ajax({
    type: "POST",
    url: "edit.php",
    data: {
      title: $("#title").val(),
      content: $("#content").val()
    },
    cache: false,
    success: function(data) {
      new Notify({
        status: 'success',
        title: 'Test',
        text: 'Success',
        effect: 'fade',
        speed: 300,
        customClass: null,
        customIcon: null,
        showIcon: true,
        showCloseButton: true,
        autoclose: false,
        autotimeout: 3000,
        gap: 20,
        distance: 20,
        type: 1,
        position: 'right top'
      })
    },
    error: function(xhr, status, error) {
      console.error(xhr);
    }
  });
});