Add row to a table with data from a modal

Question

Add row to a table with data from a modal

Navigation

#1 by (1 votes)

1

if you can help me with this question of how to pass the data filled from a form that is in a modal to a new row in a table. And let it accumulate every time you open the modal to fill out the form, and the option to delete the row.

This is my modal.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="myForm" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"></span></button>
                    <h4 class="modal-title" id="myModalLabel">Agregar accion a Clientecentrico</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label>Tipo:</label>
                    </div>
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="70 - Experiencia">70 - Experiencia
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="20 - Trabajo con otros">20 - Trabajo con otros
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="10 - Formación formal">10 - Formación formal
                        </label>
                    </div>
                    <br>
                    <div class="form-group">
                        <textarea id="comentarios" required="required" rows="5"
                                  class="form-control" name="message"
                                  data-parsley-trigger="keyup"
                                  data-parsley-minlength="20"
                                  data-parsley-maxlength="1000"
                                  data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.."
                                  data-parsley-validation-threshold="10" placeholder="Accion."></textarea>
                    </div>
                    <div class="form-group">
                        <label>Fecha fin:</label>
                        <div class='input-group date' id='myDatepicker'>
                            <input type='text' id="fecha_final" class="form-control"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>                        
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal" onclick="myFunction()">
                        Cerrar
                    </button>
                    <button type="button" class="btn btn-primary">Crear</button>
                </div>
            </form>
        </div>
    </div>
</div>

And the table is this

<table id="tabla-acciones" class="table table-bordered">
<thead>
<tr>
    <th>Tipo</th>
    <th>Accion</th>
    <th>Fecha fin</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>

Here is the script that I'm trying to

$('#crearAccion').click(function () {
var tipo = $('#optradio').val();
var accion = $('#comentarios').val();
var fechafin = $('#fecha_final').val();

$('table tbody').append('<tr><td>' + tipo + '</td><td>' + accion + '</td><td>' + fechafin + '</td></tr>');
});

java javascript jquery html

asked by Santiago 08.08.2018 в 00:26

source

1 answer

Default path for entering and exiting files and files in Eclipse I have a question about the type of words detected by the parameters

score 1 · Accepted Answer

You need two different buttons, one to show the modal and then when you accept, add the row. Something like this:

$('#crearAccion').click(function () {
  var tipo = $('input[name="optradio"]:checked').val();
  var accion = $('#comentarios').val();
  var fechafin = $('#fecha_final').val();

  $('table tbody').append('<tr><td>' + tipo + '</td><td>' + accion + '</td><td>' + fechafin + '</td></tr>');
  $("#myModal").modal('hide');
});
$('#crear').click(function () {
  $("#myModal").modal();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="myForm" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"></span></button>
                    <h4 class="modal-title" id="myModalLabel">Agregar accion a Clientecentrico</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label>Tipo:</label>
                    </div>
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="70 - Experiencia">70 - Experiencia
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="20 - Trabajo con otros">20 - Trabajo con otros
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="10 - Formación formal">10 - Formación formal
                        </label>
                    </div>
                    <br>
                    <div class="form-group">
                        <textarea id="comentarios" required="required" rows="5"
                                  class="form-control" name="message"
                                  data-parsley-trigger="keyup"
                                  data-parsley-minlength="20"
                                  data-parsley-maxlength="1000"
                                  data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.."
                                  data-parsley-validation-threshold="10" placeholder="Accion."></textarea>
                    </div>
                    <div class="form-group">
                        <label>Fecha fin:</label>
                        <div class='input-group date' id='myDatepicker'>
                            <input type='text' id="fecha_final" class="form-control"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>                        
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">
                        Cerrar
                    </button>
                    <button id="crearAccion" type="button" class="btn btn-primary">Crear</button>
                </div>
            </form>
        </div>
    </div>
</div>

<button data-toggle="myModal" id="crear">Crear</button>
<table id="tabla-acciones" class="table table-bordered">
<thead>
<tr>
    <th>Tipo</th>
    <th>Accion</th>
    <th>Fecha fin</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>