Is it possible to select a specified value from a combo box by clicking on a button.
option 1:
Suppose you want to set value to 3 in your dropdown named 'sel'
<input type="button" value="set to 3" onclick="document.getElementById('sel').value = 3" />
option 2:
If you want to set specific text (say 'myvalue') as selected display text (which already exists in the dropdown list), then you can use loop
for (i=0;i<document.getElementById('sel').length;i++)
{
if ('myvalue' == document.getElementById('sel').options(i).text)
{
document.getElementById('sel').options(i).selected = true;
return;
}
}
Related
I created two input boxes to store some value. I have alotted a value for each inputs such that on entering those values only i should get the current button changed to a different one. Now I have two questions here-
On implementing this , I am not able to see the by default button which should be present here, instead I see the changed button which i wanted that too only when I enter the values i alotted in the input boxes. How can i fix this such that if i dont enter anything or enter wrong values in input boxes my default button should still be visible.
I want these two input boxes under a particular option lets say "XYZ" . This means when i choose "XYZ" then only these boxes should appear and work after providing values.
I am trying to use a dropdown here but not able to get the input boxes after clicking the dropdown option. They are side b y side the dropdown.
I am attaching some code to explain, cant attach whole code because of company policies.
XYZ:
<select id="xyz" name="xyz" onchange="renderxyzButton()">
<option Selected Disabled>Select</option>
<option value="XYZ">XYZ</option>
</select>
X:
<input type="text" size="50" id="x" name="x" />
Y:
<input type="text" size="50" id="y" name="y" />
document.querySelector("#xyz").addEventListener('change', function(e) {
e.somefunc();
if ($("#xyz").val() === "XYZ") {
renderxyzButton();
} else {
renderButton();
}
});
function renderxyzButton() {
if ($("#x").val() === "P") {
document.querySelector("#x").addEventListener('input', function(e) {
e.somefunc();
renderButton();
});
} else {
renderButton();
}
if ($("#y").val() === "C") {
document.querySelector("#y").addEventListener('input', function(e) {
e.somefunc();
renderButton();
});
} else {
renderButton();
}
}
I have an array of objects
and i have a dropdown box with these names in with a text box to show the value that is inside the object that is selected
I have the input box set to
<input type="text" class="form-control" ng-model="o.boxes.box1[0]">
is there a way to set "box1[0]" to the selected dropdown value? the dropdown box is selectedNumber. I tried ng-model="o.boxes.{{selectedNumber}}[0]" but this didnt work.
ng-model="o.boxes.{{selectedNumber}}[0]"
You can do what you want with just a lit refactor of your code.
The best way to do this should be: update input ng-model reference with the current selection of your dropdown.
In your Controller:
$scope.boxes = {
box1: [],
box2: [],
box3: []
}
$scope.selectedBoxModel = null;
$scope.onDropdownSelection = function (selectedBox) {
$scope.selectedBoxModel = selectedBox;
}
And in your template on your input you will reference the ng-model with the selected box:
<input type="text" class="form-control" ng-model="selectedBoxModel[0]">
Try giving run time expression evaluation as shown below.
ng-model="o.boxes[{{selectedNumber}}][0]"
I have this input:
<input type="checkbox" ng-model="area.id" data-id="{{area.id}}"/>
and some ng-click action above, I'm trying to collect all selected checkboxes id's but after check action data-id attribute turns to true/false, why?
Function from controller:
collectSelectedAreas($event) {
let selectedArea = $event.currentTarget.querySelectorAll('input:checked');
let areaIds = [];
[selectedArea].forEach((el) => {
console.log(el.attributes['data-id'].value);
});
}
Option 1:
You could select another property to track the checkbox value (true/false) like this:
<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}"/>
area.selected = true in case of checkbox is selected
Then in your function, iterate over your area's Array, lets suppose you have an arrayOfAreas, the same array that you are iterating in your ng-repeat
collectSelectedAreas() {
let areaIds = [];
arrayOfAreas.forEach((el) => {
if (el.selected){
areasId.push(el);//Add selected element to array
console.log(el.id);
}
});
}
Option 2:
<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}" ng-true-value="area.id" ng-false-value="'NO'"/>
It means that when checkbox is checked area.selected will take the area.id value, otherwise the string 'NO';
You need not to access DOM for getting selected checkbox. You can check this by checking the model value area.id . It will contain true for if checkbox is selected. Then you can traverse through area object, where you can get key to identified the id of selected checkbox.For Eg.
<input type="checkbox" ng-model="area.id" />
where
$scope.area.id==true if checkbox is selected.
in need your help. i have option select:
Relationship:
<?php
$relationship=array(
''=>'Choose relationship',
'child'=>'child',
'guardian'=>'guardian',
'parent'=>'parent',
'wife'=>'wife',
'husband'=>'husband',
'mother in law'=>'mother in law',
'futher in law'=>'futher in law'
);
echo form_error('relationship');<br />
echo form_dropdown('relationship', $relationship, set_value('relationship'), array('id'=>'relationship'));
?>
how can i make input box to appear if selection is made? example if i choose mother i want input box for address to appear, if i choose child i want input box for birth date to appear...
trigger an event when an option is selected, then check which option was selected and display the input box accordingly.
for example:
$('selectbox').on('change', function (e) {
if( this.value == 'mother')
{
$('addressinput').show();
}
});
I'm hoping you can please help.
I have the following HTML code:
<select id='bonus1frequency'>
<option value="0">Annual</option>
<option value="1">Half Yearly</option>
<option value="2">Quarterly</option>
</select>
Depending on what option is selected, fields are displayed in a divider. For example if you select annual, a field to enter annual bonus is displayed. If you select 'Half Yearly' two fields to enter two half yearly bonuses are displayed.
The trouble I'm having is that if you select 'Half yearly' for example, then enter what the half yearly bonus into the fields, then you change your mind and decide you want to enter an annual bonus instead, the values that you enter into the half yearly bonus are retained. I need them to be set to zero when you switch between options in the html select box.
I tried the following code to help with this but it's not working and i'm not sure why. All it does is prevent me from putting anything at all into the half year boxes.
var bonus_val_1 = document.getElementById("bonus1frequency");
var strUser = bonus_val_1.options[bonus_val_1.selectedIndex].value;
if (strUser = "0") //if annual bonus is selected
{
document.getElementById("halfyear_bonus_one").value = 0.00;
}
Edit:
I'm using the following JQUERY in the main HTML document to actually switch what fields are displayed when the user selects each option. So if the user selects option value 0 'annual' in the select box, the following code will show the annual bonus divider containing the annual bonus field, and hide the dividers that show half yearly and quarterly bonus fields.
Based on comments about how I need to tie resetting these fields to the change event, I just thought maybe I can reset the fields to zero within the following jquery code. However I'm even less familiar with JQUERy and not sure how to do that...any help would be much appreciated.
$('#bonus1frequency').on('change', function() {
if ( this.value == '0')
//.....................^.......
{
$("#annual").show();
$("#halfyearly").hide();
$("#quarterly").hide();
}
if ( this.value == '1')
//.....................^.......
{
$("#annual").hide();
$("#halfyearly").show();
$("#quarterly").hide();
}
EDIT 2
I have updated the code as follows:
$('#bonus1frequency').on('change', function() {
if ( this.value == '1')
//.....................^.......
{
$("#annual").show();
$("#halfyearly").hide();
$("#quarterly").hide();
$("#halfyear_bonus_one").val("0");
This prevents me from entering a value into the halfyear bonus one field. It just keeps resetting the value to zero. I've added an empty 'choose' option to the select box but it hasn't made a difference. Any ideas?
Please refer following for help and add code for quarterly. Use jquery instead of using javascript code to get elements.
<select id="bonus1frequency">
<option value="0">Annual</option>
<option value="1">Half Yearly</option>
<option value="2">Quarterly</option>
</select>
<div id="annual" style="display: none;">
<input type="text" id="a1">
</div>
<div id="half" style="display: block;">
<input type="text" class="b2">
<input type="text" class="b2">
<script>
$('#half').hide()//Same as this hide quarterly div
$("#bonus1frequency").change(function(){
var strUser = $(this).val()
if (strUser === "0") //if annual bonus is selected
{
$('#annual').show()
$('#half').hide()
$(".b2").val(0);
}else{
$('#half').show()
$('#annual').hide()
$('#a1').val(0)
}
})
</script>
</div>
The problem with your code is that you're not binding it to the select's change event. It will run when loading the page, and since the default option in the dropdown is "Annual", the value which will appear as the value of #halfyear_bonus_one would be 0.00 and won't change, even if the user will choose another option in the dropdown.
You should create a js function which contain your code (with few corrections)
and then bind it to a change event of the dropdown.
Moreover, you should add conditions to handle the other scenarios: "half yearly" and "quarterly".
var bonusval1 = document.getElementById("bonus1frequency");
bonusval1.onchange = function () {
var strUser = bonusval1.options[bonusval1.selectedIndex].value;
if (strUser == "0"){ //if annual bonus is selected
document.getElementById("halfyear_bonus_one").value = "0.00";
} else if(strUser == 1){ //Half yearly is selcted
document.getElementById("halfyear_bonus_one").value = "1.00";
} else { //quertly is selected
document.getElementById("halfyear_bonus_one").value = "2.00";
}
}
Now, there's another problem - the default value is the first value - but the "onchange" event won't trigger. We can run the function outside of the onchange event in order to handle the default value or you can add a blank option to the dropdown as the first option, something like "Choose:" or whatever.
Jsfiddle
Regarding the second question
I didn't understand why would you use jQuery all of a sudden when you already
wrote pretty good js code. Those kind of decisions should be considered in the beginning of the process.
Anyway, You can use the .val() function to change the value of the input fields. I don't have the code of your form and the dividers but it should be pretty much like the following:
if ( this.value == '0')
//.....................^.......
{
$("#annual").show();
$("#halfyearly").hide();
$("#quarterly").hide();
$("#id_of_input_for_halfyearly").val("0");
$("#id_of_input_for_quarterly").val("0");
}
I think this will help you out.
jQuery('#bonus1frequency').on('change',function(){
if(this.value==1){
jQuery('.yearly').val('').show();
jQuery('.half-yearly').val(0).hide();
jQuery('.quarterly').val(0).hide();
}else if(this.value==2){
jQuery('.yearly').val(0).hide();
jQuery('.half-yearly').val('').show();
jQuery('.quarterly').val(0).hide();
}else if(this.value==3){
jQuery('.yearly').val(0).hide();
jQuery('.half-yearly').val(0).hide();
jQuery('.quarterly').val('').show();
}
})
Check this Demo