I am trying to show a checked checkbox if a value is selected on a select input. So if someone is choosing any value in the dropdown I want the checkbox to switch from off to on. Here is the html example.
I tried different things to achieve that but it is not working at all. My latest try looks like this:
$(document).ready(function() {
$('#subject').each(function() {
if (this.selected)
$("#box-4").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" disabled="disabled">
I think that I am on the right track here but don´t understand why this isn´t working at all.
$(document).ready(function() {
$('#subject').click(function() {
var option = document.getElementById('subject');
console.log(option.value);
if (option.value ==1 ||option.value==2)
$("#box").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" >
It should be .change()
Don't check whether it is selected or not
$(document).ready(function() {
// Change event
$('#subject').change(function() {
// On change, at first reseting all checkboxes state
$('input[type="checkbox"]').each(function() {
$(this).prop('checked', false);
});
// After reseting checkboxes state, check the appropriate checkbox
$("#box-" + this.value).prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box-1" disabled>
<input type="checkbox" id="box-2" disabled>
Related
How to display the text fields when choosing different option from the selectoption (if select USA option USA text field need to show)?
<select name="cntry">
<option value="us">USA</option>
<option value="uk">uk</option>
</select >
<input type="text" value="USA" name="USA">
<input type="text" value="UK" name="UK">
$('#country').on('change', function() {
$('input').each(function() {
$(this).css('display', 'none');
});
if (this.value === 'us') {
$('input[name="USA"]').css('display', 'initial')
}
if (this.value === 'uk') {
$('input[name="UK"]').css('display', 'initial')
}
});
input {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country" name="cntry">
<option selected disabled hidden>Select your Country</option>
<option value="us">USA</option>
<option value="uk">uk</option>
</select>
<input type="text" value="USA" name="USA">
<input type="text" value="UK" name="UK">
how can i check if all select options are disabled except for the one with the value="0"?
Here is my code:
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
What I was thinking was:
if(#my-select options disabled except for option value="0") {
console.log(option value="0" is the only one that is enabled);
}
1st: You need to check for all enabled options by using $('#my-select option:not(:disabled)')
2nd: check How many of it is enabled using .length
3rd: check if its value attribute is 0
var enabled = $('#my-select option:not(:disabled)');
if(enabled.length === 1 && enabled.attr('value') == "0") {
console.log('option value="0" is the only one that is enabled');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
you can use javascript or jQuery.I use of jQuery, Like this:
$(document).ready(function(){
var counter = 0;
$('#my-select option:enabled:not([value=0])').each(function(){
counter++;
})
if(counter < 1)
alert('option value="0" is the only one that is enabled');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
I have a html form where a select field and input box exist and I am using 2 class for that which is work_phone_class and work_phone_class_input.
I am calling ajax by trigger a save button with a class when select field value is changed or any option selected AND again calling ajax when user complete typing on input box. So that I am using following jQuery code :
$(".work_phone_class").change(function() {
$(".save_phone_class").trigger('click');
});
$(".work_phone_class_input").change(function() {
$(".save_phone_class").trigger('click');
});
Now I want to trigger the save button with the class when select field value is selected AND user completed typing on input box.
Update :
Html form is look like this. I think I have to use $(this) but not sure.
<select class="work_phone_class">
<option value=""></option>
<option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1"></option>
</select>
<input type="text" class="work_phone_class_input">
I am no so clear about your requirement.... but i think this will help you
$(".work_phone_class,.work_phone_class_input").change(function() {
$(".work_phone_class_input").each(function(){
if($(this).val() == ""){
//// Validation goes here for input
return false;
}
})
$(".work_phone_class").each(function(){
if($(this).val() == undefined){
//// Validation goes here for input
return false;
}
//// trigger your save button click here
})
});
please let me know if it helps by marking it as an answer
You just have to add a test before send your ajax..
UPDATE
$(".save_phone_class").click(function(){
var allFilled = true;
$(".work_phone_class").each(function(){
if($(this).val()=="")
allFilled =false;
});
$(".work_phone_class_input").each(function(){
if($(this).val()=="")
allFilled =false;
});
if(allFilled)
{
//AJAX
}
});
$(".work_phone_class_save").click(function(){
var allFilled=true;
$(".work_phone_class_input").each(function(){
if($(this).val()=="")
allFilled=false;
});
$(".work_phone_class").each(function(){
if($(this).val()=="")
allFilled=false;
});
if(allFilled)
{
alert("Ajax sent");
}
else
alert("All input are not filled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="work_phone_class">
<option value=""></option>
<option value="1">1</option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1">1</option>
</select>
<input type="text" class="work_phone_class_input">
<select class="work_phone_class">
<option value=""></option>
<option value="1">1</option>
</select>
<input type="text" class="work_phone_class_input">
<button class="work_phone_class_save">Save</button>
I have select box and two (2) textboxes.
I want the value of select box that displays on the first textbox and whatever the value of the first textbox it display also in the second box.
select box = first textbox
first textbox = second textbox
Buy the way my first textbox is readonly so there is no way to trigger the input, keyup, keydown event. I want my two (2) textbox the same value every time.
I have the html code.
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">
I want the value of select box that displays on the first textbox and
whatever the value of the first textbox it display also in the second
box.
select box = first textbox first textbox = second textbox
Try utilizing selector $("#selectbox, :text:not([readonly])") ; input , change event ; .val() to set both input type="text" values
$("#selectbox, :text:not([readonly])").on("input change", function(e) {
$(":text").val(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">
First change:
<input id="second-textbox type="text">
To:
<input id="second-textbox" type="text">
Then use the following to accomplish your goal:
$('#selectbox, #second-textbox').on('change input', function() {
var sel = $(this).is('#selectbox') ? '#first-textbox' : '#first-textbox,#second-textbox';
$( sel ).val( this.value );
})
.filter('#selectbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox" type="text">
Solution 1 (best fits my eyes)
HTML
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JavaScript
$('#selectbox').on('change', function() {
$("#first-textbox").val($(this).val());
$("#second-textbox").val($(this).val());
});
fiddle here
Solution 2 (Best fits the question):
$('#selectbox').on('change', function() {
$("#first-textbox").val($(this).val()).trigger('keyup');
});
$('#first-textbox').on('keyup', function() {
$("#second-textbox").val($(this).val());
});
fiddle here
You can set the text on change:
$(function() {
var tbs = $('input[id$=-textbox]'); //cache all
$('#selectbox').on('change', function(e) {
tbs.val(this.value); //set text box value
}).trigger('change'); // force value on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly='' />
<input id="second-textbox" type="text" />
I built upon #Rafael Topasi's solution posted in the comment above in his jsFiddle. All I did was add the functionality that you outlined in your question, which was to disable the first text input field and make it so that second input field is equal to the first input field when the select option changes.
jsFiddle Example
//StackOverflow Solution: http://stackoverflow.com/questions/32238975/two-textbox-same-value-in-jquery
//Disable Input: http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery
//Source: http://jsfiddle.net/nafnR/727/ by Rafael Topasi
//08-26-2015
$(document).ready(function() {
$("input#first-textbox").prop('disabled', true);
//$("input").prop('disabled', false);
$("#selectbox option").filter(function() {
return $(this).val() == $("#first-textbox").val();
}).attr('selected', true);
$("#selectbox").on("propertychange change", function() {
$("#first-textbox").val($(this).find("option:selected").attr("value"));
$("#second-textbox").val($(this).find("option:selected").attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="selectbox" name="name">
<option value="">Please select...</option>
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>
<input type="text" id="first-textbox" name="firstname" value="Elvis" oninput="document.getElementById('second-textbox').value=this.value">
<input id="second-textbox" type="text" name="firstname" value="">
I need to reset the value of a dropdown list with a radio button. So when a certain radio button is selected, it will reset a specific dropdown list to the default selected="selected" option.
How can this be done with js and css?
This should reset your dropdown to the first option.
Here's the markup
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input onclick="resetFoo();" type="radio" name="bar" value="bar">
Here's the jQuery.
function doSomething {
$("#foo option:first").attr("selected", true);
}
Say that this is the code for your first element
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
your radio button should be something like this:
<input onclick="document.getElementById('foo').value = '';" type="radio" name="bar" value="bar">
The value under the onclick event needs to be replaced with the default value for your dropdown.
document.getElementById('select').selectedIndex = 0;
<input type="radio" onchange="doSomething()" />