ajax - Delete form data after data is displayed or submission of the form

Question

I use the same form to view details of a record that is in the database and make form submission. But an error occurs when I view a log and then register other data. In this case the new registration is registered three times in the database. And the reason this happens is that the form data is cached when I view or register a record. All the solutions I searched on the internet didn't work for me.

This is my form

<div id="form" style="display: none;" class="col-md-12">
   
      <div class="row">
        <h5 class="title">Add</h5>
        <div class="float-right" style="margin-left: 80%">
           <button class="btn btn-secondary" id="close_form">Close</button>
        </div>
       
      </div>

 <form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">
  @csrf 
  
  <div class="row">
    
    <div class="col-md-12">
      <div class="card card-primary">
        <div class="card-header"> 

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
              <i class="fas fa-minus"></i></button>
            </div>
          </div>
          
          <div class="card-body">
            
            <fieldset disabled>
              <div class="row">
                <div class="form-group col-md-3">
                  <label for="inputCity">Código do documento:</label>
                  <input type="text" class="form-control" id="id_docs" name="id_docs">
                </div>
                
                <div class="form-group col-md-8">
                  <label for="inputCity">Status</label>
                  <input type="text" class="form-control" id="status" name="status">
                </div>
              </div>
            </fieldset>
            <div class="form-group">
              <label>Assunto</label>
              <textarea class="form-control" id="assunto" name="assunto" required></textarea>
            </div>
            <div class="form-group">
              <label for="inputAddress2">Proveniencia</label>
              <input type="text" class="form-control" id="prov" placeholder="Proveniencia" name="prov" required>
            </div>

            <div class="form-group col-md-4">
              <label for="inputCity">Correspondência</label>
              <input type="date" class="form-control" id="corre" name="corre">
            </div>
            
            
          </div>
        </div>
      </div>
      
      
    </div>
    <div class="row"> 


      <div class="col-md-12" id="img_cad" style="margin-left: 10px;">
        <span class="control-label col-md-4"><b class="span_doc">File:</b></span><br><br>
        <input type="file"  id="image" aria-describedby="inputGroupFileAddon01" name="image">
        <span id="store_image"></span>
      </div><br>  


      <br>

      <input type="hidden" name="action" id="action" />
      <input type="hidden" name="hidden_id" id="hidden_id" />
      <input type="hidden" name="hidden_id_docs" id="hidden_id_docs" />



      <button type="submit" name="action_button" id="action_button" class="btn btn-warning">Save</button>

    </div>
  </div>


</form>

</div>

This is the function to view the details of a record on the form

$(document).on('click', '.edit', function(){

    var id_scr = $(this).attr('id_scr');
    
    $('#div_table').hide();
    
    $.ajax({
     url:"/scr/"+id_scr+"/edit",
     cache: false,
     dataType:"json",
     success:function(html){
      
      $('#action_button').text("Edit Data");
      $('#assunto').val(html.data.assunto);
      $('#prov').val(html.data.prov);
      $('#corre').val(html.data.corre);
      $('#status').val(html.data.descricao);
      $('#cod_cadastro').val(html.data.cod_cadastro);
      $('#hidden_id').val(html.data.id);
      $('#hidden_id_docs').val(html.data.id_docs);
      $('#id_docs').val(html.data.id_docs);
      $('.title').text("Details...");
      $('.span_doc').text("Alter Doc");
      $('#action').val("Edit");

      $('#form').show();

    }
  })
  });

To clear the form data after viewing a record, I created thisTo clear the form data after viewing a record, I created this function:

$(document).on('click', '#close_form', function(){

    $('#sample_form')[0].reset();
    $('#form').hide();
    $('#div_table').show();

  });

And finally, this is the function for registering a new record

 $('#sample_form').on('submit', function(event){
    event.preventDefault();
    $('.progress').show();
    if($('#action').val() == 'Add')
    {
     $.ajax({
      url:"{{ route('scr.store') }}",
      method:"POST",
      data: new FormData(this),
      contentType: false,
      cache:false,
      processData: false,
      dataType:"json",
      success:function(data)
      {
      
        alert('SUCCESSFULLY SAVED');
        
        $('#sample_form')[0].reset();
        $('#formModal').modal('hide');
        location.reload();  //**This is the only way I found to clear the form after submitting the data**
      }
    
    })
}
    
  })

question from:https://stackoverflow.com/questions/65843718/delete-form-data-after-data-is-displayed-or-submission-of-the-form

Answer 1

You could try this method :

function submitForm() {
   // Get the first form with the name
   // Usually the form name is not repeated
   // but duplicate names are possible in HTML
   // Therefore to work around the issue, enforce the correct index
   var frm = document.getElementsByName('contact-form')[0];
   frm.submit(); // Submit the form
   frm.reset();  // Reset all form data
   return false; // Prevent page refresh
}

Or you could just call this method in your submit method