If you ever saw how products like Microsoft CRM look like you probably noticed there are input fields that have "embedded" image buttons inside them. If your clients saw that, there is a probability that they will want to have it in their applications.
Whether you agree or not, here is how you can do it easily. So easily that you will have to add just a few lines of code and enable this feature in entire application.
Download source code View live demo
If you want to add some functionality to some input field (like adding a calendar icon that will popup some calendar), you would probably do it like on the image below.
The code could look like this:
<fieldset id="sampleForm">
<label for="txtName">Full name</label>
<input id="txtName" type="text" />
<label for ="txtDOB">Date of birth</label>
<input id="txtDOB" type="text" class="inputWithImge" />
<img src="calendar.png" alt="Click to popup the clendar!" onclick="alert('Popup some calendar here!');" />
<label for="txtCity">City</label>
<input id="txtCity" type="text" />
<label for="txtPostCode">Post code</label>
<input id="txtPostCode" type="text" />
<label for="txtCountry">Country</label>
<input id="txtCountry" type="text" />
<label for="txtBank">Bank</label>
<input id="txtBank" type="text" class="inputWithImge" />
<img src="bank.png" alt="Click to popup the bank window!" onclick="alert('Popup some window here!');" />
</fieldset>
<button id="btnNothingToDo">Do nothing</button>
And we could have CSS classes like these:
body { font-family: Arial, Helvetica, Sans-serif; font-size:13px;}
#sampleForm label { display:block; margin-top:10px;}
#sampleForm input[type="text"] { width:200px; border:solid 1px #000; padding:3px 0px;}
#sampleForm img { vertical-align:middle; cursor:pointer; }
However, your clients want it to be like on the image below. Image button has to be a part of an input field and everything has to be aligned.
So what could you do? You can wrap input field and image button in some div and set black border to that wrapper div. You will also have to remove border form input field, and make it a little bit shorter, so that image can fit inside the wrapper div.
But if you work on applications that have tens of forms, there is a probability you will have to do this tens or even hundreds of times. Insane, really.
But, remember jQuery?
You can add just one line of the code to make it work on all of your pages. Ok, here is the explanation so pay attention because this might sounds tricky.
We want to find a set of two elements (input field and image) that repeats in the fieldset and wrap it inside the div. How to find these sets? This is what jQuery will do. We'll assign a class to each input field that we want to wrap. That class will also remove border form input field. So, here is the HTML code:
<fieldset id="sampleForm">
<label for="txtName">Full name</label>
<input id="txtName" type="text" />
<label for ="txtDOB">Date of birth</label>
<input id="txtDOB" type="text" class="inputWithImge" />
<img src="calendar.png" alt="Click to popup the clendar!" onclick="alert('Popup some calendar here!');" />
<label for="txtCity">City</label>
<input id="txtCity" type="text" />
<label for="txtPostCode">Post code</label>
<input id="txtPostCode" type="text" />
<label for="txtCountry">Country</label>
<input id="txtCountry" type="text" />
<label for="txtBank">Bank</label>
<input id="txtBank" type="text" class="inputWithImge" />
<img src="bank.png" alt="Click to popup the bank window!" onclick="alert('Popup some window here!');" />
</fieldset>
<button id="btnNothingToDo">Do nothing</button>
and this is what jQuery has to do:
$(document).ready(function() {
$(".inputWithImge").each(function(){
$(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
});
});
All that is left to do is to add two more classes that will define styles for our wrapper div and input field that will be wrapped.
.imageInputWrapper{ width:200px; border:solid 1px #000; }
#sampleForm input.inputWithImge { width:175px; border:none; margin-right:5px;}
Download source code View live demo
Pretty simple, eh? Maybe. Maybe this could be done even simpler. Any ideas?