I'm using the bootstrap-datetimepicker in a form with a radio button, and I'm having a lot of issues with it. The first problem is that only the old version of it is working for me, not the current one, but that's okay (though I'd like to know why). The bigger problem is that the layout is messed up: the little square with the calendar icon is bigger that the input textbox, like this:
I have several forms like this, and in some of them, the layout recovers when I replace the "name" attribute of the textbox with "id." That doesn't work for all forms though, and if I understand it correctly, I shouldn't use "id" with forms anyway. Taking it out completely also helps sometimes, but I need it to get the input for my form.
I created a JSFiddle with my code, but it doesn't seem to work properly. Eonasdan's sample JSFiddle is slightly different from mine.
Here's my HTML code:
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<div class="radio">
<div class="textlikelabel">Question? *</div>
<label><input value="answer1" type="radio" name="answers" required="required">Answer 1</label>
</div>
<div class="radio">
<label><input value="answer2" type="radio" name="answers" required="required">Answer 2</label>
</div>
<div class="radio">
<label><input value="answer3" type="radio" name="answers" required="required"/>Specific date:
<div class="input-group date" id="datetimepicker2"> <input type='text' class="form-control" name="answer3text"/>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</label>
</div>
</div>
</div>
And here's the JavaScript:
$('#datetimepicker2').datetimepicker({
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
} });
Any idea what I'm doing wrong?? I'd appreciate your help!
You should avoid nesting the input-group inside of a label as well as the parent radio div. It is inheriting the undesired styling as a result.
<div class="radio">
<label><input value="answer3" type="radio" name="answers" required="required" />Specific date:</label>
</div>
<div class="input-group date" id="datetimepicker2">
<input type='text' class="form-control" name="answer3text" />
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
Your JS fiddle also had a broken link to the font awesome css file
See: http://jsfiddle.net/spasticdonkey/1o3b3b1o/2/
Note you should be using the latest version of the datetimepicker script, no reason the older script should be working better for you.
Related
I am using https://github.com/erayakartuna/pdf-flipbook, I want to implement search functionality for this, I did check out some other solution on stackoverflow but looks like viewer.js is customized in this library.
I would like to get any help possible on this issue.
It does finds the matches as the count shows that but it does not goes to the page when I click on next match button.
Thanks.
Previous
Next
<div id="findbarOptionsOneContainer">
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
</div>
<div id="findbarOptionsTwoContainer">
<input type="checkbox" id="findEntireWord" class="toolbarField" tabindex="96">
<label for="findEntireWord" class="toolbarLabel" data-l10n-id="find_entire_word_label">Whole words</label>
<span id="findResultsCount" class="toolbarLabel hidden"></span>
</div>
<div id="findbarMessageContainer">
<span id="findMsg" class="toolbarLabel"></span>
</div>
</div> <!-- findbar -->
I am currently trying to make an entire Bootstrap input-group to be able to clickable so that the checkbox will be clicked when any part of the input-group is clicked, and it should be able to uncheck the checkbox as well when the input-group is clicked. The current code I have working right now is this:
$(document).ready(function(){
$('.input-group,#opt_in').click(function(){
if ($('#opt_in').is(':checked')) {
$('#opt_in').prop('checked', false);
}
else{
$('#opt_in').prop('checked', true);
}
});
});
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" name="opt_in" id="opt_in" value="true">
<label class="form-check-label">I CONFIRM</label>
</div>
</div>
<p class="form-control" aria-label="Text input with checkbox" id="consent">that all of my info is accurate and consent to be called as provided above</p>
</div>
But for some reason that I am unaware of, it's not working. Any reason why? I'm using jQuery here but I can also use vanilla javascript. I'm just not sure where my code is freaking out!
I'm using i18next to translate my form. It works fine but I have problems with nested items, for example:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
</div>
</div>
After applying the translation, the actual HTML code is like this:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
translated value (no more <input> tag!)
</label>
</div>
</div>
It overwrites the innerHTML with the translation string.
Instead I need to "save" existing items and append the translation after them.
What is the correct use of i18next on a checkbox form entry?
I had the same problem and I solved it like this:
$('[data-i18n]').each(function each() {
const el = $(this);
const contents = el.contents();
el.text(i18n.t($(this).attr('data-i18n')))
.append(contents);
});
Edit:
The above is oversimplifying the problem because, as you pointed out, it won't work for custom attributes.
Therefore I searched a bit more and I found out it's already supported by jquery-i18next#append-content like this:
<label class="form" data-i18n="[append]form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
You can either specify a custom attribute or one of the special attributes like prepend, append, etc. to specify where you want the translated text to appear. More info on jquery i18next doc
Example on jsfiddle
I solved in this way:
<div class="checkbox">
<label class="form">
<input id="input_flag2" type="checkbox" name="disclaimer2" value="true" required>
<span data-i18n="form.checkbox"></span>
</label>
</div>
The span tag does the trick, embedding the translated content.
I have a simple checkbox list on my website.
What I need is: when the user clicks on one or two selections, the page reloads just showing images related of the selection the user made and hiding all the rest.
I don't want the whole page to reload, just the body which is where my divs are.
To make my point clear, here is an example:
http://www.entel.pe/personas/catalogo-equipos/
On the vertical bar at the left, click on "Marcas" , and then if you click on one or two selections on that list, you will see only one block of the site loads and hides all the pictures in the right except the ones related to your selection.
<!-- language: lang-html -->
<div class="brands_products"><!--brands_products-->
<h2>Marcas</h2>
<div class="brands-name">
<ul class="nav nav-pills nav-stacked">
<div class="clearfix">
<input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox" >
<span class="pull-right">(50)</span>
<label class="margen-left-5 flotar-izq padding-top-2">Accer</label>
</div>
<div class="clearfix">
<input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
<span class="pull-right">(10)</span>
<label class="margen-left-5 flotar-izq padding-top-2">Apple</label>
</div>
<div class="clearfix">
<input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
<span class="pull-right">(8)</span>
<label class="margen-left-5 flotar-izq padding-top-2">HP</label>
</div>
<div class="clearfix">
<input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
<span class="pull-right">(27)</span>
<label class="margen-left-5 flotar-izq padding-top-2">Lenovo</label>
</div>
<div class="clearfix">
<input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="19" type="checkbox">
<span class="pull-right">(30)</span>
<label class="margen-left-5 flotar-izq padding-top-2">Sansung</label>
</div>
<div class="clearfix">
<input id="ffc-telefonia-movil-19" name="ffc-tipo-equipo[]" class="checkbox" value="50" type="checkbox">
<span class="pull-right">(19)</span>
<label class="margen-left-5 flotar-izq padding-top-2">Sony</label>
</div>
</ul>
</div>
</div><!--/brands_products-->
Any help will be appreciated. Thanks!
Yes, you're looking for AJAX. The basic idea is that you watch for an event from your checkbox. (Examples assume you're using jQuery.)
$('input[type=checkbox]').change(function() { //when checked or unchecked... });
And depending on the change you call new content onto the page and replace the existing content. (http://api.jquery.com/jquery.ajax/)
$.ajax({
url: "newContent.html",
context: document.body
}).done(function( html ) {
$( '#main_section' ).html( html );
});
Generally speaking, this means that you need to have the alternative content remotely available. Either on another page on your server or in a database somewhere.
You need to use Ajax to do the request for the new images rather than loading the images on load you can dynamically pull these images and data from the DB using jquery and ajax.
You can google examples or check how to do it on here.
I'm using bootstrap and I find it confusing when trying to extract the label name. How do I get the selected label text? (e.g. Furniture or Fruits)
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval1" /></span>
<input class="form-control" value="Furniture" disabled>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="radioGroup" value="myval2" /></span>
<input class="form-control" value="Fruits" disabled>
</div>
I tried these but did not give the label text:
alert($( $(":radio[name=radioGroup]:checked").prop("labels") ).text());
alert($('input[name="radioGroup"]:checked').text());
alert($('input[name="radioGroup"]:checked + label').text());
In your scenario you just need to get the value of selected radio button.
For your better understanding have a lookto this JS Fiddle link
You can use the selected DOM element as::
alert($("input[name='radioGroup']:checked").closest(".input-group").find(".form-control").val())
Try using .val() then follow the tree from the checkbox up to its containing div and back down to the value in the associated input.
alert($("input[name=radioGroup]:checked").parent(".input-group-addon").parent(".input-group").children("input.form-control").val());
You can try this...
$('input[name="radioGroup"]:checked').parents('.input-group').find('.form-control').val()
OR
$('input[name="radioGroup"]:checked').parent().next().val()