Javascript hide HTML text if input box is not filled

Question

I have an HTML form where users are able to input their mobile number. See below:

<form class="formulario" action="signature_test.html" method="get" onsubmit="return signature_Alert()" >
        Mobile (mgrs):  <input type="text" name="mobile" id="mobile"><br>
        <br>
        <input type="submit" value="Generate Signature">
</form>

Whatever the user enters, is then populated in another HTML file. It innerHTML the text "Default":

<font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>

However, I would like that if the user leaves the mobile field blank, to have the "Mobile:" and the "Default" not displayed. Is that possible with Javascript?

By the way, this would be the Javascript that innerHTML the "Default" text.

<script>      
      var values = window.location.search.substring(1).split('&')
      var mobile = values[3].split('=')[1]
      document.getElementById('mobileInput').innerHTML = mobile;
</script>

Thanks.

 is deprecated, you should use  with style attribute, or use classes. — Barmar
– Barmar, Commented Jan 18, 2018 at 19:38
Can you provide an example? I tried the following: Mobile: Default . It didn't return the function. — Patriots299
– Patriots299, Commented Jan 18, 2018 at 19:40
well in this case according to your example the form just should not be submitted? Or you have more other fields in the form? Anyway, you can just add a condition that if mobileInput value = 'default', then you just hide this entire or (you should change to either of these as per above comment) with setting css visibility to hidden. can draft a code if needed — Zerus
– Zerus, Commented Jan 18, 2018 at 19:41
what does the variable mobile look like when the user doesn't enter a number? You should check for that case and if its empty remove the mobileInput tag and add a tag around Mobile and remove it too — Andrew L
– Andrew L, Commented Jan 18, 2018 at 19:42
If the user doesn't enter a value. It appears blank: it replaces the "Default" text with blank. But I would also like the "Mobile:" to not appear at all. — Patriots299
– Patriots299, Commented Jan 18, 2018 at 19:43

David · Accepted Answer · 2018-01-18 19:43:42Z

Sure, just wrap the content in an element you can target and modify:

<span id="mobileInputContainer">
    <font color="#008080">Mobile: </font></b><font id="mobileInput">Default </font><br>
</span>

Then just adjust that element's style similar to how you already adjust another element's content:

if (mobile.length < 1) {
    document.getElementById('mobileInputContainer').style.display = 'none';
}

You'd of course want to double-check the actual value you're getting for mobile in your code. Make sure it doesn't have whitespace, etc. Or really tweak whatever your logic is for determining that no value is present to display. But the actual act of hiding the element is simple, just set the style to be hidden.

Additionally, I'd like to echo a comment above.  tags really shouldn't be used anymore. You'll find a little bit of an introduction to CSS styling can go a long way here. I recommend some introductory tutorials on the subject.

You also appear to have an errant  in your code. Perhaps you're not showing us the entire content. Either way, you'll want to double-check your HTML as well. Always start with valid and well-formed HTML before using any JavaScript or CSS, or behavior may not be what you expect.

Collectives™ on Stack Overflow

Javascript hide HTML text if input box is not filled

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related