Develop Reference

How to disable or readonly select input angular

If the cardSelect variable is true, just let [readonly]="cardSelect"
<select name="card-exp-month" #validateMonth formControlName="digiMes" class="form-
control" name="validade" id="validade" >
<option value="">Mês</option>
<option value="01">01 Jan</option>
<option value="02">02 Fev</option>
<option value="03">03 Mar</option>
<option value="04">04 Abr</option>
<option value="05">05 Mai</option>
<option value="06">06 Jun</option>
<option value="07">07 Jul</option>
<option value="08">08 Ago</option>
<option value="09">09 Set</option>
<option value="10">10 Out</option>
<option value="11">11 Nov</option>
<option value="12">12 Dez</option>
</select>
When is input text its works
<label for="nomeimpresso">Nome <b>impresso</b> no cartão<span class="text-danger"> *
</span></label>
<input #nomeImpresso formControlName="digiNome" name="holder-name" id="nomeimpresso"
class="form-control col-lg-6" type="text" [readonly]="cardSelect" >

try [disabled]="cardSelect" or if that didn't work [attr.disabled]="!editable ? '' : null" as a workaround.

As stated by #rmjoia, my previous answer is dangerous and should be avoided (see below).
Updated answer
For disabling the whole "select" element you can use a boolean variable declared in your controller (isDisabled in my following example)
In the HTML:
<select [disabled]="isDisabled">
<option>a</option>
</select>
In the controller:
export class AppComponent {
…
// the variable declaration (at start the select is enabled)
isDisabled = false;
// later you may change the state of the select element.
onClick() {
this.isDisabled = true;
}
}
Some code implementing different solutions :
https://stackblitz.com/edit/angular-ivy-qkwier?file=src/app/app.component.html
Previous answer
For disabling the whole "select" element you can :
<select … [disabled]="isSelectDisabled()">
…
</select>
and decide in your controller the logic behind the isSelectDisabled method.

How to get the changed select button among many select buttons?

I have many filter button like below, how can I get the select value without using its id?
<select name="selectId" id="selectId" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="1" selected>1</option>
<option value="2" selected>2</option>
</select>
<select name="selectStore" id="selectStore" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="A" selected>Store A</option>
<option value="B" selected>Store B</option>
</select>
<select name="selectProduct" id="selectProduct" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="apple" selected>Apple</option>
<option value="orange" selected>Orange</option>
</select>
Normally, I will use this code to find the changed select button:
$(document).ready(function() {
// Get filter function for chart
$('#selectId').change(function() {
var select = $("#selectId").val();
if (selectLength >= 1 && select.includes("All")) {
$('.selectpicker#selectId').selectpicker('deselectAll');
makeChart();
}
else {
makeChartFilter(select);
}
})
});
But the problem is when there are many filter buttons, I have to write many functions like above and just only change the id.
How can I just use something like this:
$(document).ready(function() {
// Get filter function for chart
$('#selectpicker').change(function() {
id_change = something;
var select = $("#id_change").val();
...
})
});

Using vanilla JavaScript and the eventTarget, this is relatively straight forward. Here is an example:
document.getElementById('container').onchange = ({ target }) => {
console.log(target.value);
};
<form id="container">
<select name="foo">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="bar">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</form>

js: why selecting "select tag".target.type return "select-one" as a naming convention?

I'm trying to understand why when I select <select> and targeting any option
it return select-one . why -one? can it be in some cases counting more or sth else so naming convention have a useful meaning ?
in the code below I'm comparing between input and select maybe they'r not relevant but looks interesting.
$('input[type="checkbox"],input[type="radio"]').on("change",function(event){
console.log(event.target.type);
});
$('#foo,#foo2').on("change",function(event){
console.log(event.target.type);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="select">
<input type="radio" name="select">
<select id="foo">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
<select id="foo2">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>

It's to distinguish from the case of when you add the multiple optional attribute to the select. It will then return select-multiple.
multiple
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can
be selected at a time. When multiple is specified, most browsers will
show a scrolling list box instead of a single line dropdown
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
$('input[type="checkbox"],input[type="radio"]').on("change",function(event){
console.log(event.target.type);
});
$('#foo,#foo2').on("change",function(event){
console.log(event.target.type);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="select">
<input type="radio" name="select">
<select id="foo">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
<select id="foo2" multiple>
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>

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

Using onchange to enter data in second field javascript

I am trying to put two forms on one page, but to have only one main display area where selections can be made. My page would look something like this:
Sequence ID---Select Processor---Select Reviewer
1-------------------A------------------------B---------------Action Button
2-------------------A------------------------B---------------Action Button
3-------------------A------------------------B---------------Action Button
Where A and B are drown-down lists the users can select.
Then, in a separate part of the page and in a separate form, the A and B which are selected above will be populated in separate text fields. The issue is the way the two forms are process. The "Action Button" above does not use the A and B drop-down information AT ALL. But to make the display more concise, I don't want to make the user scroll to various parts of the page for different actions. Too confusing.
Here is the kicker. The total numbers in the sequence will different depending on the form. So, I need to create an array for the fields. I know that is not making much sense, so I here is my code:
<script type="text/javascript">
function myFunction() {
document.proc[1].value = f.processor[1].value;
document.write.getElementById("proc[1]").value;
document.rev[1].value = f.reviewer[1].value;
document.write.getElementById("rev[1]").value;
document.proc[2].value = f.processor[2].value;
document.write.getElementById("proc[2]").value;
document.rev[2].value = f.reviewer[2].value;
document.write.getElementById("rev[2]").value;
document.proc[3].value = f.processor[3].value;
document.write.getElementById("proc[3]").value;
document.rev[3].value = f.reviewer[3].value;
document.write.getElementById("rev[3]").value;
}
</script>
<form id="form" action="thispage.php" method="post">
<select name="processor[1]" onchange="myFunction(this.document)" id="processor[1]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[1]" onchange="myFunction(this.document)" id="reviewer[1]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="processor[2]" onchange="myFunction(this.document)" id="processor[2]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[2]" onchange="myFunction(this.document)" id="reviewer[2]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="processor[3" onchange="myFunction(this.document)" id="processor[3]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="reviewer[3]" onchange="myFunction(this.document)" id="reviewer[3]">
<option value="0">--Please select from the list...</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input type="submit" name="action" value="Action Button">
</form>
<form id="newForm" action="thisform.php" method="post">
<input type="text" name="proc[1]" id="proc[1]">
<input type="text" name="rev[1]" id="rev[1]">
<input type="text" name="proc[2]" id="proc[2]">
<input type="text" name="rev[2]" id="rev[2]">
<input type="text" name="proc[3]" id="proc[3]">
<input type="text" name="rev[3]" id="rev[3]">
</form>
When I make the selection, the data is not entered into the text fields in the newForm, which is what I would like to happen.
Any advice anyone could offer would be greatly appreciated.

Answer to why the selection doesn't get transferred:
Having <input type="text" name="proc[1]" id="proc[1]"> doesn't allow you to reference it by document.proc[1]. The document object model just isn't that magical.
Other notes:
There are a lot of other issues with this code, e.g. this.document and document.write.getElementById(...).value. You should probably spend some time learning JavaScript and the document object model and finding the approach that's right for this application.