We Keep Coding

How to set an input field value based on the value of another field?

Field 1 [attribute_size]
Drop down menu
Values: Small, Medium, Large, Extra Large
Field 2 [count]
Input text
Value: Set value depending on Field 1 input based on the following mappings
Small = 1
Medium = 2
Large = 3
Extra Large = 4
<select id="size" class="" name="attribute_size" data-
attribute_name="attribute_size" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="Small" class="attached enabled">Small</option>
<option value="Medium" class="attached enabled">Medium</option>
<option value="Large" class="attached enabled">Large</option>
<option value="Extra Large" class="attached enabled">Extra
Large</option></select>
<input id="count" name="count" value="5" class="thwepo-input-field ">
How could I achieve this using JQuery? I need the value of Field 2 to update every time Field 1 is changed.
const input = document.getElementById('count');
document.getElementById('attribute_size').addEventListener('change', function(){
var sizsel = document.getElementById('attribute.size').value;
if (sizsel = 'Small') {
input.value = '5';
} else if (sizsel = 'Medium') {
input.value = '10';
} else {
input.value = "15";
}
});

You would set up a change event handler on the select that sets the value of the input:
const $input = $("#size");
$input.change(function(){
$("#count").val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="1" class="attached enabled">Small</option>
<option value="2" class="attached enabled">Medium</option>
<option value="3" class="attached enabled">Large</option>
<option value="4" class="attached enabled">Extra Large</option>
</select>
<input id="count" name="count" value="5" class="thwepo-input-field ">
But, a couple of things about this:
An input field is just that, an element for user input. If you just
need to display information, you should not be using an input
element, but rather you should just set the textContent of a normal
element (like a span or div).
If you want the value of an option to be the same thing as the
text of the option, you don't need to specify the value attribute
of the option at all - - the text will become the value. But, in your case, you've said that you want numbers to be the values of the different options, so the value attribute should reflect that.
The scenario you've asked about is extremely simple and JQuery is
probably overkill to accomplish it. Here's what the code would be
with vanilla JavaScript:
const input = document.getElementById("count");
document.getElementById("size").addEventListener("change", function(){
input.value = this.value;
});
<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
<option value="">Choose an option</option>
<option value="1" class="attached enabled">Small</option>
<option value="2" class="attached enabled">Medium</option>
<option value="3" class="attached enabled">Large</option>
<option value="4" class="attached enabled">Extra Large</option>
</select>
<input id="count" name="count" value="5" class="thwepo-input-field ">

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>

How can i disable my input and the content inside using a selected option

I have looked around and haven't found a solution to my problem, I am trying to learn javascript and jquery. what I want to learn is how can I do so when I select the option "none" the <input> and the data inside it, should be disabled.
this is my attempts:
First attempt link:http://jsfiddle.net/kmtLy705/7/
First attempt code: (Works with buttons)
<input disabled id="page_navigation1" type="number">
<button class="add">Add</button>
<button class="remove">Remove</button>
<select>
<option value="0" class="add" selected>None</option>
<option value="1" class="remove">select</option>
<option value="2" class="remove">select</option>
<option value="3" class="remove">select</option>
<option value="4" class="remove">select</option>
<option value="5" class="remove">select</option>
</select>
jquery
$('.add').click(function() {
$('#page_navigation1').attr('disabled', true)
});
$('.remove').click(function() {
$('#page_navigation1').removeAttr('disabled');
});
Now, this code works with buttons but I have tried countless ways to make it work with an option and haven't found a solution yet.
Second attempt link: http://jsfiddle.net/5u9pfot0/1/ this doesn't work at all but the idea was there (when val1 is selected then the input should be disabled)
Second attempt code:
<select id="selectid" name="selectname">
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">
jquery:
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true)
}

I have modified your second approach just a little.
Try doing below:
function callthis()
{
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true);
}
else
$('#page_navigation1').attr('disabled', false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectid" name="selectname" onchange="callthis();">
<option default disabled>Choose one</option>
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">

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

Multiple variables into option value

I have a simple form with some options in it which are disabled and greyed out by default.
<select name="template" id="template" size="1" >
<option disabled selected value="1" name="1" id="1" class="bold-option">Mango</option>
<option class="select1"></option>
<option disabled selected value="2" class="bold-option" >Apple</option>
<option disabled selected value="3" class="bold-option">Pineapple</option>
<option disabled selected value="4" class="bold-option">Brocolli</option>
<option disabled selected value="5" class="bold-option">Peach</option>
<option disabled selected value="6" class="bold-option">Strawberry</option>
</select>
The idea behind it is that i want multiple variables which are defined by JQuery are getting imported into the select1 option for example, so the items that are linked to Select1 are listed below Mango.
I've made a var :
var issueTemplates = [
{'subject': 'This is a mango'}
];
Now i want to add this variable into the Option value beneath (or linked) to the Mango option within the select. I've looked into the append function but i cant seem to figure out how to get this straight.
I've made a select request in jquery which adds the subject in the dropdown form. But i want to have it beneath the Mango option..
This is de code
issueTemplates.forEach(function(item, idx) {
$("select[id='template']").append('<option value="' + idx + '">' + item.subject + '</option>');

This will get you started. If you have an array of additional options, you can iterate through the select element and load by index -1.
$(document).ready(function() {
var fruit = ['mango', 'apple', 'pineapple', 'brocolli', 'peach', 'strawberry']
$('#template option').each(function() {
val = $(this).val();
$(this).after('<Option val = ' + val + '>This is a ' + fruit[val - 1] + '</option>');
});
console.log($('#template option'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="template" id="template" size="1">
<option disabled selected value="1" name="1" id="1" class="bold-option">Mango</option>
<option disabled selected value="2" class="bold-option">Apple</option>
<option disabled selected value="3" class="bold-option">Pineapple</option>
<option disabled selected value="4" class="bold-option">Brocolli</option>
<option disabled selected value="5" class="bold-option">Peach</option>
<option disabled selected value="6" class="bold-option">Strawberry</option>
</select>