Jquery script working only once require page refresh

JavaScript
1

this is jsn.js

$(function(){
  $('form').submit(function(e){
    e.preventDefault();
   var first = $('#first').val();
   var last = $('#last').val();
    
    $.ajax({
      url: 'send.php',
      type: 'post',
      data: { 'first': first, 'last': last},
      success: function(data) {
        
    $('input#first').val('');
    $('input#last').val('');    
          $('#display').html(data).fadeOut(5000);

          
        
      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      },

        cache: false
    }); // end ajax call
  });

});

this is index:

<!doctype html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>
<script src="jsn.js">
</script>
<form >
FirstName:<input type="text" id="first" class="data">
LastName:<input type="text" id="last" class="data">
     <input type="Submit" value="not working">
</form>
<br>
<div id="display"></div>

</body>
</html>

on success it shall print “Saved Successfully” (on each submit)
It does but on page refresh. Please suggest how to optimize jsn.js so that
it works on each click on submit without page refresh.

2

The problem is that your success function is hiding the div#display element, and so any additional submissions don’t display a message. What you need to do is pass a callback to the fadeOut method which will empty and re-display the div:

$('#display')
    .html(data)
    .fadeOut(5000, function(){
        $(this).html('').toggle(); // Clears the message and re-shows the empty div
    });