Matt Hutch Matt Hutch - 2 months ago 13
HTML Question

Remove Footer When Focused on Textbox Not Working?

all i'm trying to do here is remove my footer when either of my textboxes have focus. I'm using jquery to attempt to do this. So at the moment I have two textboxes the first works perfectly. Now the second textbox doesn't do either when focused or unfocused. Anyone know where I'm going wrong here?

Textbox 1 HTML

<div id="inputAreaTextbox">
<input type="text" id="textbox" name="username" class="tbinputArea" placeholder="Username" autocomplete="off">
</div>


Textbox 2 HTML

<div id="inputAreaTextbox">
<input type="password" id="textbox" name="password" class="tbinputArea" placeholder="Password" autocomplete="off">
</div>


Footer HTML

<div id="footer">
<p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>


Jquery

<script src="JAVASCRIPT/jquery-3.1.0.min.js"></script>
<script>
$( "#textbox" ).focus(function() {
$("#footer").hide();
});

$( "#textbox" ).focusout(function() {
$("#footer").show();
});
</script>

Answer

jQuery #id selector docs:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

So in your jquery code Use class tbinputArea instead of id textbox :

$(".tbinputArea").focus(function() {
  $("#footer").hide();
});

$(".tbinputArea").focusout(function() {
  $("#footer").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="inputAreaTextbox">
  <input type="text" id="textbox" name="username" class="tbinputArea" placeholder="Username" autocomplete="off">
</div>

<div id="inputAreaTextbox">
  <input type="password" id="textbox" name="password" class="tbinputArea" placeholder="Password" autocomplete="off">
</div>

<div id="footer">
  <p>&copy; 2018 SulmaxCP. All Rights Reserved.</p>
</div>

Comments