Question 360611 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Displaying a 'hidden' form when text input is entered and hide it text input is empty

My second form shows as soon as I type something in the input field, but I am not sure how to hide the second form if I remove the text from the input field. Any help is appreciated.

I have this code:

<input style="margin-right: 5px;" type="text6" name="outstanding1" id="outstanding"
onClick="document.getElementById('form2').style.display='';" />

<script>
  var outstanding = document.getElementById("outstanding");

  outstanding.onsubmit = function() {
    document.getElementById("form2").style.display = "none";
  };
</script>
Tags:

2

Answers


  1. 0

    Maybe you need something like this:

    <script>
    var outstanding = document.getElementById("outstanding");

    outstanding.onchange = function() {
        if(outstanding.value ==='') document.getElementById("form2").style.display = "none";

    };
</script>

    or maybe you can handle input changing by onkeydown function

    Login or Signup to reply.
  2. 0

    If the input outstanding1 is near the form that needs to show/hide you can use the Next-sibling combinator or (as in the example) the Subsequent-sibling combinator. The input outstanding1 need the attribute required to validate/invalidate the form form01.

    form[name="form01"]:invalid ~ form[name="form02"] {
  display: none;
}
    <form name="form01">
  <label>outstanding: <input type="text" name="outstanding1" required></label>
</form>
<form name="form02">
  <label>Test: <input type="text" name="test"></label>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search