Reset modal input value when closed using jQuery and AJAX

Question

I have a modal that shows a data, those value came from my $.each function result value.

I would like to reset the data from my modal when I closed it.

Here's my jQuery with my ajax result

 $('.edit').on('click', function(e){
   e.preventDefault();
  $('#edit_check').modal('show');
  var payment_id = $(this).attr('payment');
  var transaction_id = $(this).attr('transaction');
  var payment_no = $(this).attr('number');

  $.ajax({
      type: 'POST',
      url: 'transaction_row.php',
      data:
      {
        payment_no:payment_no,
        payment_id:payment_id,
        transaction_id:transaction_id
      },
      dataType: 'json',
      success: function(result)
      {
        //console.log(result);
        $.each(result, function(index, value){
          //client details
          $('#client').val(value.fullName);
          $('#company').val(value.company_name);
          $('#address').val(value.company_address);
          $('#trans_number').val(value.payment_transaction_no);
          //transaction details
          $('#edit_bank_name').val(value.bank_name);
          $('#edit_bank_branch').val(value.bank_branch);
          $('#edit_amount').val(value.payment_amount);
          $('#edit_check_number').val(value.check_no);
          $('#edit_check_date').val(value.checkDate);
        }); 
      }
  });

Here's my html/modal

 
      
        
          
            
           Edit Check Transaction 
          
  
          Client:   
          

          Company:    
          

          Address:   
          

          Transaction Number:   
          

          


          
             Edit Payment Method: 
            
              
            
            
          

          
            Bank Name:
              
                 
              
          

          
            Bank Branch:
              
                 
              
          

            
              Amount:
                
                  
                
            

            
              Check Number:
                
                  
                
            

            
              Date:

I can't find any relevant question/answer about my concern.

Update

I used $('#myFormModal').trigger("reset"), but the hide input was not showing.

It must be like this:

Not like this:

I'm using show and hide of input like this:

 if (payment_method == 1)
 {
   $('#input').show;
   $('#input').hide;
 }

Where 'check' is payment_method == 3

SilentCoder · Accepted Answer

Use your reset function with hidden.bs.modalevent,

// when modal dismissed
$('selector').on('hidden.bs.modal', function () {
    // Your reset function
    resetEverything()
})

Please check this fiddle for a working example.

// Do something when after page is ready
$(document).ready(function(){
});
  
// When external edit button clicked, open modal
$('.edit').click( function(){
		$('#edit_check').modal('show');
});    


// Since you edit button is type submit
// you don't need separate event. You can
// user form submit event to track everything
$('#myFormModal').on('submit', function(e){
		e.preventDefault();
		// Do your work here

		// At the end reset form
    resetMyForm();
});

// Form reset function
function resetMyForm(){
		$('input').val('');
    $('#payment_method').val(0);
}

// If modal close reset everything
$("#edit_check").on("hidden.bs.modal", function () {
  	resetMyForm();
});

  .modal-confirm {
    color: #636363;
    width: 400px;
  }
    input.noBorder {
      border: none;
      background-color: transparent;
   }
  .modal-confirm .modal-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 14px;
    width: 600px;
  }
  .modal-confirm1 .modal-content1 {
    padding: 20px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 14px;
    width: 600px;
  }
  .modal-confirm .modal-header {
    border-bottom: none;
        position: relative;
  }
  .modal-confirm h4 {
    text-align: center;
    font-size: 26px;
    margin: 30px 0 -10px;
  }
  .modal-confirm .close {
        position: absolute;
    top: -5px;
    right: -2px;
  }
  .modal-confirm .modal-body {
    color: #999;
  }
  .modal-confirm .modal-footer {
    border: none;
    text-align: center;
    border-radius: 5px;
    font-size: 13px;
    padding: 10px 15px 25px;
  }
  .modal-confirm .modal-footer a {
    color: #999;
  }
  .modal-confirm .icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
    z-index: 9;
    text-align: center;
    border: 3px solid #f15e5e;
  }
  .modal-confirm .icon-box i {
    color: #f15e5e;
    font-size: 46px;
    display: inline-block;
    margin-top: 13px;
  }
    .modal-confirm .btn {
        color: #fff;
        border-radius: 4px;
    background: #60c7c1;
    text-decoration: none;
    transition: all 0.4s;
        line-height: normal;
    min-width: 120px;
        border: none;
    min-height: 40px;
    border-radius: 3px;
    margin: 0 5px;
    outline: none !important;
    }
  .modal-content {
    width: 125%;
  }
  .modal-confirm .btn-info {
        background: #c1c1c1;
    }
    .modal-confirm .btn-info:hover, .modal-confirm .btn-info:focus {
        background: #a8a8a8;
    }
    .modal-confirm .btn-danger {
        background: #f15e5e;
    }
    .modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
        background: #ee3535;
    }
  .trigger-btn {
    display: inline-block;
    margin: 100px auto;
  }









      
          
            
              
              
               Edit Check Transaction 
              
  
              Client:   
              

              Company:    
              

              Address:   
              

              Transaction Number:   
              

              


              
                 Edit Payment Method: 
                
                  
                
                
              

              
                Bank Name:
                  
                     
                  
              

              
                Bank Branch:
                  
                     
                  
              

                
                  Amount:
                    
                      
                    
                

                
                  Check Number:
                    
                      
                    
                

                
                  Date:

Reset modal input value when closed using jQuery and AJAX

Update

Answers (2)

Related Questions