Develop Reference

How to make "select option" select option for quantity using jQuery

I have a select option for a quantity that I want to make it hide and show depending on the value. Quantities are from 1 to 4, when the option value is "more" the select element will hide then the input name="quantity-input" will show up so you can type manually quantity you like from 1 to 50.
<input type="number" name="quantity-input" id="qty-input" hidden>
<select name="quantity-select" id="qty-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>

i'm using jquery to make selectors easier. let me know at the comment section if something doesn't work as you want.
$('.QuantSelect_').change(function(){
const QuantSelect_ = $(this);
const QuanMoreIn_ = QuantSelect_.parent().find('.QuanMoreIn_').eq(0);
const switchInput = QuantSelect_.parent().find('.switchInput_').eq(0);
let selected_ = QuantSelect_.val();
if( selected_ === 'more' ){
QuantSelect_.hide();
QuanMoreIn_.show().focus();
switchInput.show().click(function(){
QuantSelect_.toggle(); QuanMoreIn_.toggle();
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="QuanForm">
<input class="QuanMoreIn_" type="number" name="quantity-input" placeholder="Enter the specific Number" style="display:none;" />
<select class="QuantSelect_" name="quantity-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
<button class="switchInput_" style="display:none;">switch</button>
</div>

You need an event-listener on select field which will mark the field hidden/disabled when More option is selected and make your input field visible.
document.getElementById('qty-select').addEventListener('change', event => {
const currentValue = event.currentTarget.value;
if (currentValue == 'more') {
event.currentTarget.setAttribute('disabled', true);
document.getElementById('qty-input').removeAttribute('hidden');
}
});

Please update html like below.
<input type="number" name="quantity-input" id="qty-input" hidden min="1" max="50">
<select name="quantity-select" id="qty-select" onclick="hideMe();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
And add javascript function.
function hideMe() {
var selectBox = document.getElementById("qty-select");
if(selectBox.options[selectBox.selectedIndex].value == "more") {
document.getElementById("qty-select").style.display="none";
document.getElementById("qty-input").removeAttribute('hidden');
}
}

create object from multiple selection option list and input

On click, user can dynamically add combo (select option + input field) into form with (city code and telephone number), need to retrieve in a object with the inputed values for these fields.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = [].map.call(number_el, function(input) {
return {
'telefone': input.value
};
});
console.log(telefoneNumber);
<div id="phone">
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input1" value="555-222555"> </br>
<p>Telephone</p>
<select name="city_code" id="telephone_1" class="telephoneList">
<option value="1">212</option>
<option value="2">216</option>
<option value="3">215</option>
</select>
<input type="text" name="phone_number" id="phone_input2" value="555-666555">
</div>
The above code retreive the input telefone:values in object.
I need to loop throw the select options to get its values and add to the object as show below:
Element name can be used as property name for both telefone and city_code.
telephoneList: [
{
"telefone":555-222555,
**"city_code":1**
},
{
"telefone":555-666555,
**"city_code":2**
}
]

You can use the attribute previousElementSibling for getting the previous element which is a select.
This is assuming that the previous element is always the select element.
//Code that retreive the input values:
var number_el = document.getElementById('phone').getElementsByTagName('input')
var telefoneNumber = Array.from(number_el).map(function(input) {
var object = {
'telefone': input.value,
'city_code': input.previousElementSibling.options[input.previousElementSibling.selectedIndex].value
}
return object;
});
console.log(telefoneNumber);
<div id="phone"> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input1" value="555-222555"> <br> <p>Telephone</p> <select name="city_code" id="telephone_1" class="telephoneList"> <option value="1">212</option> <option value="2">216</option> <option value="3">215</option> </select> <input type="text" name="phone_number" id="phone_input2" value="555-666555"> </div>

Checking if all selects are completed in Jquery

I am trying to count the number of VISIBLE selects (Which I've done in the alert in the Jquery) and also count the number of VISIBLE selects that have an option selected. If both numbers match then do some action.
Currently, when I change the first select and choose an option, it doesn't alert with a value. When I change the next select and choose an option it shows the count is 1 when it is meant to be 2. when I select the third select then it shows 3. However these numbers are all inaccurate. What is the cause of this?
<div id="secondPanelID">
<div class="form-group input-group">
<label for="gestationalAgeInWeeks">Gestational Age : </label>
<div>
<select id="gestationalAgeInWeeks" name="gestationalAgeInWeeks" class="form-control">
<option disabled selected value>SELECT</option>
<option value="0">0</option>
</select>
</div>
</div>
<div class="form-group input-group">
<label>days</label>
<div>
<select name=gestionalDays class="form-control">
<option disabled selected value>SELECT</option>
<option value="0">0 Days</option>
<option value="1">1 Day</option>
</select>
</div>
</div>
</div>
Added listeners to each of the selects
$("select[name=gestationalAgeInWeeks]").change(checkingColourSelectsGeneralData);
$("select[name=gestionalDays]").change(checkingColourSelectsGeneralData);
Jquery
var selectCounterInGeneral = 0;
function checkingColourSelectsGeneralData(){
alert($('#secondPanelID select:visible').length)
$('#secondPanelID select:visible').change(function () {
var o = $(this);
if (!o.hasClass('counted')) {
selectCounterInGeneral++;
o.addClass('counted');
}
alert("number of selects: "+selectCounterInGeneral);
});
}

Just check if all visible selects have value this way:
function countSelected(e) {
var toReturn = true;
$('select:visible').each(function(i) {
if( !$(this).val() ) {
toReturn = false;
};
});
console.log( toReturn );
};
$('select').on('change', countSelected);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select style="display: none;">
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Also on JSFiddle.

Two textbox same value in jquery?

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

Reset value of dropdown list with radio button

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()" />