1

How would I make a div (in this case, a submit button) disappear if a form input field contains just numbers. For example, I have a form like this:

<form action="submit.php" method="POST">
<input id="email" name="email" />
<input type="submit" class="btn btn-blue" id="email_btn" value="Send" />
<input type="submit" class="btn btn-blue" id="number_btn" value="Send To Number" />
</form>

If the input with the id "email" contains just numbers, (A 7 digit phone number with no dashes, "3245556347"), instead of something else, (A email address), the Send button disappears and the Send To Number remains.

Hopefully I could explain that correctly.

Thanks!

user1779810
  • 63
  • 11
  • 1
    You got multiple elements with the same id =>>> invalid HTML. please [read this question & answer](http://stackoverflow.com/q/11114622/601179), I'm tired of writing the same answer again and again. – gdoron Nov 20 '12 at 00:24
  • Im sorry, I missed that when I just put up this example, That's not how it is in my actual html. I changed it. – user1779810 Nov 20 '12 at 00:27

1 Answers1

1

This is one possibility: jsFiddle example

var email = document.getElementById('email');
email.onkeyup = function() {
    document.getElementById('email2').style.display = (this.value.search(/^\s*\d+\s*$/) != -1) ? 'none' : '';
}​
j08691
  • 204,283
  • 31
  • 260
  • 272
  • Is there any other JavaScript that I should include with this? Because as it is on jsFiddle, it did not work at all when I tried it on my server. – user1779810 Nov 20 '12 at 00:38
  • No, it doesn't need any libraries, just plain JavaScript. Note that I changed the ID of the first button. – j08691 Nov 20 '12 at 00:39
  • It won't work in the head since it's being called before the elements it needs to work on exist. It should work if placed before the closing body tag though. – j08691 Nov 20 '12 at 00:49