Fill fields from a Select with a database

Question

Fill fields from a Select with a database

Navigation

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

0

Greetings, I'm doing an Autocomplete with PHP , Ajax and JQuery populated by a database in SQL that constantly changes of registers and with the options of that Select I have to fill several text fields of a form that may or may not be modified by the user. I have searched for examples with Autocomplete and it does not show me results. This is what I have been doing until now:

User interface

$(function() {
        $("#plaza").autocomplete({
            source: "pruebaPlaza.php",
            select: function(event, ui) {
                event.preventDefault();
                $('#plaza').val(ui.item.plaza);
                $('#clave_ct_necesidad').val(ui.item.clave_ct_necesidad);
                $('#clave_ct_nomina').val(ui.item.clave_ct_nomina);
                $('#clave_ct_analitico').val(ui.item.clave_ct_analitico);
                $('#qna_ini').val(ui.item.qna_ini);
                $('#qna_fin').val(ui.item.qna_fin);
                $('#asignatura').val(ui.item.asignatura);
                $('#observaciones').val(ui.item.observaciones);

             }
        });
    });

<div class="ui-widget">
  Plaza:  <input id="plaza">
  <br>
  Centro de Trabajo con Necesidad: <input type="text" id="clave_ct_necesidad'">
  <br>
  Centro de Trabajo Nómina: <input type="text"  id="clave_ct_nomina" >
  <br>
  Centro de Trabajo Analítico: <input type="text"  id="clave_ct_analitico" >
  <br>
  Quincena de inicio: <input type="text"  id="qna_ini" >
  <br>
  Quincena de término: <input type="text"  id="qna_fin">
  <br>
  Asignatura: <input id="asignatura">
  <br>
  Observaciones: <input id="observaciones">

Script that autocompletes

<?php
if (isset($_GET['term'])){
    include ('config.php');

$return_arr = array();
/* Si la conexión a la base de datos , ejecuta instrucción SQL. */
$searchTerm = $_GET['term'];
    $sql = "SELECT * FROM dbo.propuesta_vacancias where plaza like '%".$searchTerm."' ";
    $stmt=sqlsrv_query($dbcon, $sql);
    /* Recuperar y almacenar en conjunto los resultados de la consulta.*/
    while ($row=sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
        $plaza=$row['plaza'];
        $clave_ct_necesidad=$row['clave_ct_necesidad'];
        $clave_ct_nomina=$row['clave_ct_nomina'];
        $clave_ct_analitico=$row['clave_ct_analitico'];
        $qna_ini=$row['qna_ini'];
        $qna_fin=$row['qna_fin'];
        $asignatura=$row['asignatura'];
        $observaciones=$row['observaciones'];
        array_push($return_arr,$row_array);
    } 


/* Codifica el resultado del array en JSON. */
echo json_encode($return_arr);

}
?>

Thank you very much in advance for your answers.

Edit: In this version I am using JQuery Autocomplete but it can be with a Select as well.

javascript jquery php ajax

asked by Fernanda Pichardo 13.11.2017 в 20:30

source

2 answers

1

already understood jiji look you have to create a method onchange="change ()" when you make a change in your html that method is activated

function cambio(rfc){
            $.ajax({
                url:   'index.php?accion=buscarRfc&rfc='+rfc,
                type:  'post',
            success:  function (data) {
                                     $('#nombres').val(data.empleados_nombres);
                    $('#apellidoPaterno').val(data.empleados_apellido_paterno);
                    $('#apellidoMaterno').val(data.empleados_apellido_materno);
                    $('#calle').val(data.calle);
                    $('#numeroInterior').val(data.numeroInterior);
                    $('#numeroExterior').val(data.numeroExterior);
                    $('#delegacion').val(data.delegacion);
                    $('#codigoPostal').val(data.codigoPostal);
                    $('#idEstado').val(data.estado);
                    $('#estado').val(data.nombre);

} }

Go to the base and do your query or what you are going to do and return your result with a echo $ answer or if it is a fix echo json ($ answer).

then you make the journey with your data

answered by 13.11.2017 в 20:41

(Android) Initialize a view object in a Button and ImageButton How to extract a String number from a DataGridView C #

score 0 · Accepted Answer

I borrowed some stackOverflow responses in English that helped me a lot, so I'll put how I adapted them to my problem:

I used the data attribute and where I make my select assign a variable to each record I want to fill in the form:

SQL query with which the initial selection is filled and get the fields in a data

$stmt=sqlsrv_query($dbcon, $sql);
                if($stmt==false){
                    die(print_r(sqlsrv_errors(), true));
                }

                while ($row=sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
                 $clave_ct_necesidad = $row['clave_ct_necesidad'];
                 $clave_ct_nomina = $row['clave_ct_nomina'];
                 $clave_ct_analitico = $row['clave_ct_analitico'];
                 $qna_ini=$row['qna_ini'];
                $qna_fin=$row['qna_fin'];
                    $asignatura=$row['asignatura'];
                    $observaciones=$row['observaciones'];

                    echo "<option data-clave_ct_necesidad='".$row['clave_ct_necesidad']."' data-clave_ct_nomina='".$row['clave_ct_nomina']."' data-clave_ct_analitico='".$row['clave_ct_analitico']."' data-qna_ini='".$row['qna_ini']."' data-qna_fin='".$row['qna_fin']."' data-asignatura='".$row['asignatura']."' data-observaciones='".$row['observaciones']."' value='".$row['plaza']."'> ". $row['plaza']."</option>";


 }

And then I generate a function in Javascript that takes the data stored in each data and fills it in the corresponding field:

Javascript function that takes the data and assigns it to the text field

function updateinput(e) {
     var selectedOption = e.options[e.selectedIndex];
     document.getElementById('clave_ct_necesidad').value = selectedOption.getAttribute('data-clave_ct_necesidad');
     document.getElementById('clave_ct_nomina').value = selectedOption.getAttribute('data-clave_ct_nomina');
     document.getElementById('clave_ct_analitico').value = selectedOption.getAttribute('data-clave_ct_analitico');
     document.getElementById('qna_ini').value = selectedOption.getAttribute('data-qna_ini');
     document.getElementById('qna_fin').value = selectedOption.getAttribute('data-qna_fin');
     do
        cument.getElementById('asignatura').value = selectedOption.getAttribute('data-asignatura');
     document.getElementById('observaciones').value = selectedOption.getAttribute('data-observaciones');
    }

And it worked perfectly for me. I hope it will be useful for someone else.