Home / Questions / 361529
Accepted
Juan Cabello
Asked: 2020-06-02 21:50:20 +0800 CST 2020-06-02 21:50:20 +0800 CST

Forms in Html

  • 772

I have a form which is very extensive since there are many fields to fill out and they are mandatory. I show them all in a modal but there are other data to fill and these are optional and I don't want to show them unless the user or administrator wants to see it. I wanted to know if there is a method for that, to hit next or check a box, press a button, whatever, so that it displays the rest of the form to fill out and at the end saves the data

php

1 Answers

  1. Best Answer

    You can hide optional forms with css and show them with js when a checkbox is checked.

    Example:

        <form>
  <input type="email" placeholder="email" />
  <br>
  <input type="password" placeholder="password" />
  <br>
  <label>Mostrar</label>
  <input type="checkbox" onchange='show(this)' />
  <br>
  <input type="text" placeholder="otro" class="hide" style="display:none;">
  <input type="xd" placeholder="otro" class="hide" style="display:none;">
  <input type="submit" value="enviar" />
</form>
<script>
  function show(bool) {
    var formset;
    if (bool.checked == true) formset = "block";
    else formset = "none";

    var elements = document.querySelectorAll(".hide");
    elements.forEach(function(name, index) {
    elements[index].style.display = formset;
    });


  }
</script>

    edited code

    • 1