I don't know how to change this, but whenever I use my select option, it always goes to null.
This is my HTML code,
<select type="number" class="footer" id="chooser"
ng-change="selectchange(selectedPage)"
ng-model="selectedPage" min="1"
ng-options="x for x in pages">
<option value="" selected="false" hidden>
</select>
Is there any reason it changes to null. Because when it changes it sends another request to angular.
What is the problem here, and how to solve it?
Use this in html
<select class="footer" id="chooser" ng-change ="selectchange()" ng-model="selectedPage" ng-options="x in pages"></select>
And in your controller:
$scope.selectedPage = "1";
$scope.pages = [1, 2, 3, 4];
$scope.selectchange = function() {
console.log("selectedPage changed to : ", $scope.selectedPage);
}
For more information read https://docs.angularjs.org/api/ng/directive/select
You have set the option value to null and it always selected by selected tag. So it select null value every time, remove that option value and use ng-options to set the options in your selected box. No need to use option tag.
<select type="number" class="footer" id="chooser"
ng-change="selectchange(selectedPage)"
ng-model="selectedPage" min="1"
ng-options="x for x in pages">
<-- <option value="" selected="false" hidden> --> // remove this line
</select>
Related
By default the input area is set to readonly. Now I want that if user selected the Selection 3 the input area will now be inputable with text. How can I do this?
<div class="form-group">
<label for="selections">Options:</label>
<select class="form-control" id="selections" required>
<option value="sel1">
Selection 1</option>
<option value="sel2">
Selection 2</option>
<option value="sel3">
Selection 3</option>
</select>
</div>
<label for="textsection">Text to be edit:</label>
<input type="text" class="form-control" id="textsection" maxlength="34"
placeholder="User can type here if he select option 3" readonly>
you need to use Javascript, select the elements (select and the input), add an Event Listener on your select element, then you can create a function to handle this behavior. Try something like this:
const select = document.querySelector("#selections");
const text = document.querySelector("#textsection");
select.addEventListener("change", handleSelectChange);
function handleSelectChange(event) {
const value = event.target.value;
value === 'sel3' ? text.readOnly = false : text.readOnly = true;
}
You'll have to include this script in your HTML file.
I have a menu page & I have few options. When I click any option, the page should redirect to a login page. Where in the login page, I have a select drop down which contains 4 options. Based on the menu selection, I need to display option which should be the default selected. That is if I click on supplier option in the menu, I need to display supplier option selected in the login page.
<a [routerLink]="['/login', {'params': 2}]"> Go </a>
So I'm just passing a parameter in URL & based on this I'm trying to select an option in the login page.
<select name="role" class="form-control input-xs input-sm input-md" [(ngModel)]="role">
<option *ngIf="{"params":"2"}" value="" disabled>Login as</option>
<option *ngIf="{"params":"3"}" value="1" selected="selected" >Supplier</option>
<option *ngIf="{"params":"4"}" value="2" selected="selected">Customer</option>
<option *ngIf="{"params":"5"}" value="3" selected="selected">OEM</option>
</select>
I'm not getting my expected result. Can somebody help me with this?
Your question is so general but I mention a sample answer. I hope it can help you.
In select tag, if you want to set a value as default you should set selected="selected" for it but in angular, you can use it as dynamic and bind it to a variable like [selected]="something === true".
If you write something like below i.e
<select name="role" class="form-control input-xs input-sm input-md">
<option value="" [selected]="myUrl === 'Login'">Login as</option>
<option value="1" [selected]="myUrl === 'TSP'">TSP</option>
<option value="2" [selected]="myUrl === 'Telemarketer'">Telemarketer</option>
<option value="3" [selected]="myUrl === 'TRAI'">TRAI</option>
</select>
Then declare myUrl in your typescript file public myUrl: string;
Now just set myUrl value to each route you would like its name to be the default.
See also Stackblitz
If the below code order status is equal then selected same will displayed in drop down.
{{ordsts.statusName}}
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>
<select name="status" required>
<option selected disabled>status</option>
I have set required attribute in html select.
My first option set selected disabled for display text.
However it will cause required attribute not working.
anyone know how to solve this problem?
Set <option>'s value to empty string ('').
Updated Code
<select name="status" required>
<option selected disabled value="">status</option>
<!-- Additional options here (at least one should not be disabled) -->
</select>
Explanation
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input → raising the required message.
More info (w3schools)
The value attribute specifies the value to be sent to a server when a form is submitted.
Example
document.querySelector('form').onsubmit = (e) => {
e.preventDefault();
const status = e.target[0].value;
console.log(`Your status is: "${status}"`);
}
<form>
<select name="status" required>
<option selected disabled value="">Select a status...</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
<input type="submit" value="Submit">
</form>
I have a checkbox in my HTML that looks like this:
<input type="hidden" name="<TMPL_VAR NAME=SHORT>" value="<TMPL_VAR NAME=ELSE>">
<input type="checkbox" name="<TMPL_VAR NAME=SHORT>" id="checkbox-2" value="<TMPL_VAR NAME=FLAG>" class="checkbox mid-margin-left">
<label for="checkbox-2" class="label"><TMPL_VAR NAME="NAME"></label>
Basically, what I am trying to accomplish here is for one value to be sent if the checkbox is checked, and another to be sent if the checkbox is not checked (a default value basically). Now, this is dynamic, so I am really unable to do something in the CGI to say, "If this is defined then it means this, and if it's not then it means something else."
Anyway, when I leave the box unchecked, I get the value from the hidden input. However, when I check it I get both values. Now, I could say, "If this has more than one value, then the value to use is the second one." But, what if I am getting the value of a select list that accepts multiple values? In that situation I don't want to say take the 2nd value, because all values sent are valid.
So, what I am trying to say is this: "If it is a checkbox, and there is more than one value, then take the second value; otherwise, take the first."
Any ideas on how to do this? Maybe I am not doing this right? Any suggestions on a better way to accomplish this? I don't want to use a radio button for a boolean (yes/no), but if that's the only way, then so be it.
If you do not want JS, I would suggest you change your form so there's an alternate value for every field with a prefix on the name:
<form id="myform" method='post' action="/echo/json/">
<input type="hidden" name= "alternate-foo" value="foo not selected" />
<input type="hidden" name="alternate-bar" value="first bar" />
<p>Foo <input type='checkbox' name='foo' id='foo' value='foo selected' /></p>
<p>
<select name='bar' id='bar' multiple>
<option value='first bar'>bar 1</option>
<option value='second bar'>bar 2</option>
<option value='third bar'>bar 3</option>
</select>
</p>
<p><input type='submit' name='submit' value='submit' /></p>
</form>
In your Perl code, you could do something like this:
use strict;
use warnings;
use CGI;
my $q = CGI->new;
$q->param( 'foo', $q->param('alternate-foo') ) unless $q->param('foo');
$q->param( 'bar', $q->param('alternate-bar') ) unless $q->param('bar');
Or, to be more dynamic:
use 5.014;
foreach my $alt ( grep { /^alternate-/ } $q->param ) {
my $name = $alt =~ s/^alternate-//r;
$q->param( $name, $q->param( $alt )) unless $q->param($name);
}
I would do it with JavaScript and jQuery for convenience. Only downside is, it will not work if your clients have disabled JS.
Your form could remain pretty much the same. I made a simple example. Make sure there are ids on everything.
<form id="myform" method='post' action="/echo/json/">
<input type="hidden" id="hidden-foo" value="foo not selected" />
<p>Foo <input type='checkbox' name='foo' id='foo' value='foo selected' /></p>
<p>
<select name='bar' id='bar' multiple>
<option value='first bar'>bar 1</option>
<option value='second bar'>bar 2</option>
<option value='third bar'>bar 3</option>
</select>
</p>
<p><input type='submit' name='submit' value='submit' /></p>
</form>
Now here's the JS code, which should be placed below the form or inside an event handler for the load event:
$(document).ready(function() {
$("#myform").submit(function(){
// if checkbox is not checked, change value and check so it's transmitted
if (! $("#foo").is(":checked")) {
$("#foo").val($("#hidden-foo").val()).prop('checked', true);
}
// take first option if no option is selected
if( $("#bar option:selected").length == 0 ) {
$("#bar option:first").attr('selected','selected');
}
})
});
It's pretty straight-forward:
if the checkbox is not ticked, it will change it's value to the one of the hidden field and tick it.
if no option is selected, it will select the first one
Here's a jsFiddle to demonstrate. You should open your Firebug console to see the output.
It should now be fairly easy to turn this into something dynamic that can handle all form fields without your template engine having to meddle with the JS code.