COX Form

by JQ Purfect

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 coxh1">Do You Need a Modem Upgrade?</div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <p>Did you know your Internet equipment can affect your speeds? We want to make sure you have the latest equipment so you can take advantage of the fastest speeds offered with your package. Just enter your phone number or account number below to find out if you need to upgrade your modem.</p>
        </div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-sm-4">
            <img src="http://www.xdweb360.com/smartsource/images/wireless-modem.png" class="pull-right" />
        </div>
        <div class="col-sm-8">
            <div></div>
            <p class="coxh2">Look-Up By:</p>
            <p class="form" id="modemupgrade">
                <input type="radio" checked="true" name="lookup" value="Phone" /><span class="prl10">Phone Number:</span>
 <span style="float: right;"><input type="tel" placeholder="(xxx) xxx-xxxx" pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" /></span>

                <br />
                <br />
<span class="pleft75">Or</span>

                <br />
                <br />
                <input type="radio" name="lookup" value="Account" /><span class="prl10">Account Number:</span>
 <span style="float: right;"><input type="text" /></span> 
                <hr />
                <input type="image" src="http://www.xdweb360.com/smartsource/images/btn-submit.png" alt="Submit" data-toggle="modal" id="btn" data-target="#formresult" />
           ...

CSS

body {
    font-family:'Open Sans', sans-serif;
}
.container-fluid {
    margin: 0 auto;
    width: 800px;
}
.coxh1 {
    color: #2970b8;
    font-size: 22pt;
    text-align:center;
    text-transform:uppercase;
    font-weight: 500;
    line-height: 55px;
}
.coxh2 {
    color: #2970b8;
    font-size: 18pt;
    text-align:left;
    text-transform:uppercase;
    font-weight: 300;
    padding: 20px 0px 20px 0px;
}
p {
    text-align:center;
    font-size: 13.5pt;
    font-weight: 300;
}
.result {
    text-align:left;
    font-size: 11pt;
    font-weight: 300;
}
.form {
    text-align:left;
    font-size: 13.5pt;
    font-weight: 400;
}
.pleft75 {
    padding-left: 75px;
    color: #2970b8;
}
.prl10 {
    padding: 0px 40px 0px 10px;
}
.pfooter {
    padding-top: 40px
}
input[type="text"], input[type="tel"] {
    padding: 6px;
    border: 1px solid #000;
    margin-top: -10px;
}
br {
    border-bottom:0px dashed black;
    content:"";
    height: 5px;
    display: block;
}

JavaScript

$('#btn').click(function () {
    var form = $('#modemupgrade');
    var checkedValue = form.find('input[name=lookup]:checked').val();
    alert("You selected - " + checkedValue);
    $('#model-lbl').text('Speed Upgrade - {' + checkedValue + '}');
})