0

Estimados muy buena tarde:

Solicitando su amable apoyo, en php tengo un input type text donde el usuario ingresa una Razón Social y al dar click, misma cadena ingresarla en un datalist dentro de una función en javascript.

He visto la rutina tanto en php como en js, pero no he encontrado la manera de combinar la información.

Intente obteniendo el valor del input

$("#btnLoadProspect").click(function()
    {
        var Prospecto = $("#txtProspect").val();

Posteriormente asignarlo como cualquier otros objeto al datalist (al crearlo agrego name and id):

$("#dlClient").val(Prospecto);

El resultado es que lo aplica pero me desactiva el listado previamente llenado, solo lo deja como una caja de texto con el valor obtenido.

Agradezco su amable tiempo. Saludos Cordiales

4
  • 1
    Buenas, sería importante que modificaras tu pregunta agregando el código que tienes actualmente o el código con el cual has intentado la tarea para poderte brindar la ayuda. Gracias Commented el 27 dic. 2018 a las 21:15
  • Te adelanto que con jquery y el append puedes hacerlo fácilmente. Commented el 27 dic. 2018 a las 21:21
  • agrega el codigo js y html que usas
    – jhbosch
    Commented el 27 dic. 2018 a las 21:26
  • Gracias! He intentado con jQuery append() Method pero no logro insertar: $("#btnLoadProspect").click(function() { var Prospecto = $("#txtProspect").val(); $("#dlClient").append(Prospecto); }); Commented el 27 dic. 2018 a las 21:41

1 respuesta 1

0

Muy buen día:

Revisando, creo que no es posible pues la naturaleza del datalist es almacenar información dentro de su arreglo, lo que pretendía era aparecerlo como si fuera auto-completado. Opte por un check y un input type text. El check para habilitar el cajón si se requiere agregar una nueva razón social y a través de un modal el ingreso y copia.

Queda así:

--CHK Y CAJÓN--

<form class="form-horizontal" role="form">
<div class="col-lg-4">
<label>Nuevo Prospecto</label>
<div class="input-group">
<span class="input-group-addon">
<input type='checkbox' class='checkbox_class' value='' id='chkNewProspect' data-placement='bottom' data-toggle="modal" data-target="#exampleModal">
</span>
<input type='text' class='form-control' aria-label='123' style='height:35px' placeholder='Agregar' name='txtNewProspect' id='txtNewProspect' disabled>
</div>
</div>

Y EL MODAL QUEDANDO ASÍ

<div class="modal fade" id="exampleModal" tabeindex="-1" role="dialog" aria-labelledby="exampleModal"        aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">NUEVOS PROSPECTOS</h5>   
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form>
                                                            <div class="form-group">
                                                                <label for="recipient-name" class="col-form-label">RAZÓN SOCIAL COMPLETA:</label>
                                                                <input type="text" name="txtProspect" id="txtProspect" class="form-control" id="recipient-name">
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-success" name="btnLoadProspect" id="btnLoadProspect" data-dismiss="modal">AGREGAR</button>
                                                                <button type="button" class="btn btn-danger" data-dismiss="modal">CERRAR</button>   
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>

De esta manera, me traigo la información y la dejo lista para mostrar en pantalla.

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.