Phone Number Collecter

by Tgwizman

HTML

<div id="alert">
    <div id="alertMsg" style="display:inline-block">What is your phone number?
        <input id="number" type="tel" placeholder="123-456-7890" maxlength="13" onblur="if (/^(\(\d{3}\)\d{3}-\d{4}|\d{3}-\d{3}-\d{4}|\d{10})$/.test(this.value)) {this.style.outline='none'; return true;} else {this.style.outline='1px solid red'; return false;}" />
        <select id="provider" onchange="javascript:selectedValue(this)">
            <option value="false">Select A Provider</option>
            <option value="false">-------------------------</option>
            <option value="message.alltel.com">Alltel</option>
            <option value="mms.att.net">AT&amp;T/Cigular</option>
            <option value="myboostmobile.com">Boost Mobile</option>
            <option value="messaging.nextel.com">Sprint/Nextel</option>
            <option value="pm.sprint.com">Sprint PCS</option>
            <option value="tmomail.net">T-Mobile</option>
            <option value="mms.uscc.net">US Cellular</option>
            <option value="vzwpix.com">Verizon</option>
            <option value="vmobl.com">Virgin Mobile</option>
            <option value="other">Other Provider</option>
        </select>
        <input id="other" type="text" placeholder="my.other.provier.com" style="display:none" onblur="if (this.value) {this.style.outline='none'; return true;} else {this.style.outline='1px solid red'; return false;}" onkeychange="" />
        <input id="sumbit" type="button" value="Submit" onclick="submitNumber()" />
    </div> <span id="close" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">X</div>
</div>
<div style="padding:20px">
    Body content. This is only body content. It's just a filler. If you're still reading, I'm just letting you know that you are wasting your time reading this. This is just content that fills the body so that it looks like actual content, but this is only a test. Stop reading this, seriously. It took me five minutes to type all...

CSS

html, body, * {
    margin: 0;
    padding: 0;
    font-family: arial;
}
#alert {
    padding: 5px;
    font-size: 10pt;
    border: 1px solid #999;
    background: #FF9;
}
#alert input {
    margin: 0 5px;
}
#submit {
    margin: 0px;
    padding: 2px 5px;
    display: inline-block;
    width: 100px;
    height: 45px;
    background: #CCC;
    border: 1px solid #999;
}
#close {
    padding: 0px 3px;
    border: 1px solid #999;
    background: #CCC;
    float: right;
}

JavaScript

var number = false;
    provider = false;
    mailto = false;

function selectedValue(obj) {
    if (obj.value !== 'false') {
        if (obj.value == 'other') {
            obj.style.outline = 'none';
            document.getElementById('other').style.display = 'inline-block';
            provider = 'other';
        } else {
            obj.style.outline = 'none';
            provider = obj.value;
        }
    } else {
        obj.style.outline = '1px solid red';
        provider = 'false';
    }
}

function submitNumber() {
    var pass = true;
    if (!document.getElementById('number').onblur()) {
        pass = false;
    }
    if (!provider) {
        document.getElementById('provider').style.outline = '1px solid red';
        pass = false;
    }
    if (provider == 'other') {
        if (document.getElementById('other').value < 1) {
            document.getElementById('other').style.outline = '1px solid red';
            pass = false;
        } else {
            provider = document.getElementById('other').value + '_Other';
        }
    }
    if (pass) {
        phoneNumber = document.getElementById('number').value;
        mailto = phoneNumber + '@' + provider;
        document.getElementById('alert').innerHTML = 'Thanks! We can now use ' + mailto + ' to send you notifications on your phone.';
        setTimeout(function () {
            $('#alert').fadeOut(1000);
        }, 5000);
    }
}