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
Related
I'm making multiple fields with drop downs in them. When I click my checkbox to disable the fields, the dropdown fields have a lighter colour on both the text field background and the text itself when compared to the text (non-dropdown) fields. Any idea how to make the colours as the same?
My code looks like this:
<form
v-on:submit.prevent
:disabled="isDisabled(option)"
>
<div class="right">
<button class="button default link small">
<input
type="checkbox"
v-model="index.Enabled"
#change="formUpdated('', index)"
>
<label :for="`status-${index}`">Enabled</label>
</button>
</div>
<div class="row">
<label class="bold">thing</label>
</div>
<div class="clg5 cmd6 csm8 cxs12">
<select v-model="thing.thing2"
:disabled="isDisabled(option)"
#keydown.enter="$event.stopPropagation()"
>
<option disabled value="">Please select one</option>
<option>option 1</option>
<option>option 2</option>
</select>
</div>
</div>
</form>
It's hard to customize the select element.
How about use Bootstrap Dropdown?
https://getbootstrap.com/docs/4.0/components/dropdowns/
I would like to be able to edit a multi-select field when ("Update Data?") Checkbox is checked, and disabled the field again, when checkbox is un-checked.
Important is that checked status always leads to being able to edit, meanwhile un-checked means field is disabled, regardless if I load the form with a checked box or as un-checked as the initial state (I can save either or)
I find several useful answers but struggling with syntax to combine those into my solution.
Below can toggle once, then it gets stuck:
$(function() {
$("#checkbox1").change(function() {
if ($("#field2").attr('disabled', !this.checked)) {
$("#field2").removeAttr("disabled");
} else {
$("#field2").attr("disabled", "disabled");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="div_id_product" class="form-group row"> <label for="field2" class="col-form-label col-sm-4">
Multiselect
</label>
<div class="col-sm-7">
<select name="multiselect" class="select2-show-search selectmultiple form-control" id="field2" disabled="disabled" multiple style="width: 100%;">
<option value="1" selected>Product 1 </option>
<option value="3" selected>Product 3</option>
<option value="2">Product 2</option>
</select>
</div>
</div>
<div class="form-group row" id="checkbox1"> <label for="id_to_update" class="col-form-label col-sm-4">
Update Data?
</label>
<div class="col-sm-7">
<div class="input-group"> <input type="checkbox" name="to_update" class="checkboxinput" id="id_to_update"> <span class="input-group-append"></span> </div>
</div>
</div>
</form>
Just change your JS to this. You have the change listener on the wrong id.
The listener should be on #id_to_update (input) instead of #checkbox1 which is the div.
$(function() {
$("#id_to_update").change(function() {
$("#field2").prop('disabled', !this.checked);
});
})
Here is the solution you are looking for
$(function() {
$('#field-editable').change(function() {
$('#firstname').prop('disabled', !this.checked);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<label for="field-editable">
<input type="checkbox" id="field-editable">
do you want to edit
</label>
<input type="text" name="firstname" id="firstname" disabled="disabled">
</form>
I have a form built with semantic-ui and I need to make a few fields appear conditionally, in case a specified selection is made.
Here's the html code:
<div class="field">
<label>Pay Mode</label>
<div class="ui selection dropdown" id="paymode">
<input type='hidden' name='pay_mode'>
<i class="dropdown icon"></i>
<div class="default text">Pay Mode</div>
<div class="menu">
<div class="item" data-value="free">Free</div>
<div class="item" data-value="stand alone">Stand alone</div>
<div class="item" data-value="central system">Central System</div>
</div>
</div>
</div>
<div class="conditional">
<div class='three fields'>
<div class='field'>
<label>A1</label>
<input
type='text'
name='a1'
value=''
required
/>
</div>
<div class='field'>
<label>A2</label>
<input
type='text'
name='a2'
value=''
required
/>
...
So basically, the condition is the Pay Mode. The class "conditional" only has to show up if "Stand alone" is selected at Pay Mode.
Here's my js file:
$('.conditional').hide();
$('#paymode').change(function () {
var selected = $('#paymode item:selected').text();
$('.conditional').toggle(selected == "Stand alone");
});
This successful hides the conditional class, but the same class does not show up even if Stand alone is selected as an option.
What is wrong with this code? Many thanks!
I found a solution.
Slightly modify the Pay Mode dropdown field like this:
<div class="field">
<label>Pay Mode</label>
<select name="pay_mode" class="ui fluid dropdown" id="condition">
<option value="">Pay Mode</option>
<option value="free">Free</option>
<option value="stand alone">Stand alone</option>
<option value="central system">Central System</option>
</select>
</div>
And the js file like this:
$('.conditional').hide();
$('#condition').change(function () {
var selected = $('#condition option:selected').text();
$('.conditional').toggle(selected == "Stand alone");
});
it works like a charm!
I'm trying to find see if we can make a checkbox selected if we chose an option from the dropdown menu. Here's a mock-up code of what I'm trying to modify.
$('.stackoverflow').on('change', function() {
$(this).parent().next().find('input:checkbox').attr("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>
I'm trying to have the checkbox "checkbox" be selected if I do select an option from the dropdown menu. Is there an easy way to do this? When searching stackoverflow, the closest thing that I found was to have the next one be selected and not the current one. Thank you very much for any help at all.
Just reference the correct checkbox correctly?
In your case, you have this:
$(this).parent().next().find('input:checkbox').attr("checked", true);
this refers to the select
parent refers to <div class="checkbox_wrapper">
next would then refer to <div class="checkbox_wrapper">
and finally find('input:checkbox') would find: <input
type="checkbox" id="not this one" />
Since the checkbox you want is a child of the same parent element that the select is in, the next() method call is what's causing the problem.
So, you could write:
$(this).parent().find('input:checkbox').attr("checked", true);
But, there are many ways to access an element. If it has an id, that is the simplest and most efficient way. So you are better off writing:
$('#checkbox').prop("checked", true);
Also, use .prop instead of .attr as .attr fails when you manually uncheck the checkbox and then select an item from the drop down.
$('.stackoverflow').on('change', function() {
$('#checkbox').prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>
You have a couple of options to check the checkbox:
$(document).ready(function() {
$(".stackoverflow").on("change", function() {
//$("#checkbox").prop("checked", true);
$(this).prev("input[type='checkbox']").prop("checked", true);
})
})
Here is a fiddle of it working based on your example: https://jsfiddle.net/gz6mab4k/
Hurray, you are using the relative position of your dom elements to locate each other. I assume that's because you're going to get rid of all the IDs and add this structure many times to your page. So you have a small error in the javascript handler, as mentioned in a comment you break stuff by having .next(), which will force the handler to look for a checkbox in the div coming after the select's parent which is the one that contains checkbox id='not this one'. So you want:
$('.stackoverflow').on('change', function() {
$(this) // the select
.parent() // its parent DIV
.find('input:checkbox') // the only checkbox in the parent div
.attr("checked", true);
});
I am trying to hide a certain form when a certain value from a different dropdown box from the page is selected.
I have a dropdown box defined in jsp like:
<div class="col-lg-4">
<select id="gasGrade">
<option value="0" label="unleaded"></option>
<option value="1" label="premium"></option>
<option value="2" label="super premium"></option>
</select>
</div>
On the page, whenever user selected option value 2 (super-premium) from that box, I want some buttons to disappear.
I want this form to disappear:
<div class="form-group col-lg-4 <c:if test="$('#gasGrade').val()=='2'"> hidden </c:if>" id="pay">
<div class="col-lg-4">
<input type="radio" name="pay" value="0">visa<br>
<input type="radio" name="pay" value="1">amex<br>
<input type="radio" name="pay" value="2">cash
</div>
</div>
However, this snippet of code inside the div class is not working:
<c:if test="$('#gasGrade').val()=='2'"> hidden </c:if>"
Furthermore, I've tried
<c:if test="${gasGrade} == '2'"> hidden </c:if>"
And several other variations of this. What is the correct syntax to use the value from another input field on same page to hide a form?