Clean Inputs and TextArea of a form in a Modal of Bootstrap

Question

Clean Inputs and TextArea of a form in a Modal of Bootstrap

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

The code of the table with the buttons is as follows:

<table class="table table-striped">
   <thead>
      <tr>
         <th>Fecha</th>
         <th>Título</th>
         <th>Estado</th>
         <th>Comentarios</th>
         <th>
            Acciones&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" id="btn-noticia" onclick="limpiarFormulario();">Crear noticia</button>
         </th>
      </tr>
   </thead>
   <tbody>
      <?php
         for ($i = 0; $i < count($noticias); $i++) {
            $noticia_actual = $noticias[$i][0];
            $comentarios_noticia_actual = $noticias[$i][1];
            ?>
      <tr>
         <td><?php echo $noticia_actual -> obtenerFecha(); ?></td>
         <td><?php echo $noticia_actual -> obtenerTitulo(); ?>a</td>
         <td><?php echo $noticia_actual -> obtenerEstado(); ?></td>
         <td><?php echo $comentarios_noticia_actual; ?></td>
         <td>
            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal">Editar</button>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal">Borrar</button>
         </td>
      </tr>
      <?php
         }
         ?>
   </tbody>
</table>

The code of the modal that contains the Inputs and the TextArea is:

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="container">
        <input type="hidden" id="id" name="id" />
        <div class="form-row">
            <div class="form-group col-10">
                <label><strong>Titulo:</strong></label>
                <input type="text" id="titulo" name="titulo" class="form-control" placeholder="Título de la noticia" value="<?php echo $noticia_actual -> obtenerTitulo(); ?>"/><br/>
            </div>
            <div class="form-group col-2">
                <label><strong>Publicar:</strong></label><br/>
                <label class="switch">
            <input id="estado" type="checkbox">
            <span class="slider round"></span>
        </label>
            </div>
            <label><strong>Texto:</strong></label>
                <textarea cols="12" id="texto" name="texto" class="form-control"><?php echo $noticia_actual -> obtenerTexto(); ?></textarea>
        </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
    <button type="submit" class="btn btn-primary" data-dismiss="modal">Guardar</button>
  </div>
</div>
</div>
</div>

Finally the JavaScript code that I have made:

 <script type="text/javascript">
    $("#btn-noticia").on("click",function() {
        $('#titulo').val('');
        $('#estado').prop('checked', false).removeAttr('checked');
        $('#texto').val('');
    });
    </script>

The problem is that when I clean the fields by clicking on the CREATE NEWS button, and I click on the edit button again, I should show the fields with the information obtained through PHP, but the fields are empty.

I appreciate any contribution to solve this problem.

javascript html5 bootstrap ajax modal

asked by Danyel Melendez Ramirez 27.10.2018 в 18:26

source

2 answers

1

The solution to the current problem is:

$("#btn-editar").on("click",function() {
$('#titulo').val('<?php echo $noticia_actual -> obtenerTitulo(); ?>');
$('textarea').val('<?php echo $noticia_actual -> obtenerTexto(); ?>');
});

With that I recover the data again when entering the modal with the edit button.

answered by 28.10.2018 в 20:38

Distribute the jQuery code in several .js Searcher in Jquery

score 1 · Accepted Answer

Check your html code, you forgot to declare the ID attribute in the publish checkbox:

  <div class="form-group col-2">
            <label><strong>Publicar:</strong></label><br/>
            <label class="switch">
                <input type="checkbox" id="estado">
                <span class="slider round"></span>
            </label>
  </div>

As in txtarea:

    <label><strong>Texto:</strong></label>
            <textarea cols="12" name="texto" id="texto" class="form-control"><></textarea>

I made some changes to your javascript code:

$("#btn-noticia").on("click",function() {
    $('#titulo').val('');
    $('#estado').prop('checked', false).removeAttr('checked');
    $('#texto').val('');
});

If the answer helps you, remember to mark it as correct. Good luck!