Form Detection

jQuery form detection

by Emily Humphrey

HTML

<form action="#">
    <div class="section about cf">
        <div class="s-title">Who Are You?</div>
        <div class="s-content cf">
            <div class="f-name">
                <span class="txt">First Name</span>
                <input type="text" id="f-name" name="f-name" tabindex="1" />
            </div>
            <div class="m-name">
                <span class="txt">Middle Name</span>
                <input type="text" id="m-name" name="m-name" tabindex="1" />
            </div>
            <div class="l-name">
                <span class="txt">Last Name</span>
                <input type="text" id="l-name" name="l-name" tabindex="1" />
            </div>
            <div class="pf-name">
                <span class="txt">Preferred First Name</span>
                <input type="text" id="pf-name" name="pf-name" tabindex="1" />
            </div>
            <div class="birth-town">
                <span class="txt">Town of Birth</span>
                <input type="text" id="b-town" name="b-town" tabindex="1" placeholder="City, State" />
            </div>
        </div>
    </div>
    <div class="section about cf">
        <div class="s-title">Date of Birth?</div>
        <div class="s-content cf">
            <select name="b-day-month">
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">Novemeber</option>
                <option value="12">December</option>
            </select>
        </div>
    </div>

</form>
<p class="info"></p>

CSS

body{
    background:#E5E1D9;
    font-family: verdana, san-serif;
}
form{
    display:block;
    width:640px;
    padding:20px;
    margin:20px auto;
    background:#fff;
}
.section{
    display:block;
    width:640px;
    margin-bottom:40px;
}
.s-title{
    font-size:14px;
    color:#81B04D;
    display:block;
    width:170px;
    margin-right:20px;
    float:left;
    text-align:right;    
}
.s-content{
    display:block;
    width:450px;
    float:left;
}
.s-content div{
    display:block;
    height:40px;
    padding:0 10px 15px 0;
    margin:0;
    float:left;
}
.s-content div .txt{
    font-size:12px;
    color:#ABABAB;
    display:block;
    padding:0 5px;
}
.s-content div input,
.s-content div select{
    color:#404040;
    font-size:18px;
    line-height:20px;
    border:none;
    border-bottom:#ABABAB solid 1px;
    padding:0 5px;
}
.s-content div input:focus{
    outline:none;
}

/* Start Section Styles
-------------------------------*/

#f-name, #l-name{
    width:140px;
}
#m-name{
    width:110px;
}
#pf-name{
    width:230px;
}
#b-town{
    width:180px;
}









.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

JavaScript

/* Displays Value in input
-------------------------------------------------------
-------------------------------------------------------

$("input#login-user").keyup(function () {
    var value = $(this).val();
    $("p.info").text(value);
}).keyup();

*/

/* Auto next input
-------------------------------------------------------
-------------------------------------------------------

$("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq( inputs.index(this)+ 1 ).focus();
});

*/

/* Auto next input
-------------------------------------------------------
-----------------------------------------------------*/

$(document).ready(function(){
        $('#zip5').keyup(function(){
            if($(this).val().length==$(this)[0].maxLength){
                $('#zip4').focus();
            }
        });
    });