Event binding between checkbox and dropdown menu - javascript

Here is my table:
<table>
<tr>
<td>
<label for="check">
<input type="checkbox" name="check" id="check" value="true" />
Select something
</label>
</td>
<td>
<label for="select">
<select name="select" id="select">
<option value="Default"></option>
<option value="A">A</option>
<option value="B">B</option>
</label>
<td>
</tr>
I am trying to link the checkbox functionality with the dropdown menu as such: if the checkbox is unchecked, and the user selects an option whose option value is not "Default", then the checkbox should get checked automatically and highlighted with a 'selected' class. And then anytime the "Default" value is selected, the checkbox should be unchecked and unhighlighted regardless of its previous state.

jQuery("#check").on("click", function() {
if(!jQuery(this).is(":checked")) {
jQuery("#select").val("Default");
}
});
jQuery("#select").on("change", function() {
if(jQuery(this).val() === "Default") {
jQuery("#check").attr("checked", false);
}
});

Try to use "onChenge", like this:
<html>
<body>
<table>
<tr>
<td>
<label for="check">
<input type="checkbox" name="check" id="check" value="true" />
Select something
</label>
</td>
<td>
<label for="select">
<select name="select" id="select" onchange="Select_Change(this)">
<option value="Default"></option>
<option value="A">A</option>
<option value="B">B</option>
</label>
<td>
</tr>
<script>
function Select_Change( elem )
{
if (elem.value != 'Default')
{
CheckBox_Select( true );
}
else
{
CheckBox_Select( false );
}
}
function CheckBox_Select( check )
{
document.getElementById('check').checked = check;
}
</script>
</body>
</html>

First the function:
function selectValueChanged(){
var selected = document.getElementById("select").selectedIndex;
var options = document.getElementById("select").options;
if(document.getElementById("check").checked){
if(options[i].value == "Default"{
document.getElementById("check").checked = false;
document.getElementById("check").className = document.getElementById("check").className.replace(" selected", "");
}
else{
if(options[i].value != "Default"){
document.getElementById("check").checked = true;
document.getElementById("check").className += " selected";
}
}
}
Then give the select an onchage event so it would look like:
<select name="select" id="select" onchange="selectValueChanged()">

Related

Reset value or set to default selected option jQuery

I'm trying to reset the value of closest select option.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('input[name="pillers[]"]').val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Till fadeIn fadeOut my code is working how it should. But This code does't reset the value of select options when value has "0".
Can anyone help me with this, what i am doing wrong here?
Thanks in advance.
Using "-1" as default value and also using select instead of input as your selector, should do the trick.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('select[name="pillers[]"]').val("-1");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" value="-1" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Add value attribute to the default <option> and remove disabled.
When you use the empty string reset there is no matching option for it
<option value="" class="placeholder" >Make Choice</option>

Check radio button only if and when a dropdown list element is selected

I have this jquery to check a radio button on page load:
$('input[value="modelos"]').attr('checked',true);
And then I have a dropdown list:
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
How can I have input[value="modelos"] checked only if and when <option value="tab_1495127126289">Modelos</option> is selected?
You need on change condition with if like this :
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value="">Please Select</option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
</br>
<input type="checkbox" name="modelos 1" value="modelos"> modelos 1<br>
<input type="checkbox" name="modelos 2" value="modelos"> modelos 2<br>
<input type="checkbox" name="modelos 3" value="modelos"> modelos 3<br>
Checkbox dynamically change based on condition (select option value)
You can try this, but I had to put in a blank option into the menu, however if that's unacceptable let me know and I'll do something else.
$("select#talents_meta_category").change(function () {
if ($(this).val() === "tab_1495127126289") {
$('input[value="modelos"]').attr('checked',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
<input type="radio" value="modelos">
You can check whether a option by testing the value attribute of the select
$(function(){
if($('#talents_meta_category').val()){
$('input[name="favorites"][value="modelos2"]').attr('checked',true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="talents_meta_category" name="talents_meta_category">
<option value=""></option>
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463" selected>Música</option>
</select>
<label for="modelos"><input type="radio" name="favorites" value="modelos"></label>
<label for="modelos"><input type="radio" name="favorites" value="modelos2"></label>
You can use onchange function.
$("#talents_meta_category").on('change',function(){
let value = $(this).children("option:selected").val();
if(value=="tab_1495127126289"){
$('input[value="modelos"]').attr('checked',true);
}else{
$('input[value="modelos"]').attr('checked',false);
}
});
Something like this should do the trick:
// Your check the radio on page load
$('input[value="modelos"]').attr('checked', true);
// Check if `modelos` is selected
if ($('input[value="modelos"]').prop('checked')) {
// Add the `selected` attribute to the <option />
$('option[value="tab_1495127126289"]').attr('selected', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' value='modelos' />
<select id="talents_meta_category" name="talents_meta_category">
<option value="tab_1495127126289">Modelos</option>
<option value="tab_1495132259463">Música</option>
</select>
Hope this helps,
You can do it many different ways, here is just one....
var checkMe = 'tab_1495127126289';
$(function(){
$('input[name=talents_meta_category][value=' + checkMe + ']').prop('checked',true)
});

Hide if box is not checked, show if box is checked and dropdown value equals "Other"

So selecting Other from the dropdown menu gives you a textbox. And unchecking the box will hide the the textbox and the dropdown menu.
I am unable to directly edit the html to add a div to wrap both the dropdown menu and the textbox together.
The problem I am having is even if Other is not selected, if you uncheck the box, then check it back the Other textbox will display. I only want the Other textbox to display if the Other dropdown item is selected.
Any help would be greatly appreciated :)
// hide otherBox
$('#otherBox').hide();
// show OtherBox if other selected
$('#location_dropdown').change(function() {
$('#otherBox').toggle(this.value == 'Other');
});
$('#honor').change(function () {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>
<div class="form">
<label for="location_dropdown"> Location: </label>
</div>
<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
<option value="Chicago Center">Chicago Center</option>
<option value="Columbia">Columbia</option>
<option value="Lower Manhattan">Lower Manhattan Hospital</option>
<option value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">
Remove $('#otherBox').show();, and add the two lines of code commented below:
$('#honor').change(function() {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
$('#otherBox').hide(); //ADD THIS
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').toggle($('#location_dropdown').val() === 'Other'); //ADD THIS
}
});
Snippet:
// hide otherBox
$('#otherBox').hide();
// show OtherBox if other selected
$('#location_dropdown').change(function() {
$('#otherBox').toggle(this.value == 'Other');
});
$('#honor').change(function() {
if (!this.checked) {
$('#location_dropdown').hide();
$('.form label').hide();
$('#otherBox').hide();
} else {
$('#location_dropdown').show();
$('.form label').show();
$('#otherBox').toggle($('#location_dropdown').val() === 'Other');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input name="honor" id="honor" checked="checked" type="checkbox"><label for="tribute_show_honor_fieldsname">Check for yes</label>
<div class="form">
<label for="location_dropdown"> Location: </label>
</div>
<select name="location_dropdown" selected="selected" id="location_dropdown" size="1">
<option value="Chicago Center">Chicago Center</option>
<option value="Columbia">Columbia</option>
<option value="Lower Manhattan">Lower Manhattan Hospital</option>
<option value="Other">Other</option>
</select>
<br />
<input name="otherBox" id="otherBox" value="" maxlength="255" type="text">

jquery button enable if checkbox and select option

How do I enable the button if one or more checkbox is checked and if the select option of the checked checkbox is not equal to "no action"? Treating it as a row of table with checkbox being first element and select as last element?
This is how I am checking checkbox values.
<script>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
submitButt.attr("disabled", "disabled");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
//dynamically generating rows
for ws in my_zones:
html_output += \
''''<tr><td><input type="checkbox" name="checkboxes" value="%s"/></td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>
<select name="action">
<option value='no action'>Choose Action</option>
<option value='scan'>Reboot</option>
<option value='swap'>Rebuild</option>
<option value='terminate'>Terminate</option>
</select></td></tr>''' \
% (.......)
At each check state change, verify what you want: if there at least one checkbox checked and if the "no action" checkbox is not checked. Then you can enable the submit button, or otherwise disable it.
function updateSubmitButtonState(){
var enableableLineCount= 0;
$("tr").each(function(){
if( isEnableableLine( this ) )
enableableLineCount++;
});
if( enableableLineCount > 0 )
$('[type="submit"]').removeAttr("disabled");
else
$('[type="submit"]').attr("disabled","disabled");
function isEnableableLine( tr ){
if(
$("input[type='checkbox']", tr).is(":checked") &&
$("select option[value='no-action']:selected", tr ).length == 0
)
return true;
else
return false;
}
}
$("input[type='checkbox']").on("click",updateSubmitButtonState );
$("select").on("change",updateSubmitButtonState );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" name="checkbox-group">
</td>
<td>
<select>
<option value="option1">option 1 </option>
<option value="option2">option 2 </option>
<option value="no-action">no-action</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox-group">
</td>
<td>
<select>
<option value="option1">option 1 </option>
<option value="option2">option 2 </option>
<option value="no-action">no-action</option>
</select>
</td>
</tr>
</table>
<input type="submit" disabled="disabled" value="Submit" id="submit" />
edit
I have adapted the snippet to fit the goals described in coments.
Now, at each change, the whole table is parsed. If there not hundred of line, it could be sufficient. But it is not very optimised.
https://jsfiddle.net/gzrv8v3q/13/
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
submitButt.attr("disabled", "disabled");
$('#form1').change(function() {
var disable = true
if ( $('#select').val() != "no-action") {
checkboxes.each(function() {
if ($(this).is(":checked")) {
disable = false
}
})
}
submitButt.attr('disabled', disable);
})
The disabled attr must be deleted. Even it existing makes it disabled. I use: https://api.jquery.com/removeAttr/
Also, your code will not add disabled back again if the checkbox is unchecked, also clarify if that is part of your question.

Setting visibility of select tag based on selection in prior select tag

I want to have my States select dropdown only be visible after a country has been chosen in a prior dropdown.
Here is my code:
<form>
Name: <input type="text" name="name" autofocus>
<br />
E-mail: <input type="text" name="email">
<br />
<input type="radio" name="sex" value="male">Male
<br />
<input type="radio" name="sex" value="female">Female
<br />
<select name="country" onchange="showStates()" id="country">
<option>Select A Country</option>
<option id="US" value="US">USA</option>
<option id="AUS" value="AUS">Australia</option>
</select>
<br />
<select name="State" style="display:none;" id="us-states">
<option>Select A State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<br />
<select name="State" style="display:none;" id="aus-states">
<option value="" selected="selected">Select A State</option>
<option value="TAS">Tasmania</option>
<option value="QLD">Queensland</option>
<option value="VIC">Victoria</option>
</select>
<br />
<button type="submit">Submit</button>
<br />
<input type="reset" value="Reset">
</form>
Here is the showStates() function:
function showStates() {
var selected = $('#country :selected').text();
if (selected == "US") {
document.getElementByID('us-states').style.display = "block;";
} else {
document.getElementByID('us-states').style.display = "none;";
}
if(selected == "AUS") {
document.getElementByID('aus-states').style.display = "block;";
} else {
document.getElementByID('aus-states').style.display = "none;";}
}
}
I'm finding that the program initially hides the select boxes, but doesn't redraw them when a new option is selected in the country tag.
Since you're already using jQuery you can do away with the inline function call. Just add a change handler, and use the value of #country to determine which element to show:
$('#country').on('change', function() {
var country = this.value.toLowerCase();
$('select[name="State"]').hide()
.filter('#' + country + '-states')
.show();
});
Here's a fiddle
You can do this way using jQuery:
$('#country').on('change', function() {
var selected = $(this).val();
if(selected === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(selected === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
});
}
Fiddle Example HERE
OR:
$('#country').on('change',function()
{
var selected = $(this).val();
showStates(selected);
});
ShowStates Function:
function ShowStates(value)
{
if(value === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(value === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
}
Fiddle With Existing Function Reuse
How is this?
function showStates(id)
{
$("#"+id).css("display", "block");
}
$("#country").on("change", function(){
showStates('us-states');
});
http://jsfiddle.net/Lukx8/

Categories