Convert an HTML form in Rails

Question

I need help, I'm trying to implement a form in javascript that catches through the zip code, all state information, city, street, etc.

Well, I'm new to rails and I'm having some difficulty to do it alone.

I would like to know how to implement it in the best way in this form.

For example there are some codes that do not know how to declare the rails, ex .:

original form

 <form method="get" action=".">

and

onblur="pesquisacep(this.value);

how to declare this in rails?

Thank you

My form and js

    function limpa_formulário_cep() {
            //Limpa valores do formulário de cep.
            document.getElementById('rua').value=("");
            document.getElementById('bairro').value=("");
            document.getElementById('cidade').value=("");
            document.getElementById('uf').value=("");
            document.getElementById('ibge').value=("");
    }

    function meu_callback(conteudo) {
        if (!("erro" in conteudo)) {
            //Atualiza os campos com os valores.
            document.getElementById('rua').value=(conteudo.logradouro);
            document.getElementById('bairro').value=(conteudo.bairro);
            document.getElementById('cidade').value=(conteudo.localidade);
            document.getElementById('uf').value=(conteudo.uf);
            document.getElementById('ibge').value=(conteudo.ibge);
        } //end if.
        else {
            //CEP não Encontrado.
            limpa_formulário_cep();
            alert("CEP não encontrado.");
        }
    }

    function pesquisacep(valor) {

        //Nova variável "cep" somente com dígitos.
        var cep = valor.replace(/\D/g, '');

        //Verifica se campo cep possui valor informado.
        if (cep != "") {

            //Expressão regular para validar o CEP.
            var validacep = /^[0-9]{8}$/;

            //Valida o formato do CEP.
            if(validacep.test(cep)) {

                //Preenche os campos com "..." enquanto consulta webservice.
                document.getElementById('rua').value="...";
                document.getElementById('bairro').value="...";
                document.getElementById('cidade').value="...";
                document.getElementById('uf').value="...";
                document.getElementById('ibge').value="...";

                //Cria um elemento javascript.
                var script = document.createElement('script');

                //Sincroniza com o callback.
                script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

                //Insere script no documento e carrega o conteúdo.
                document.body.appendChild(script);

            } //end if.
            else {
                //cep é inválido.
                limpa_formulário_cep();
                alert("Formato de CEP inválido.");
            }
        } //end if.
        else {
            //cep sem valor, limpa formulário.
            limpa_formulário_cep();
        }
    };


  function pesquisacep(valor) {

    //Nova variável "cep" somente com dígitos.
    var cep = valor.replace(/\D/g, '');

    //Verifica se campo cep possui valor informado.
    if (cep != "") {

      //Expressão regular para validar o CEP.
      var validacep = /^[0-9]{8}$/;

      //Valida o formato do CEP.
      if(validacep.test(cep)) {

        //Preenche os campos com "..." enquanto consulta webservice.
        document.getElementById('rua').value="...";
        document.getElementById('bairro').value="...";
        document.getElementById('cidade').value="...";
        document.getElementById('uf').value="...";
        document.getElementById('ibge').value="...";

        //Cria um elemento javascript.
        var script = document.createElement('script');

        //Sincroniza com o callback.
        script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

        //Insere script no documento e carrega o conteúdo.
        document.body.appendChild(script);

      } //end if.
      else {
        //cep é inválido.
        limpa_formulário_cep();
        alert("Formato de CEP inválido.");
      }
    } //end if.
    else {
      //cep sem valor, limpa formulário.
      limpa_formulário_cep();
    }
  };


<%= form_for(@pro) do |f| %>
          <% if @pro.errors.any? %>
            <div id="error_explanation">
              <h2><%= pluralize(@pro.errors.count, "error") %> prohibited this pro from being saved:</h2>

              <ul>
              <% @pro.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
              </ul>
            </div>
          <% end %>

          <div class="form-group">
            <%= label_tag 'Escolher Categoria Principal' %><br>
            <%= f.collection_select  :categoria, Segmento.order(:categoria), :id, :categoria, {prompt: "Selecione uma Categoria"}, {class: "form-control"} %>
          </div>
          <div class="form-group">
            <%= f.label :sugerir %><br>
            <%= f.text_field :sugerir, {class: "form-control"} %>
          </div>
          <div class="form-group">
            <%= f.label :proname %><br>
            <%= f.text_field :proname, {class: "form-control"} %>
          </div>
          <div class="form-group">
            <%= f.label :email %><br>
            <%= f.text_field :email, {class: "form-control"} %>
          </div>
          <div class="form-group">
            <%= f.label :cep %><br>
            <%= f.text_field :cep,  {class: "form-control", name: "cep", id: "cep"} %>
          </div>
          <div class="form-group">
            <%= f.label :estado %><br>
            <%= f.text_field :estado, {class: "form-control", name: "uf", id: "uf"} %>
          </div>
          <div class="form-group">
            <%= f.label :cidade %><br>
            <%= f.text_field :cidade, {class: "form-control", name: "cidade", id: "cidade"} %>
          </div>
          <div class="form-group">
            <%= f.label :telefone %><br>
            <%= f.text_field :telefone, {class: "form-control"} %>
          </div>
          <div class="form-group">
            <%= f.label :celular %><br>
            <%= f.text_field :celular, {class: "form-control"} %>
          </div>
          <div class="form-group">
            <%= f.label :operadora %><br>
            <%= f.collection_select  :operadora, Operadora.order(:operadoras), :id, :operadoras, {prompt: "Selecione sua Operadora"}, {class: "form-control"} %>

          </div>
          <div class="form-group"><br>
            <%= f.check_box :termos %>&nbsp
            <%= label_tag 'Aceitar os termos do Serviço' %>

          </div>
          <div class="actions">
            <%= f.submit %>
          </div>
        <% end %>

form original in html

        <!-- Inicio do formulario -->
      <form method="get" action=".">
        <label>Cep:
        <input name="cep" type="text" id="cep" value="" size="10" maxlength="9"
               onblur="pesquisacep(this.value);" /></label><br />
        <label>Rua:
        <input name="rua" type="text" id="rua" size="60" /></label><br />
        <label>Bairro:
        <input name="bairro" type="text" id="bairro" size="40" /></label><br />
        <label>Cidade:
        <input name="cidade" type="text" id="cidade" size="40" /></label><br />
        <label>Estado:
        <input name="uf" type="text" id="uf" size="2" /></label><br />
        <label>IBGE:
        <input name="ibge" type="text" id="ibge" size="8" /></label><br />
      </form>
    </body>

    </html>

Answer 1

I solved the problem by installing a simple_form gem and declaring this way:

  <%= simple_form_for(@profissional) do |f| %>
  <%= f.error_notification %>

  <div class="form-group">
    <%= f.collection_select :categoria, Segmento.order(:categoria), :id, :categoria, prompt: 'Selecione uma Categoria' %>
    <%= f.input :subcategoria %>
    <%= f.input :sugerir %>
    <%= f.input :profissionalnome %>
    <%= f.input :email %>
    <%= f.input :cep, input_html: { name: 'cep', type:'text', id: 'cep', value: '', size: '10', maxlength:'9', onblur: 'pesquisacep(this.value);', placeholder:'Digite seu CEP' } %>
    <%= f.input :rua, input_html: { name: 'rua', type:'text', id: 'rua', value: '', size: '60', placeholder:'Informe seu Endereço'} %>
    <%= f.input :bairro, input_html: { name: 'bairro', type:'text', id: 'bairro', value: '', size: '40', placeholder:'Informe seu Bairro'} %>
    <%= f.input :cidade, input_html: { name: 'cidade', type:'text', id: 'cidade', value: '', size: '40', placeholder:'Informe sua Cidade'} %>
    <%= f.input :estado, input_html: { name: 'uf', type:'text', id: 'uf', value: '', size: '2', placeholder:'Digite seu CEP'} %>
    <%= f.input :telefone %>
    <%= f.input :celular %>
    <%= f.input :operadora %>
    <%= f.input :termos %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>