Dynamically Change Field

Asked

Viewed 1,768 times

3

Hello, I would like to change the other field next to, in case it would be the name, I would type the name in the input and it would change the letters(type auto fill), and when the user selected the image he could make a preview, I think it’s with javascript but my knowledge in the area is minimal.

Note: The image is static I just put to exemplify, as well as the name "Alex M. Doe", because that’s where you have to change dynamically.

Basically I wanted when he 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 took the data and already automatically wrote in this span:

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

And the same thing with the image, by clicking on 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 appears 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
  • 1

    Have you ever considered using angular on your page?

  • Really now that I was researching on vi, it would be an excellent alternative @Sorack

2 answers

2


Let’s go to Javascript then, this already makes 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>

<input id="texto" onkeyup="alterar(this.value)">

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

  • Ok! Thank you very much, this one really works, I was looking in the forums of life but had not found anything. The Script of the image I will look for!

  • 1

    @Sauldasilvarolim dispose, man! Mark as answer and if you want to open another question only about this idea with image, but try to be a little clearer :)

  • Yeah, I’m kind of new on the board, but I’m just learning

1

This example uses Jquery 1.9.1 Adapted from http://jsfiddle.net/HZ3t7/3/

$("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>
<div id="forms-col">
    <label>Campo:</label>
    <input type="text" name="f_name" value="" />
</div>
<div>
    Span: <span id="first_name"></span>
</div>

Browser other questions tagged javascript html

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