Dialog to feed Form field

Asked

Viewed 440 times

0

On my page there are fields that are tabulated data, where the user must select an existing data in the table

For simple case, I’m using the <select><option> of html fed a table reading via php, but I came across a case where the data of a table is many. With this the combo gets too big and the page gets heavy to load.

I would like to know how to insert a kind of button that calls a dialog which will display the table with the values, where the user can click on the data and this be sent to the form.

$(Function() { $( "#datepicker" ).datepicker(); }); $(Function() { $( "#tabs" ).tabs(); }); 
            <?php
            require_once('../../function/funcoes.php');
            ?>
            </head>
            <title>Dober System</title>
              <body>
                 <div id="container">
                            <form action="../../function/funcoes.php"" name="inserir_C" id="inserir_C" method="POST">
                        <div id="Cliente">
                                    <fieldset id="Cliente">
                                            <legend><b>Dados Gerais: </b></legend>
                                            <label for="CODIGO">
                                            Código:<input type="text" name="CODIGO" id="CODIGO" MAXLENGTH="4" value="" onKeyUp="javascript:somente_numero(this);" required/>
                                            </label>
                                            <label for="NOME">
                                            Nome:<input name="NOME" id="NOME" MAXLENGTH="50" value="" />
                                            </label>
                                            <label for="NOMEABR">
                                            Nome Abreviado:<input name="NOMEABR" id="NOMEABR" MAXLENGTH="20" value="" />
                                            </label>
                                            <label for="GRUPO">
                                            Grupo:
                                            <?php 
                                            $rs = mysql_query("SELECT ID,DESCRICAO FROM FINANCEIRO.GRUPO ORDER BY ID"); 
                                            montaCombo('GRP_cmb', $rs, 'ID', 'DESCRICAO',null);
                                            ?>
                                            </label>
                                            <label for="REPRES">
                                            Representante:
                                            <?php 
                                            $rs = mysql_query("SELECT CODIGO,ID FROM FINANCEIRO.REPRESENTANTE ORDER BY CODIGO");    
                                            montaCombo('REPRE_cmb', $rs, 'CODIGO', 'ID',null);
                                            ?>
                                            </label>
                                            <label for="TRANSP">
                                            Transportadora:
                                            <?php 
                                            $rs = mysql_query("SELECT CODIGO,NOME FROM FINANCEIRO.TRANSPORTADORA ORDER BY CODIGO"); 
                                            montaCombo('TRANSP_cmb', $rs, 'CODIGO', 'NOME',null);
                                            ?>
                                            </label>
                                            <!--<label for="DATA">
                                            Data Implant.:<input type="text" name="DATA" id="datepicker" MAXLENGTH="10" value="" />
                                            </label>-->
                                    </fieldset>
                        </div>
                </div>
              </body>
            </html>

            function montaCombo($nome, $rs, $valor, $descricao,$cmb)
            {
            echo("<select name='$nome' class='styled-select'>");
            echo("<option selected='selected'></option>");
            while ($obj = mysql_fetch_object($rs))
            {           
            echo("t<option value='".$obj->$valor."' > ".$obj->$valor.":". $obj->$descricao." </option>");
            }
            if(!$cmb==null)
            {
            $row = mysql_fetch_array($cmb);
            $a= $row[$valor];
            $b=$row[$descricao];
            echo ("<option value=\"$a\" selected>$a:$b</option></select>");
            }else
            {
            echo ("</select>");
            }
            }
jquery html

  • You should enter the form code and php q code creates the table

  • Thiago, that dit that is to be approved is yours?

1 answer

1

Recital 2 archives php table.:

             <table>
                <tr>
                    <td>Linha1 -Valor 1</td><td>Linha1 -Valor 2</td><td>Linha1 -Valor 3</td><td>Linha1 -Valor 4</td>
                </tr>
                <tr>
                    <td>Linha2 -Valor 1</td><td>Linha2 -Valor 2</td><td>Linha2 -Valor 3</td><td>Linha2 -Valor 4</td>
                </tr>
                <tr>
                    <td>Linha3 -Valor 1</td><td>Linha3 -Valor 2</td><td>Linha3 -Valor 3</td><td>Linha3 -Valor 4</td>
                </tr>

            </table>

html form.:

        <!DOCTYPE html>
        <html>
            <head>
                <title>TODO supply a title</title>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
                <style>
                    #dialog table {background: #eeeeee;}
                    #dialog table tr td{padding:3px;border:1px solid #ccc;}
                    #dialog table tr td:hover{box-shadow: 0px 0px 5px #333;background:#fefefe;cursor:pointer;
                    }
                </style>
            </head>
            <body>
                <form>
                    <input type="text" id="nome" name="nome"> <span id="buscar">Buscar</span>
                </form>
                <div id="dialog" style="display: none;" title="tabela">
                    <table border="1">
                        <tr>
                            <td>Linha1 -Valor 1</td><td>Linha1 -Valor 2</td><td>Linha1 -Valor 3</td><td>Linha1 -Valor 4</td>
                        </tr>
                        <tr>
                            <td>Linha2 -Valor 1</td><td>Linha2 -Valor 2</td><td>Linha2 -Valor 3</td><td>Linha2 -Valor 4</td>
                        </tr>
                        <tr>
                            <td>Linha3 -Valor 1</td><td>Linha3 -Valor 2</td><td>Linha3 -Valor 3</td><td>Linha3 -Valor 4</td>
                        </tr>

                    </table>
                </div>

                <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script>
                    $.ajax({
                        url: "tabela.php",
                        dataType: 'text',
                        success: function(data, textStatus, jqXHR) {
                            $("#dialog").html(data);

                        }
                    });
                    $("#nome").focus(function() {
                        $("#dialog").show();
                    });
                    $('#dialog').delegate('td', 'click', function() {
                        $("#nome").val($(this).text());
                        $("#dialog").hide();
                    });

                </script>

            </body>
        </html>

  • Thank you for your reply. That’s almost what I need, but I would like the table to be demonstrated in another way, like when it darkens the background a little and the screen focuses on the new window.

  • ai Voce will need in jquery ui instead of $("#name"). Focus(Function() { $("#dialog").show(); }); Put : $("#name"). Focus(Function() { $("#dialog").dialog(); }); and pronto ta ae

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.