How to show next field when user clicks green button

Question

How to show next field when user clicks green button

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

I have several fields that are hidden and should only appear when the user clicks the view button next to the first field.

My initial idea would be when the person clicks the green button (after the .newField) it adds the newField class to the next field.

(no problem if the green button gets duplicated, of course if you can leave only the last one is better.)

.c-form .hide {
  display: none;
}

.newField {
  display: block!important;
  position: relative;
}

.c-form .newField:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  font-size: 35px;
  cursor: pointer;
  color: #1fa050
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="c-form">
  <form id="formsugestoes" method="post" enctype="multipart/form-data">
    <h3>Fale conosco</h3>
    <input type="hidden" name="setor" value="">

    <input type="hidden" name="assunto" value="formsugestoes">

    <label class="lado hide newField"><span>Nome: *</span><input class="text" type="text" name="nome" value="" required></label>

    <label class="lado hide"><span>E-mail: *</span><input class="text" type="email" name="email" value="" required></label>

    <label class="lado hide"><span>Cidade: *</span><input class="text" type="text" name="cidade" value="" required></label>

    <label class="lado hide"><span>Telefone:</span><input class="text mask-tel" type="text" name="telefone" value="" required></label>

    <label class="lado hide"><span>Mensagem:</span><textarea class="text" name="mensagem" value=""> </textarea></label>

    <div><input type="submit" name="enviar" value="Enviar" class="btnEnviar hide lado" /></div>

  </form>

</div>

javascript html jquery html5 css3

asked by anonymous 04.07.2018 / 15:00

2 answers

0

You do a button listener, and via javascript remove the class ".hide".

<script>
    $('.botao_ver').click(function(){
        $(this).children('.lado').removeClass('hide');
    });
</script>

This function is generic, inside your code I could not identify which button you will click to show the inputs, but to have a base, this should help you.

04.07.2018 / 15:15

How to send email to each new record? Send a video recorded via Javascript by input type="file"

score 3 · Accepted Answer

You are creating a pseudo-element in label , so you can not detect via JavaScript the exact click on the button, the click will be active on% the intent of the click on the button. Also because clicking the button will focus on the name field, which does not make sense.

I suggest that you create the button in a label out of span so that it stays independent, so you can capture the click on the button without focusing on the field. And also go cloning the button and adding after the next label until you reach the Send button.

It would look like this:

$(document).on("click", "span.newField", function(){
   var clone = $(this).clone();
   var next = $(this).next();

   $(this)
   .prev()
   .removeClass("newField hide");

   if(next[0].tagName != "DIV"){
      $(this)
      .next()
      .addClass("newField")
      .removeClass("hide")
      .after(clone);
   }else{
      $(this)
      .next()
      .find("input")
      .removeClass("hide");
   }

   $(this).remove();
});

.c-form .hide {
  display: none;
}

.newField {
  display: inline-block!important;
  position: relative;
}

.c-form span.newField:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  font-size: 35px;
  cursor: pointer;
  color: #1fa050;
  display: inline-block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="c-form">
  <form id="formsugestoes" method="post" enctype="multipart/form-data">
    <h3>Fale conosco</h3>
    <input type="hidden" name="setor" value="">

    <input type="hidden" name="assunto" value="formsugestoes">

    <label class="lado hide newField"><span>Nome: *</span><input class="text" type="text" name="nome" value="" required></label>
    <span class="newField"></span>

    <label class="lado hide"><span>E-mail: *</span><input class="text" type="email" name="email" value="" required></label>

    <label class="lado hide"><span>Cidade: *</span><input class="text" type="text" name="cidade" value="" required></label>

    <label class="lado hide"><span>Telefone:</span><input class="text mask-tel" type="text" name="telefone" value="" required></label>

    <label class="lado hide"><span>Mensagem:</span><textarea class="text" name="mensagem" value=""> </textarea></label>

    <div><input type="submit" name="enviar" value="Enviar" class="btnEnviar hide lado" /></div>

  </form>

</div>