1

si me pueden ayudar con esta duda de como pasar los datos llenados de un formulario que esta en un modal hacia una nueva fila en una tabla. Y que que se vaya acumulando cada vez que abre el modal para llenar el formulario, y la opcion de eliminar la fila.

Este es mi 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>

Y la tabla es esta

<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>

Aca el script que estoy intentando

$('#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>');
});
4
  • Que has intentado?
    – alanfcm
    Commented el 7 ago. 2018 a las 22:32
  • @alanfcm si me olvide poner el script, ahi esta.
    – Santiago
    Commented el 7 ago. 2018 a las 22:47
  • Que problemas tienes con tu codigo?
    – alanfcm
    Commented el 7 ago. 2018 a las 22:49
  • @alanfcm que no crea una nueva fila en la tabla con los datos del formulario que esta en el modal.
    – Santiago
    Commented el 7 ago. 2018 a las 22:53

1 respuesta 1

2

Necesitas dos botones distintos, uno para mostrar el modal y luego cuando aceptas, agregar la fila. Algo asi:

$('#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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.