Change Field Dynamically

Question

Change Field Dynamically

Navigation

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

3

Hello, I would like to type change the next field next, in case it would be the name, I would type the name in the input and it would change the letters (type autocomplete), and when the user select the image it could do a preview, I think it is with javascript but my knowledge in the area is minimal.

Note: The image is static and I just put it to illustrate, just like the name "Alex M. Doe", because that's where you have to change dynamically.

Basically I wanted it when I typed in:

<input type="text" name="nome" id="form-field-1" maxlength="60" placeholder="Nome do Usuário" id="form-field-1" class="col-xs-11 col-sm-5 col-md-10" />

javascript would take the data and already wrote it in this span:

<span id="username" class="white">Alex M. Doe</span>

And the same thing with the image, when clicking the input and selecting the image:

<input type="file" name="arquivo" id="form-field-1" class="col-xs-11 col-sm-5 col-md-10" />

A preview of the image appeared in this field:

<img id="example" class="editable img-responsive" alt="Alex's Avatar" src="../assets/avatars/profile-pic.jpg" />

Code:

<div id="user-profile-1" class="user-profile row">
                                    <div class="col-xs-12 col-sm-3 center">
                                        <div>
                                            <!-- #section:pages/profile.picture -->
                                            <span class="profile-picture">
                                                <img id="example" class="editable img-responsive" alt="Alex's Avatar" src="../assets/avatars/profile-pic.jpg" />
                                            </span>
                                            <!-- /section:pages/profile.picture -->
                                            <div class="space-4"></div>
                                            <div class="width-80 label label-info label-xlg arrowed-in arrowed-in-right">
                                                <div class="inline position-relative">
                                                    <a href="#" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                                                        &nbsp;
                                                        <span class="white">Alex M. Doe</span>
                                                    </a>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="space-6"></div>
                                    </div>
                                    <div class="col-xs-12 col-sm-9">
                                        <div class="space-12"></div>
                                        <!-- #section:pages/profile.info -->
                                        <form name="cadastro_usuario" action="insert_usuario.php" method="post" enctype="multipart/form-data">
                                        <div class="profile-user-info profile-user-info-striped">

                                            <div class="profile-info-row">
                                                <div class="profile-info-name"> Nome </div>
                                                <div class="profile-info-value">
                                                    <input type="text" name="nome" maxlength="60" placeholder="Nome do Usuário" id="form-field-1" class="col-xs-11 col-sm-5 col-md-10" />        </div>
                                            </div>
                                            <div class="profile-info-row">
                                                <div class="profile-info-name"> Email </div>
                                                <div class="profile-info-value">
                                                    <input type="text" name="email" maxlength="50" placeholder="Email" id="form-field-1" class="col-xs-11 col-sm-5 col-md-10" />        </div>
                                            </div>
                                            <div class="profile-info-row">
                                                <div class="profile-info-name"> Senha </div>
                                                <div class="profile-info-value">
                                                    <input type="password" name="senha" maxlength="30" placeholder="Senha" id="form-field-1" class="col-xs-11 col-sm-5 col-md-10" />        </div>
                                            </div>
                                            <div class="profile-info-row">
                                                <div class="profile-info-name"> Tipo do Usuário </div>
                                                <div class="profile-info-value">
                                    <select name="tipo" id="tipo" id="form-field-1" class="col-xs-11 col-sm-5 col-md-5">
                                        <option value="">Selecione o Tipo do Usuário</option>
                                        <option value="1">1 - Administrador do Sistema</option>
                                        <option value="2">2 - Empresa</option>
                                        <option value="3">3 - Condomínio</option>
                                    </select></div>
                                            </div>
                                            <div class="profile-info-row">
                                                <div class="profile-info-name"> Permissões </div>
                                                <div class="profile-info-value">
                                    <select name="permissoes" id="permissoes" id="form-field-1" class="col-xs-11 col-sm-5 col-md-5">
                                        <option value="">Selecione o Nível de Permissão</option>
                                        <option value="Administrador">1 - Administrador - Privilégios Totais</option>
                                        <option value="Empresa">2 - Empresa</option>
                                        <option value="Síndico">3 - Condomínio - Síndico</option>
                                        <option value="Portaria">4 - Condomínio - Portaria</option>
                                        <option value="Condôminos">5 - Condomínio - Condôminos</option>
                                    </select></div>
                                            </div>

                                            <div class="profile-info-row">
                                                <div class="profile-info-name">Imagem </div>
                                                <div class="profile-info-value">
                                    <input type="file" name="arquivo" id="form-field-1" class="col-xs-11 col-sm-5 col-md-10" />        </div>
                                            </div>

                                            <div class="profile-info-row">
                                                <div class="profile-info-name"></div>
                                                <div class="profile-info-value">
                                                    <button type="submit" id="form-field-1" class="col-xs-11 col-sm-5 col-md-3 btn btn-white btn-info btn-bold" /><i class="ace-icon fa fa-floppy-o bigger-120 blue"></i>Cadastrar Usuário</button>        
                                              </div>
                                            </div>
                                        </div>
                                        </form>
                                        <div class="space-4"></div>
                                        <!-- /section:pages/profile.info -->
                                    </div>
                                </div>
                            </div>

javascript html

asked by anonymous 08.02.2017 / 16:30

2 answers

1

This example uses JQuery 1.9.1 Adapted from link

$("input[name=f_name]").on('keyup', function () {
        $('#first_name').html($(this).val());
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divid="forms-col">
    <label>Campo:</label>
    <input type="text" name="f_name" value="" />
</div>
<div>
    Span: <span id="first_name"></span>
</div>

08.02.2017 / 17:08

What is a .lock file? preApproval data is required

score 2 · Accepted Answer

Let's go to Javascript then, this already does the first part, as for the image I believe only with integration with Bank, or listing them from a folder.

var prev = "";

function alterar(val) {
  if(val != prev) {
    prev = val;
    if(val == "") $("#din").text("Aqui que alterará");
    else $("#din").text(val);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputid="texto" onkeyup="alterar(this.value)">

<pre id="din">Aqui que alterará</pre>