Develop Reference

Set labels of radio button group dynamically based on values selected in drop down lists

I have an html form with 4 form elements - 3 drop down lists and one group of radio buttons.
I want the label of the radio buttons to be set dynamically based on the values selected in the drop down lists.
Ex- The values selected in the drop down lists are q-tip, hold and h1 rspectively.
So, the labels in the radio button group (Direction) should be:
First radio button - q-tip hold h1.
Second radio button - h1 hold q-tip
This is the jsfiddle link : http://jsfiddle.net/coderr/yznf1qk3/22/
<div style="float:left;">
<h5>Object</h5>
<select name="object" id="object">
<option value="q-tip">q-tip</option>
<option value="o2">o2</option>
</select>
</div>
<div style="float:left;">
<h5>Action</h5>
<select name="action" id="action">
<option value="hold">hold</option>
<option value="a2">a2</option>
</select>
</div>
<div style="float:left;">
<h5>Person</h5>
<select name="humann" id="human">
<option value="h1">h1</option>
<option value="h2">h2</option>
</select>
</div>
<fieldset>
<legend>Direction</legend>
<input type="radio" name="direction" value="towards">q-tip hold h1<br>
<input type="radio" name="direction" value="away">h1 hold q-tip<br>
</fieldset>

You need to add some HTML to make it easier to access the text
$("#selects").on("change",function() { // any change of selects
const dirs = $(this).find("select").map(function() { return this.value }).get(); // get the values in an array
const $rads = $("[name=direction]"); // the radios
$rads.eq(0).next().text(dirs.join(" ")); // update the span after the radio - I wrapped in label too
dirs.reverse(); // reverse the array
$rads.eq(1).next().text(dirs.join(" ")); // add to the second radio span
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="selects">
<div style="float:left;">
<h5>Object</h5>
<select name="object" id="object">
<option value="q-tip">q-tip</option>
<option value="o2">o2</option>
</select>
</div>
<div style="float:left;">
<h5>Action</h5>
<select name="action" id="action">
<option value="hold">hold</option>
<option value="a2">a2</option>
</select>
</div>
<div style="float:left;">
<h5>Person</h5>
<select name="humann" id="human">
<option value="h1">h1</option>
<option value="h2">h2</option>
</select>
</div>
</div>
<fieldset>
<legend>Direction</legend>
<label><input type="radio" name="direction" value="towards"><span>q-tip hold h1</span></label><br>
<label><input type="radio" name="direction" value="away"><span>h1 hold q-tip</span></label><br>
</fieldset>

How to make the image as default using image-picker.js?

i'm using image-picker.js
How to make the image as default?
<!-- / select number of pet-->
<div class="select-pets text-center">
<p>Select Your Pet</p>
<div>
<select multiple="multiple" class="image-picker show-labels show-html">
<option data-img-src="assets/img/pets/cat1.png" data-img-class="first" data-img-alt="Ricky" value="1" class="stretched-link "> Ricky </option>
</select>
</div>
</div>
<!--/ select number of pet -->
https://rvera.github.io/image-picker/
before tick
after tick

Which dropdown item and checkbox are selected if button clicked?

I have a dropdown list like this:
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
when a client select each one, some related check-boxes will appear. each item has got its own check-boxes. for example when they select mp3, check-boxes appear like this
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Storage</label>
</div>
</div>
And have a button at the end
<button class="ui blue basic button" id="search">Search</button>
what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked?

Need to say, that SO is not a free code-writing service, so you have to provide what did you try, but for the first time it's OK, just notice that.
Here is what you're trying to achieve:
function whichIsSelected() {
var checkedArr = [];
var dtopdownVal = $("#product").val();
$("input[type='checkbox']").each(function() {
if($(this).prop("checked")) {
checkedArr.push($(this).prop("name"));
}
});
alert(`Selected item from dropdown: ${dtopdownVal}. Checked checkboxes: ${checkedArr}`)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="Price">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Weight">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Storage">
<label>Storage</label>
</div>
</div>
<button class="ui blue basic button" id="search" onclick="whichIsSelected()">Search</button>
<!-- what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked? -->
At first, I'm just getting the dropdown value via $("#product").val();. Then, I select all checkboxes via $("input[type='checkbox']"), then, I iterate through selected checkboxes via .each() and pushing name property of only checked checkboxes to checkedArr array. And finally I'm showing the info with simple alert.

You can see this solution https://jsfiddle.net/dpdvmh8x/1/
Read more:
https://api.jquery.com/click/
https://stackoverflow.com/a/1965137/6063698

bootstrap validator with bootstrap select not working

I have a form with few input fields and select menus. I'm using bootstrap select plugin for select menus. Link
So I just completed all things and applied bootstrap validation using this plugin. Link and it's working fine except select menus.
When I click the select menu and click out side ( without selecting menu items ) It didn't do anything. Normally it should change border color and give error message like this. "Please fill out this field." But when I click submit, it working fine. After that I removed bootstrap selectpicker plugin. Then it worked fine. I'm thinking that there are conflicts with both two plugins. Please see example images.
Click select menu and outside click(not working)
Click form submit and working fine.
And I tried with this code but no luck. I need to show an error message when someone click select menu and if he doesn't choose anything and click outside like input fields. What is the best solution for this?
Here is an example
jsbin
<form data-toggle="validator">
<div class="form-group">
<label for="select" class="control-label">Title</label>
<div class="form-input">
<select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
<option value=""></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
<option value="5">Dr</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
$('.select').on( 'hide.bs.select', function ( ) {
$(this).trigger("focusout");
});

You are handling the hide.bs.select event on the select class that is not on your select input. Try with .selectpicker instead :
<form data-toggle="validator">
<div class="form-group">
<label for="select" class="control-label">Title</label>
<div class="form-input">
<select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
<option value=""></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
<option value="5">Dr</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
$('.selectpicker').on( 'hide.bs.select', function ( ) {
$(this).trigger("focusout");
});
Here is the updated jsbin

You have to use ".selectpicker".
Maybe it will helps you to solve yout issue:
http://formvalidation.io/examples/bootstrap-select/

Multiple Selectboxes focuses first select box

I've got three selectboxes in a fieldset.
Everything worked fine but after the new firefox update there's a problem.
When I click on the second or third selectbox it closes the dropdown and focuses the first selectbox. I have already disabled js and in the css there's only a border styling on focused element.
Any ideas?
<fieldset><div><label>Geburtsdatum:
<input type="hidden" value="" id="birthDate" name="lottery.birthDate">
<div class="clearfix"></div>
<select id="bDay" name="bDay">
</select>
<select id="bMonth" name="bMonth">
</select>
<select id="bYear" name="bYear">
</select>
<div class="clearfix"></div>
</label></div></fieldset>
I've deleted the optionlists.
Got any Idea?
This bug is only the latest firefox version.
Regards.

Move closing label tag after Geburtsdatum:
<fieldset><div><label>Geburtsdatum:</label>
^^
<input type="hidden" value="" id="birthDate" name="lottery.birthDate">
<div class="clearfix"></div>
<select id="bDay" name="bDay">
</select>
<select id="bMonth" name="bMonth">
</select>
<select id="bYear" name="bYear">
</select>
<div class="clearfix"></div>
</div></fieldset>