We Keep Coding

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)
});

Keep input disabled until correct option is selected in html

I need the 'date' input to be disabled until the 'Deadline' option is selected. I have tried the following but it is not working. Any Suggestions?
CODE
<Select>
<option onselect="document.getElementById('deadline').disabled = false;">Deadline date</option>
<option>Monthly</option>
</Select>
<input id="deadline" type="date" disabled>

This should to it:
function validate() {
var dropdown = document.getElementById('dropdown');
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
var input = document.getElementById('date');
if (selectedOption == "enabled") {
input.removeAttribute('disabled');
} else {
input.setAttribute('disabled', 'disabled');
}
}
<select id="dropdown" onchange="validate()">
<option value="disabled">Pick something</option>
<option value="enabled">Deadline date</option>
<option value="disabled">Monthly</option>
</select>
<input type="date" id="date" disabled="disabled">

You'll need to attach an event handler to the change event on your select, then check its value with this.value.
Finally, set the disabled attribute of your input to true or false accordingly.
document.getElementsByTagName('select')[0].onchange = function() {
document.getElementById('deadline').disabled = this.value != 'Deadline date';
}
<select>
<option>Deadline date</option>
<option>Monthly</option>
</select>
<input id="deadline" type="date" disabled>

At dropdown change event you can add or remove attribute like this with your match condition.
$("select").change(function() {
if ($(this).val() == 'Deadline date')
$('#inpTest').removeAttr('disabled');
else
$('#inpTest').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select>
<option>---select---</option>
<option>Deadline date</option>
<option>Monthly</option>
</Select>
<input type="date" disabled="disabled" id='inpTest'>

your issue is event on <option> is not trigger. please check below code.
<select id="selectedOption" onchange="myFunction()">
<option>select</option>
<option>Deadline date</option>
<option>Monthly</option>
</select>
<input id="deadline" type="date" disabled>
<script>
function myFunction() {
if (document.getElementById("selectedOption").value == "Deadline date") {
document.getElementById("deadline").disabled = false;
} else {
document.getElementById("deadline").disabled = true;
}
}
</script>
hope it help you.

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">

Reset select option based on button

I would like to reset my select options if I click other radio button that doesn't trigger the select div.
Here's my sample:
$(document).ready(function() {
$(':radio').on('change', function() {
var title = $(this).val(); // Get radio value
if ($(this).attr('id') === 'theme2') {
$('.occ_select').addClass('l').removeClass('off');
} else { //...otherwise status of radio is off
$('.occ_select').removeClass('l').addClass('off');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br> <input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication
<br> <input type="radio" id="theme2" name="cake_theme" value="occ" /> Others
<div id="occassion" class="occ_select off">
<select name="occassion_select" id="occa_slct">
<option disabled selected value>-- Select one --</option>
<option value="otheerrr"> otheerrr </option>
<option value="other1"> other1 </option>
<option value="other2"> other2 </option>
</select>
</div>
So what I would like to happen, that everytime I choose "dedication button" , the select option will reset to <option disabled selected value>-- Select one --</option>. I don't know what am I missing in my jQuery to trigger that reset event.
Thank you so much in advance!

To achieve this you can use val('') to reset the value of the select to it's default. I'd also suggest that you disable the select unless the appropriate radio input is selected so that the user knows an option is required. Try this:
$(document).ready(function() {
$(':radio').on('change', function() {
var title = $(this).val();
if (this.id === 'theme2') {
$('.occ_select').addClass('l').removeClass('off');
$('#occa_slct').prop('disabled', false);
} else {
$('.occ_select').removeClass('l').addClass('off');
$('#occa_slct').prop('disabled', true).val(''); // reset value here
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication<br>
<input type="radio" id="theme2" name="cake_theme" value="occ" /> Others
<div id="occassion" class="occ_select off">
<select name="occassion_select" id="occa_slct" disabled="disabled">
<option disabled selected value>-- Select one --</option>
<option value="otheerrr"> otheerrr </option>
<option value="other1"> other1 </option>
<option value="other2"> other2 </option>
</select>
</div>

$(document).ready(function() {
$(':radio').on('change', function() {
var title = $(this).val(); // Get radio value
if ($(this).attr('id') === 'theme2') {
$('.occ_select').addClass('l').removeClass('off');
} else { //...otherwise status of radio is off
$('.occ_select').removeClass('l').addClass('off');
}
$("#occa_slct option").eq(0).prop("selected", title == "dedi") //set to first option when value of title is dedi
$("#occa_slct").prop("disabled", title == "dedi") //disable select when value of title is dedi
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br> <input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication
<br> <input type="radio" id="theme2" name="cake_theme" value="occ" /> Others
<div id="occassion" class="occ_select off">
<select name="occassion_select" id="occa_slct">
<option disabled selected value>-- Select one --</option>
<option value="otheerrr"> otheerrr </option>
<option value="other1"> other1 </option>
<option value="other2"> other2 </option>
</select>
</div>

try this:
<br> <input type="radio" id="theme1" name="cake_theme" value="dedi" /> Dedication
<br> <input type="radio" id="theme2" name="cake_theme" value="occ" /> Others
<div id="occassion" class="occ_select off">
<select name="occassion_select" id="occa_slct">
<option disabled selected value="0">-- Select one --</option>
<option value="otheerrr"> otheerrr </option>
<option value="other1"> other1 </option>
<option value="other2"> other2 </option>
</select>
</div>
and JS
$(document).ready(function () {
$(':radio').on('change', function () {
$("#occa_slct").val(0);
$("#occa_slct").change();
var title = $(this).val(); // Get radio value
if ($(this).attr('id') === 'theme2') {
$('.occ_select').addClass('l').removeClass('off');
} else { //...otherwise status of radio is off
$('.occ_select').removeClass('l').addClass('off');
}
});
});

Try this. This will work.
$('#occassion').prop('selectedIndex',0);
Hope this helps!!!

How to change a border color of html select tag if value is empty or 0

I have 4 select tag with class name select2 assigned to it. I want to make the border turn to red if there's no selected options or has an value equal to empty or 0. I've tried to add class using jquery but it makes all select.select2 border turns red.
Style
<style>
.errorType {
border-color: #F00 !important;
}
</style>
HTML
<select name="category" class="form-control select2" id="category" onChange="search_Operator(this.value)">
<option value="0"> Select Operator Category</option>
<option value="1">one</option> <option value="2"> two</option>
</select>
<select name="operatorName" class="form-control select2" id="operatorName" onChange="">
<option value="0"> Select operator Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="regionName" class="form-control select2" id="regionName">
<option value="0"> Select region Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="type" class="form-control select2" id="type">
<option value="0"> Select type </option>
</select>
JQUERY
$(function () {
$(".select2").select2();
});
$(".select2-selection").addClass('errorType');
Any idea?
Thanks in advance.

I've attached a function to the click event of the submit button, in order to check the value of every select element on the page:
$(function () {
$('.form-control-select2').select2();
$('#submit_btn').on('click', function(){
var submit_form = true;
$(".form-control-select2").each(function(){
var selected_value = $(this).val();
if (selected_value==0 || selected_value=='') {
$(this).next().find('.select2-selection').addClass('errorType');
submit_form = false;
} else {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
return submit_form;
});
});
Fiddle here: https://jsfiddle.net/64a41thz/21/.
Also, if you want to remove the red border when valid selection is made, add the following code:
$('.form-control-select2').on('change', function(){
if ($(this).val()!=0 && $(this).val()!='') {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
Fiddle here: https://jsfiddle.net/64a41thz/24/.

This does the trick. You just need to replace #yourButton with the actual ID you use.
$(document).on("click", "#yourButton", function() {
$(".select2").each(function(index, element) {
$(element).removeClass("errorType");
if ($(element).val() === "0") {
$(element).addClass("errorType");
}
});
});

Put your select tag inside a form with an id="submit" as shown
<form class="" action="" method="post" id="submit">
and add a button below the 4 select tags with this attribute
onclick="return submit_form('form#submit')"
the button should be like this,
<button type="button" class="btn btn-default" onclick="return submit_form('form#submit')">Submit</button>
In your jquery
function submit_form (form_id) {
$(form_id).find('select[name]').each(function (index, node) {
if (node.value == 0) {
var id = "select#" + node.id;
$(id).addClass('errorType');
}
});
}
This will search select tag with name as attribute, if found, it will get the value of the name and check of its empty or not. If found empty it will add new class that turns that select tag into a red border.
Hope this will help