dismiss input field

This bootstrap snippet called "dismiss input field" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: input,field

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="container bootstrap snippet">
  <div class="row">
        
    <div class="col-lg-6 col-lg-offset-3">
      <label for="">Please write something and click go</label>
    </div>
    
    <div class="input-group col-lg-6 col-lg-offset-3">
       <input type="text" class="form-control" id="cyrillic-input">
       <span class="input-group-btn">
          <button class="btn btn-default" id="go-btn" type="button">Go!</button>
       </span>
    </div><!-- /input-group -->    

    
    <div class="col-lg-6 col-lg-offset-3">
      <h4 id="utf-result">result:</h4>
    </div><!-- /.col-lg-6 .col-lg-offset-3  -->
    
    <div class="col-lg-3">
    </div><!-- /.col-lg-3  -->  
    
    <div class="col-lg-6 col-lg-offset-3">
      <img class="thumbnail img-responsive" id="dumy-img" src="http://dummyimage.com/350x350/5bc0de/fff&amp;text=bootdey.com" title="http://dummyimage.com/350x350/5bc0de/fff&amp;text=">
    </div><!-- /.col-lg-6 .col-lg-offset-3  -->
    
    <div class="col-lg-3">
    </div><!-- /.col-lg-3  -->     
  
  </div><!-- /.row -->
</div><!-- /.container -->

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection


				                
body{margin-top:20px;}				              
                                    

Javascript/Jquery code

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection

$('#go-btn').click(function () {
    var btn = $(this);
    var input = $("#cyrillic-input").val();
   
    input = encodeURIComponent(input);
 
    var utf = input.replace(new RegExp("%",'g'), "0x");
    
    $('#utf-result').text(utf);
  
    var dummyImage = $('#dumy-img');
    dummyImage.attr("src",dummyImage.attr("title") + utf);
}); 

About this snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: May 24th 2014, 00:42

Views: 2.7K

Rated 5/5 based on 2 reviews