We help IT Professionals succeed at work.

Want to clear a form after ajax call give a return success message.

puneet kumar
puneet kumar asked
on
I m sending an ajax call in below method after return the success message i want to clear the form in same page so form also get cleared and success
 message also print in jsp page please help me out on this thanx a ton in advance.
 
 
 
 $(document).ready(function() {
	$("#data").click(function(evt) {
		evt.preventDefault();
		 if(save()){
			$.ajax({
				url: "Test.jsp",
				type: "post",
				data: {
				pS:$('#pS').val(),
				pType:$('#pType').val(),
				pCode:$('#pCode').val(),
				mYear:$('#mYear').val(),
				pDate:$('#pdate').val(),
				ppDate:$('#ppdate').val(),
				bDate:$('#bdate').val()},
				success: function(responseFromServer) {
	            	$.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
	                    $('#content').html(resultMessageKey);
	                });
	             },
	            error: function() {
	                alert(" Ajax call Failed to Update Values into Database");
	            }
			});
		 }
		 else
			 {
			 
			 }
	});
});

Open in new window

Comment
Watch Question

Software Team Lead
Commented:
to clear the form element's value, try like this:

$('#pType').val('');
$('#pCode').val('');
$('#mYear').val('');

...

Open in new window

Author

Commented:
Thank You very much Chong for your help .
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
You can just call reset() on the form.

Here is a sample
CSS
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0,0,0,.85);
}
.overlay .popup {
  position: relative;
  width: 50%;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  border: 2px solid lightgray;
  boxshadow: 10px 10px 10px #000;
  padding-top: 2rem;
  color: #444;
}
.popup .content {
  padding: 1rem;
}
.popup .close {
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 50px;
  background-color: black;
  cursor: pointer;
  font-size: 1rem;
  font-style: normal;
  display: flex;
  opacity: 1;
  align-items: revert;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}
.popup .close::after {
  content: "X";
  background-color: black;
  color: white;
  border-radius: 28px;
  display: inline-block;
  padding-bottom: 3px;
  font-weight: normal;
}
.popup .title {
  width: 100%;
  font-size: 1.25rem;
  text-align: center;
}

Open in new window

HTML
<form>
  <input type="text" name="fred">
  <input type="checkbox" name="bob" value="apple">
  <input type="checkbox" name="jack" value="banana">
  <input type="submit" value="go">
</form>

Open in new window

JavaScript
  $('form').submit(function(e) {
    e.preventDefault();
    var vm = this;
    var data = $(vm).serialize();
    $.post('t3808.php', data, function(resp) {
      var dlg;
      if (resp.status) {
        dlg = new Popup('Success',JSON.stringify(resp), 'alert-primary');
        vm.reset();
      } else {
        dlg = new Popup('Failed', JSON.stringify(resp), 'alert-danger');
      }

      dlg.show();
    }, 'JSON');
  });

Open in new window

The Popup() function source is available in this example