AngularJS - Why ng-value overrides value attribute and how to avoid it? - javascript

So, I have the following code:
<input ng-model="refreshedByExample" type="text">
<select ng-model="example" ng-change="refreshedByExample = example">
<option value="1" ng-value="valueForRefreshedByExample1">1</option>
<option value="2" ng-value="valueForRefreshedByExample2">2</option>
<option value="3" ng-value="valueForRefreshedByExample3">3</option>
</select>
The value of the value's attribute is different than the value in ng-value. But, somehow, it is overrides and the value attribute gets the same value than ng-value. I get something like this:
<input ng-model="refreshedByExample" type="text">
<select ng-model="example" ng-change="refreshedByExample = example">
<option value="valueForRefreshedByExample1" ng-value="valueForRefreshedByExample1">1</option>
<option value="valueForRefreshedByExample2" ng-value="valueForRefreshedByExample2">2</option>
<option value="valueForRefreshedByExample3" ng-value="valueForRefreshedByExample3">3</option>
</select>
Is there a way to prevent this? I need to have on the value attribute a different value than in ng-value.
Any ideas? Thanks everyone.

Related

can I set the select option using anything other than value in javascript

I have a pick list like the following:
<select multiselect="false" name="some.name" size="1" id="queuePicklist"
onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value=""
style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>
I want to know if it's possible that in setQueue() function select one of the options without using the value? So instead of document.getElementById("queuePicklist").value = 'Support';
Can I add a data attribute to the options and select the option that way so I can keep the values as they are. Note: as seen in the example four of the options have the same value.
I know I can put these values (1,2,1,1,1) into the data attribute and use unique values in the 'value' field and that was my first approach but since I'm working with some legacy code, that change made other parts of other codes to break.
I'm not exactly sure what or how you want to get an option, but you can access the text like this.
function setQueue() {
var selectEle = document.getElementById("queuePicklist");
// .options returns an HTMLOptionsCollection object.
// use the selectedIndex property to get the selected option, then
// you can access the text or value.
console.log(selectEle.options[selectEle.selectedIndex].text);
}
<select multiselect="false" name="some.name" size="1" id="queuePicklist" onchange="setQueue();" required="true">
<option id="selectOption" hidden="true" disabled="true" selected="true" value="" style="display: none">Select an option</option>
<option value="1" label="Support">Support</option>
<option value="2" label=" Team Sales">Team Sales</option>
<option value="1" label="Individual Sales">Individual Sales</option>
<option value="1" label="Billing">Billing</option>
<option value="1" label="Other">Other</option>
</select>

How to set value in multiple select option in FORM in AngularJS?

Hmtl:
<div class="form-group">
<label for="loaisanpham">Loại Sản Phẩm</label>
<select class="form-control" name="idLoaisp" id="idLoaisp" ng-model="idLoaisp" ng-required=true>
<option ng-repeat="loaisanpham in loaisanphams | orderBy: 'tenLoaisp'" value="{{loaisanpham.idLoaisp}}">{{loaisanpham.tenLoaisp}}</option>
</select><br>
</div>
<div class="form-group">
<label for="phuong">Phường</label>
<select class="form-control" name="idVungxa" id="idVungxa" ng-model="idVungxa" ng-required=true>
<option ng-repeat="vungxa in vungxas | orderBy: 'tenVungxa'" value="{{vungxa.idVungxa}}">{{vungxa.tenVungxa}}</option>
</select><br>
</div>
JavaScript:
document.getElementById("idLoaisp").value = track.loaisanpham.idLoaisp;
document.getElementsById("idVungxa").value = track.vungxa.idVungxa;
Just idLoaisp show value in html and idVungxa not show.
I do not understand why it is not displayed. Help me. Tks all
Assign your value to the $scope in your controller.
$scope.idVungxa = track.loaisanpham.idLoaisp;
In plain HTML5 you would set the option as "selected":
like this:
<select multiple>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c" selected>c</option>
</select>
There might be a different way to do it in Angular, but if this helps, you can use
<option [attr.selected]="boolean" ...
Remove the attribute "value" in the html options and set the value to the model, you have ng-model="idLoaisp" and ng-model="idVungxa" in the view so I guess in your controller you have that variables to store the values of the item selected, models are double binding that means you can also set the value to that model.
$ctrl.idLoaisp = track.loaisanpham.idLoaisp
$ctrl.idVungxa = track.vungxa.idVungxa

How do you pass a value to a hidden form field when a certain option is selected?

I am new to javascript and cannot find an easy-to-understand answer.
I would like a certain value to get passed to a hidden field when a user selects a certain option from the select dropdown.
I know that there are if/else statements but I'm not sure if that would be used in this situation.
For example: I have a select dropdown of a list of states.
<select name="HomeState" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
As you can see, any option other than California will be rated at a value of 1.
I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.
<input name="AmountNeeded" type="hidden" value="300" />
If they select anything other than California, the hidden field would get passed $100
<input name="AmountNeeded" type="hidden" value="100" />
How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.
To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.
And based on the selected item, change the value of hidden input.
NOTE: To test the snippet out I have removed the type="hidden". Do place it back.
function homeSelected(){
const home = document.getElementById("homeSelector").value;
if(home == 5){
document.getElementById("amountNeeded").value = 300;
}else{
document.getElementById("amountNeeded").value = 100;
}
}
<select id="homeSelector" name="HomeState" onchange="homeSelected()" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
<input id="amountNeeded" name="AmountNeeded" value="100" />
You can do this as follows:
<select name="HomeState" required onChange=myFunction(this)>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
Javascript code is:
<script>
function myFunction(x) {
val = x.options[x.selectedIndex].text;
if(val == 'California')
document.getElementsByName("AmountNeeded")[0].value = 300
else
document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>
If else statement is good for you if you are sure that All other states have value 1 except California. If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount. You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.

How to get the select box values in a variable

i have a selectbox which have values from 1 to 4 and I need to put the value I select in a javascript variable and send it in a function.Here is the way I am trying to do that..
<form enctype="application/json" method="post">
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
</select>
<input type="submit" value="submit" onclick="aMethod()"/>
I need this values in a variable and want to put that value in this method so that I can use that.can anybody help
You can retrieve the selected value like this:
var val = document.getElementById("select").value;
Working demo: http://jsfiddle.net/jfriend00/ah7TU/
You can do it like this:
var select = document.getElementById('select');
var value = select.value;
FIDDLE

onchange event in select tag!

The following code should give me a 1 in ParentSelect if I change the option in the menu, but I am getting a 0. Can anyone tell me what is the error?
<input type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="document.forms[0].elements['ParentSelect']=1" >
<option value="NULL">NULL</option>
...
</select>
Here, I have two tables in the database. They contain some fields like ServerName, etc..
Suggestions?
You are directly assigning the value 1 to the property document.forms[0].elements['ParentSelect'], whereas you presumably mean to change the value of the element, which would be achieved like this:
document.forms[0].elements['ParentSelect'].value = 1
I agree with some of the other comments concerning the lack of valid HTML strucutre, and I would add that if you are going to reference the field via document.forms[0], you may as well give the field an id property so you can simply use 'document.getElementById` so your code works regardless of the other forms on the page. Anyway, using your method, here is the complete code:
<form>
<input type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="document.forms[0].elements['ParentSelect'].value=1" >
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
Using an id instead:
<form>
<input id="parentSelect" type="hidden" name="ParentSelect" value="0" />
<select class="style" onchange="var e = document.getElementById('parentSelect'); if (e) e.value=1;" >
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
document.forms[0].elements['ParentSelect'] returns whole input, if you want to set it's value use
document.forms[0].elements['ParentSelect'].value = 1

Categories