Auto-fill input into a form (php, html)

Question

I have a simple form with the following text fields: name, position, cell phone and email. I want to make sure that by filling in the 'name' field the 'email' field is automatically filled in as follows: for example, if the 'name' field is filled in with "José da Silva" the 'email' field is filled automatically and in real time with "[email protected]". What’s the simplest way to get to this?

My form:

    <form name="formulaio" method="post" action="<?=$PHP_SELF?>"> 
        <label>
            <span>Nome:</span>
            <input type="text" name="nome" /><br>
        </label>
        <label>
            <span>Cargo:</span>
            <input type="text" name="cargo" /><br>
        </label>
        <label>
            <span>Celular:</span>
            <input type="text" name="celular" /><br>
        </label>

        <label>
            <span>e-mail:</span>
            <input type="text" name="email" /><br>
        </label>
        <input type="hidden" name="acao" value="enviar" />
        <button type="submit" class="envio" title="Enviar"></button> 
    </form>

Answer 1

The simplest way would be using jQuery.

Something like:

$( "input[name=nome]").change(function() {
  var nome      = $(this).val();
  var pEspaco   = nome.indexOf(' ');
  var nomeFinal = nome;
  if(pEspaco != -1){
    nomeFinal = nome.substr(0, pEspaco);
  }
  $( "input[name=email]").val( nomeFinal + "@dominio.com.br");
});

Note that we await the change in input by name name. When a change event occurs we store the name in a variable and look for the first blank space. We also defined a variable called nomeFinal, if there is an empty space we cut the string to space. And finally we set the value of input by name email for nomeFinal + uma string.

Answer 2

From what I understand, you want the field to be filled automatically, through the browser/browser autocomplete feature, which already has a previously filled data pattern, and facilitate the completion of the form, correct?

The solution is simple, if that is the circumstance:

• just add the property autocomplete="on"

Example:

<input type="text" name="nome" autocomplete="on" />