Using fieldset legend with bootstrap

Fieldsets are a set or collection of input fields in a form, used on a web page to collect user data. Legends are simply titles (also known as “captions”) that are added to the fieldsets to distinguish them from each other, thus improving UX.

“Fieldsets + Legends” are usually styled with a border that wraps the fieldset elements inside it, and the legend as a title on top of it.

<fieldset class="scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label input-label" for="startTime">Start :</label>
        <div class="controls bootstrap-timepicker">
            <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

CSS is

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
   width: inherit; /* Or auto */
   padding: 0 10px; /* To give a bit of padding on the left and right */
   border-bottom: none;
   font-size: 16px;
}

This would be the output;

Reference

https://stackoverflow.com/questions/16852484/use-fieldset-legend-with-bootstrap

https://azmind.com/bootstrap-fieldset-legend/

jQuery selector change not firing

I like to fire a change event when “#btnBrowse” click event fires. Here is a sample jQuery code;

$("#btnBrowse").click(function () {
   $("#btnReset").click();
   $("#xFileUpload").click();
});

$("#xFileUpload").change(function () {
   var filename = $('#xFileUpload')[0].files[0].name;
   filename = filename.replace(/\.[^/.]+$/, "");
   //alert(filename);
   $("#xFilename").val(filename);
   fileDoc.fileName = filename;
   fileDoc.fileContnet = $("#xFileUpload").get(0).files;
 });

It turns out that click event will be registered and fired on first click only. For subsequent clicks, I have to registered a change event and triggered it like this;

$("#btnBrowse").click(function () {
   $("#btnReset").click();
   $("#xFileUpload").click().trigger("change");
});

The cons of using this approach. It will work fine for the first click but all subsequent clicks will fire a change event on click event. The reason jQuery has registered two events for the element and execute them simultaneously.

The objective is to grab file from file system. The user should be able to use same file multiple time. The best alternative to achieve this objective is to clear the contents of HTML input type rather tweaking jQuery;

This is HTML file input;

<input type="file" id="xFileUpload" name="xFileUpload" class="form-control" style="display: none" />

This is jQuery code that will clear contents of this file;

$("#btnImportReset").click(function () {
   $('#xFileUpload').val('');
});

This is your final browse script section;

$("#btnBrowse").click(function () {
   $("#btnReset").click();
   $("#xFileUpload").click();
});

Since we are clearing out HTM contents and jQuery is smart enough to figure out change. The change event will be fired this time automatically with a change in HTML file input.

Resources

https://stackoverflow.com/questions/19194177/jquery-select-change-not-firing

https://stackoverflow.com/questions/4247264/how-to-trigger-jquery-change-event-in-code