"Submit name for homepage codeuix"
Bootstrap 3.3.0 Snippet by rajesh123456

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body class="bg-for-submit-name"> <div class="container"> <div class="row"> <span class="image-position"><a href="https://www.facebook.com/meuix/?ref=settings" target="_blank"> <img src="https://lh4.googleusercontent.com/fLEIj3iQb7O1FhjOpLFbJtHmsMlLGmLynSWUvAP70qF0HLEBty-FANvwweg7Sv2XqSpzOKNI=w1366-h638"></a> </span> </div> <div class="row margin-top"> <div class="col-md-12"> <div class="wrap"> <p class="form-title Arabella"> Before start with quiz please submit your name </p> <form class="login" id="theFormID" action="quiz.html"> <input type="text" id="theFieldID" placeholder="Type your name..."/><br> <button type="submit" class="btn btn-success" id="submit_on">SUBMIT YOUR NAME</button> </form> </div> </div> </div> </div> </body>
body, html{ height: 100%; background: #222222; font-family: 'Lato', sans-serif; } .image-position{ position: absolute; left: 3%; } .image-position img{ width: 70%; } .center-block{ width: 100%; } h2 { color: #AAAAAA; font-weight: normal; } .bg-for-submit-name { background-size: cover; padding: 0; margin: 0; } .margin-top{ margin-top: 150px; } .wrap { width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } p.form-title { font-family: 'Open Sans' , sans-serif; font-size: 20px; font-weight: 600; text-align: center; color: #FFFFFF; margin-top: 5%; text-transform: uppercase; letter-spacing: 4px; } form { width: 250px; margin: 0 auto; } form.login input[type="text"], form.login input[type="password"] { width: 100%; margin: 0; padding: 5px 10px; background: #fff; border: 0; border-bottom: 3px solid #75ba48; outline: 0; font-size: 15px; font-weight: 400; letter-spacing: 1px; margin-bottom: 10px; color: #000; outline: 0; } form.login input[type="submit"] { width: 100%; font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 16px; outline: 0; cursor: pointer; letter-spacing: 1px; } form.login input[type="submit"]:hover { transition: background-color 0.5s ease; } .btn-success { color: #fff; background-color: #75ba48; border-color: #75ba48; width: 100%; /* font-weight: 600 !important; */ padding: 7px 10px; font-size: 15px !important; border-radius: 0px; word-spacing: 4px; letter-spacing: 1px; } .btn-success:hover { color: #fff !important; background-color: #2FC0AE !important; border-color: #2FC0AE !important; } form.login label, form.login a { font-size: 12px; font-weight: 400; color: #FFFFFF; } form.login a { transition: color 0.5s ease; } form.login a:hover { color: #2ecc71; }
//showing cursor onload the file theFormID.theFieldID.focus(); $(document).ready(function(){ // Showing disable button writing a text in input field $(document.body).on('input','#theFieldID', function(){ // console.log($(this).val()); if($(this).val() != "") { $('#submit_on').attr('disabled',false); } else{ // alert('asd'); $('#submit_on').attr('disabled',true); }; }); });

Related: See More

Rotating CSS Card

Questions / Comments: