1. Sending AJAX form with attachments (which works on IE9 )
I found this JQuery pugin http://malsup.com/jquery/form/ with decent documentation which meet the requirements.
Quick Start Guide
Add a form to your page. Just a normal form, no special markup required:
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
Include jQuery and the Form Plugin external script files and a short script to
initialize the form when the DOM is ready:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
2. Date picker with options (which works on IE9 )
The answer is Datepicker from JQuery UI: https://jqueryui.com/datepicker/You may want to stop the user to insert data directly in the input field manually, this can be archived by setting 'readonly' parameter to 'true'. The problem is that the field looks disabled all the time, you may encounter some users thinking that they should not click on that input field.
Solution: make the input field readonly when the user clicks on it and after closing the Datepicker the input field will be made again writable ('readonly' set to 'false').
beforeShow: function(input, inst) {
$(input).attr('readonly', true);
},
onClose: function(dateText, inst) {
$(this).attr('readonly', false);
}
3. HTML 5 Placeholder working on IE9 (make sure not to send default values when submitting the form)
https://github.com/parndt/jquery-html5-placeholder-shim
Usage
Just include thejquery.html-placeholder-shim.js script into your document head like so:<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.html5-placeholder-shim.js'></script>
</head>
$(document).ready
event and can be re-executed at any time (for example, to add
placeholders to text boxes created during dynamic changes to the page)
by running $.placeholder.shim();.HTML5 placeholder Example:
<input type="search" placeholder="search the internets" name="query" />
4. Searchable Drop down list
http://harvesthq.github.io/chosen/Also Bootstrap theme for Chosen: https://github.com/dbtek/chosen-bootstrap
If you form is dynamically loaded you can use it like this:
<script>
$( document ).ajaxComplete(function() {
$.placeholder.shim();
$("#select_input").chosen();
});
</script>
