Clear modal after entering record in database with php and ajax

Question

I’m saving a record inside the database MYSQL with AJAX. The problem is when I will insert a new record with modal. It brings the record I entered earlier. How can I make the modal after registration it is clean ?

Modal HTML

<!--       Modal Atividade -->
<div class="modal fade" id="m_modal_atividade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="m-portlet m-portlet--tab">
        <div class="m-portlet__head">
          <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
              <span class="m-portlet__head-icon m--hide">
                                            <i class="la la-gear"></i>
                                        </span>
              <h3 class="m-portlet__head-text">
                Registro de Atividade
              </h3>
            </div>
          </div>
        </div>


        <!--begin::Form-->

          <div class="m-portlet__body">
            <div class="form-group m-form__group">
              <label for="exampleSelect1">
                                            Ação
                                        </label>
              <select class="form-control m-input" id="select_acao" name="id_atividade_tipo">
                    <option>Seleciona </option>
                    <?php
                      $sql_atividade = $db->prepare("SELECT * from atividade_tipo");          
                      $sql_atividade->execute();   $atv = 0  ;        
                                      while($row_atividade=$sql_atividade->fetch(PDO:: FETCH_ASSOC)){
                                        $atv++; ?>
                    <option value="<?php echo $row_atividade['id_atividade_tipo']?>"><?php echo utf8_encode($row_atividade['atividade_tipo'])?></option>
                      <?php }?>
                                        </select>

            </div><input type='hidden' id='id_operador' value="<?php echo $_SESSION['id']?>"/>
                <div id="modalretornoid">

                </div>
            <div class="form-group m-form__group">
              <label for="exampleTextarea">
                                                Observação
                                            </label>
              <textarea class="form-control m-input" id="observacao" rows="4" name="observacao"></textarea>
            </div>
            <div class="m-form__group form-group row">
              <label class="col-3 col-form-label">
                                                                Contactado?
                                                            </label>
              <div class="col-3">
                <span class="m-switch">
                                                                    <label>
                                                                        <input type="checkbox" checked="checked" id="contactado" name="contactado"/>
                                                                        <span></span>
                </label>
                </span>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                        Voltar
                                    </button>
            <button type="submit" class="btn btn-primary" onclick="inserir_registo()">
                                        Salvar
                                    </button>
          </div>

        <!--end::Form-->
      </div>
      <!--end::Portlet-->


    </div>
  </div>
</div>

AJAX

function inserir_registo() {

  //dados a enviar, vai buscar os valores dos campos que queremos enviar para a BD
  var dadosajax = {
    'cod_entidade': $("#cod_entidade").val(),
    'select_acao': $("#select_acao").val(),
    'observacao': $("#observacao").val(),
    'id_operador': $("#id_operador").val(),
    'contactado': $("#contactado").val()
  };
  pageurl = 'set_atividade.php';
  //para consultar mais opcoes possiveis numa chamada ajax
  //http://api.jquery.com/jQuery.ajax/
  $.ajax({

    //url da pagina
    url: pageurl,
    //parametros a passar
    data: dadosajax,
    //tipo: POST ou GET
    type: 'POST',
    //cache
    cache: false,
    //se ocorrer um erro na chamada ajax, retorna este alerta
    //possiveis erros: pagina nao existe, erro de codigo na pagina, falha de comunicacao/internet, etc etc etc

    error: function() {
      alert('Erro: Inserir Registo!!');
    },
    //retorna o resultado da pagina para onde enviamos os dados
    success: function(result) {

      //se foi inserido com sucesso
      if ($.trim(result) == '1') {
        alert("O seu registo foi inserido com sucesso!");
      }
      //se foi um erro
      else {
        alert("Ocorreu um erro ao inserir o seu registo!");
      }

    }

  });
  $('#m_modal_atividade').modal('hide');
}

Answer 1

Empty the div that you are entering data into the modal, using the callback when the modal is closed:

$("#m_modal_atividade").on("hidden.bs.modal", function(){
    $(".classe da div que quer esvaziar", "#m_modal_atividade").empty();
});