CODEWITHSUNDEEP
javascriptjqueryajax
Rares Biris
Rares Biris

Reputation: 195

after submit clear textbox

I'm inserting data into a table using Ajax. I'm using ajax so my page wouldn't get refresh. Here is my Ajax code for calling the inserting page:

<script type="text/javascript">
var i = jQuery.noConflict();

  i(document).ready(function(){
i('#myForm').on('submit',function(e) {

    i.ajax({
        url:'insert.php',
        data:$(this).serialize(),
        type:'POST'
        });
e.preventDefault();
});


});
  </script>

Now every time i write in the textbox and hit the submit button the data gets entered but it remains in textbox and i have to press the delete button to erase it.

Question: how can I make so my data gets cleared when I press the submit button?

Upvotes: 2

Views: 1257

Answers (3)

Khaleel
Khaleel

Reputation: 1371

You can reset form fields on the completion as suggested by arun or on success as below

var i = jQuery.noConflict();

jQuery(function ($) {
    $('#myForm').on('submit', function (e) {
        $.ajax({
            url: 'insert.php',
            data: $(this).serialize(),
            type: 'POST',
            success:function(data) {
         $('#myForm')[0].reset();
      }
        });
        e.preventDefault();

Hope it helps

Upvotes: 0

Vivek Pratap Singh
Vivek Pratap Singh

Reputation: 9964

document.getElementById('myForm').reset(); // In Javascript

$("#myform")[0].reset(); // In jQuery Fashion

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can reset the form in the ajax success handler

var i = jQuery.noConflict();

jQuery(function ($) {
    $('#myForm').on('submit', function (e) {
        $.ajax({
            url: 'insert.php',
            data: $(this).serialize(),
            type: 'POST',
            context: this
        }).done(function () {
            this.reset();
        });
        e.preventDefault();
    });
});

Upvotes: 4

Related Questions