I'm trying to set the value of a dropdown list based on another dropdown list value inside Angular and using jQuery, it works and it auto selects the wanted value but it doesn't add the value to the database after submitting. I'm sure everything is fine concerning the database connection because choosing any other selected value (for example euro in this case) is added to database.
$(document).ready(function() {
$("#country").change(function() {
var val = $(this).val();
if (val == "usa") {
$("#currency").val("dollar");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form (ngSubmit)="onSubmit()">
<select id="country" name="country">
<option value="usa">usa</option>
<option value="france">france</option>
</select>
<select id="currency" name="currency">
<option value="dollar">dollar</option>
<option value="euro">euro</option>
</select>
<button type="submit" class="btn btn-primary">submit </button>
</form>
NB: Dollar becomes selected but when submitting it's not added to database, whereas if I remove the jQuery function and choose manually the currency , it adds to the database and everything is fine .
The jQuery code seems to be good... but my question is, why are you using jQuery to update a form in Angular.
Did you evaluate use tempalte-driven or reactive forms instead? Below you can find your form written as template driven.
<form (ngSubmit)="onSubmit()">
<select id="country" name="country" (change)="onCountryChange()" [(ngModel)]="selectedCountry">
<option
*ngFor="let country of countries"
[value]="country">
{{ country }}
</option>
</select>
<select id="currency" name="currency" [(ngModel)]="selectedCurrency">
<option
*ngFor="let currency of currencies"
[value]="currency">
{{ currency }}
</option>
</select>
<button type="submit" class="btn btn-primary">submit </button>
</form>
And in this plunkr you can find the full example using template-driven form... but if I where you, I would go for the reactive form approach.
Related
I would like to pass the text portion (not the value) of a form Select-Option to a hidden text-input field within the same form when the user makes a selection.
I have explored some java and PHP 'examples' I found in my research, but none of them seem to work for me.
I have posted a raw example of the form to see if anyone can lead me to water. Any help wouold be appreciated.
HMTL
<html>
<head>
</head>
<body>
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
</body>
</html>
It's not as easy as getting the selected option's value, which can be retrieved simply as selectElement.value, yet it's not difficult at all.
selectElement.options will give you an array of ALL the options inside the select element.
You will find the selected option's index to be selectElement.selectedIndex.
With that said, you can access to the selected option like this: selectElement.options[selectElement.selectedIndex].
Finally, you can get the text property like this: selectElement.options[selectElement.selectedIndex].text
Here's the code:
// THIS CONSTANT REPRESENTS THE <select> ELEMENT
const theSelect = document.getElementById('fruitSelector')
// THIS LINE BINDS THE input EVENT TO THE ABOVE select ELEMENT
// IT WILL BE EXECUTED EVERYTIME THE USER SELECTS AN OPTION
theSelect.addEventListener('input', function() {
// THIS IS HOW YOU GET THE SELECTED OPTION'S TEXT
let selectedOptText = theSelect.options[theSelect.selectedIndex].text
// FINALLY, THIS COPIES THE ABOVE TEXT TO THE INPUT ELEMENT:
document.querySelector('.hiddenField').value = selectedOptText;
})
<form action="fruitBasket.php" method="post" enctype="multipart/form-data">
<select id="fruitSelector" name="fruitSelector">
<option value="0" selected="selected" disabled="disabled">Select Fruit</option>
<option value="1">Grapes</option>
<option value="2">Strawberries</option>
<option value="3">Peaches</option>
<option value="4">Blueberries</option>
</select>
<br>
<br>
<input type="text" class="hiddenField" name="hiddenField" placeholder="Selected fruit appears
here.">
</form>
well if you want to pass the text portion you should add the names as the values too like
---
code
---
<option value="Grapes">Grapes</option>
<option value="Strawberries">Strawberries</option>
---
code
---
I have created with javascript and I get a result of a string.I get that result on my html code
<div id="results"></div>
Next,I want when I select for example Red to check if it is the the same thing (string), the select option - > Red with the string of this code
<div id="results"></div>
I was trying to do it but I failed.It is not working not even sure ,if I press the submit button I will send the string.
<div id="results"></div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="submit" value="results"/>
It appears that you want to check whether the selected option is equal to the text value of the div #results. You can achieve this effect like so:
$(document).ready(function(){
var select = $("select");
$("input[type=\"button\"]").click(function(){
var text = select.find(":selected").text();
if(text==$("#results").text()){
$("#results").html(text+" is equal!");
}else{
$("#results").html(text+" is not equal :(");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results">Red</div>
<form method="post" >
<select >
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input id="results" type="button" value="results"/>
</form>
A form is going to be Sending data somewhere, it would be best to remove the form, leaving the select and button elements. In the button add the code onclick='myFunction() ; when the button is clicked it will run the javascript function called myFunction(). Also you need to give the select a Id. I'm using selectInput
<script>myFunction() { document.getElementById('result').innerHTML = document.getElementById('selectInput').value;} </script>
Now when ever the button is pressed it will set the content of the div equal to the value entity in the selected select box option
You lack an action attribute.
<form method="post" action="path/to/file">
<select name="select">
<option value="">--Please choose an option--</option>
<option value="R">Red</option>
<option value="B">Black</option>
</select>
<input type="submit" value="Get Results" />
</form>
Use a function, and a regular button. No form is needed.
<button onclick='func()'></button>
const func = () => {...}
I'm using JavaScript to pull in some information into a list and I'm not sure how to target a drop-down selection.
This is what I'm using to grab the result of a checked radio button:
RequestType: $("input[name=requestType]:checked").val(),
How would I be able to use the same format to grab the selection of a drop-down?
SessionType:
You don't need to call the function on every click, just a listener for the change-event is normally enough.
If you also want to get the value of the select-input at other moments, you can save the selected value in an variable or query the input-selects with the :selected-option.
$('#rChoices').on('change', function(event) {
let value = event.target.value;
console.log(value);
});
$('#btnGetValue').on('click', function(event) {
let value = $('#rChoices option:selected').val();
console.log(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row rChoices">
<label for="rChoices" class="col-form-label">Please choose a application below:</label>
<select class="form-control" id="rChoices">
<option class="" selected disabled>---------</option>
<option value="onedrive" id="onedrive">OneDrive</option>
<option value="teams" id="teams">Teams</option>
<option value="outlook" id="outlook">Outlook</option>
<option value="officesuite" id="officesuite">Office Suite</option>
<option value="planner" id="planner">Planner</option>
<option value="sharepoint" id="sharepoint">SharePoint</option>
<option value="stream" id="stream">Stream</option>
<option value="yammer" id="yammer">Yammer</option>
</select>
<div class="help-block with-errors"></div>
</div>
<button id="btnGetValue">Get Value</button>
This worked for my current situation:
SessionType: $('#rChoices :selected').text()
I am using angular2#2.4.1 release. How would i do a validation on select field?
<div class="form-group" [class.has-error] = "schoolError">
<label class="control-label" for="lang">Select School</label>
<select class="form-control" name="school"
required #school
[(ngModel)] = "model.school">
<option value="default">Select a school</option>
<option *ngFor= "let sch of school">{{sch}}</option>
</select>
</div>
<button class="btn btn-primary"
[disabled] = "form.invalid" type="submit">Submit</button>
Basically i want to disable the button when the select field is invalid? How do i make the select field invalid when no value is selected?
You can make a boolean variable and assign to it false as default value. When user chooses any option, it will turn true.
https://plnkr.co/edit/yR5xz4h3llkxHsUQxFJB?p=preview
<div>
<select [(ngModel)]='selected'>
<option value='one'>Three</option>
<option value='two'>Two</option>
</select>
<button [disabled]='!selected && form.status == 'VALID'>click</button>
</div>
selected:boolean = false;
Try changing the value in your default option to an empty string:
<option [value]="">Select a school</option>
I run into the same kind of situation and the below snippet seems to work pretty good.
<option [ngValue]="undefined">Select a school</option>
When adding ngForm to your name for your form your validation should work. I assume that is missing, because otherwise your form validation would work as is. So the only thing you would need is to add to your formtag is the aforementioned ngForm, like so:
<form #form="ngForm">
Here's a plunker
I believe you should be able to implement a [disabled]="checkSelectFunction()" on your button and then create a function to check if no value is chosen in the select field.
I am a little late here but the one thing that worked for me was setting the properties to null in the component.
For example,
HTML:
<div class="form-group">
<label for="type">Type</label>
<select
class="form-control"
id="type"
name="type"
[(ngModel)]="appointment.typeId"
required>
<option *ngFor="let aType of types"
[value]="aType.appointmentTypeId">
{{aType.type}}
</select>
Component:
appointment : Appointment = new Appointment(null);
Where model is:
export class Appointment {
constructor(
public typeId: number
) {}
}
I hope this helps someone like me who is new to Angular
I tried to give a value to option of the select like
<select id="something" formControlName="something">
<option value="something">Something</option>
</select>
The value of the option should not be an empty - if it's empty this required field counts as invalid.
i have a conditional field like this :
<form ng-app="myApp" name="frm">
<select ng-model="NewBranchRequest.BranchTypeCode">
<option selected="selected" value="0">third</option>
<option value="1">first</option>
<option value="2">second</option>
</select>
<input class="ng-pristine ng-valid" type="text" name="power" ng-model="NewBranchRequest.PwrCnt" placeholder="sad" ng-required="NewBranchRequest.BranchTypeCode==0">
<span style="color:red" ng-show="frm.power.$invalid">
*
</span>
<button>Submit</button>
</form>
Demo
it works, but option fill from server and it doesn't work.
UPDATE
Check This Demo which is not working .
All i want is after select Bug in select list, input get rquired .
Any idea ?
In http://jsfiddle.net/sadeghbayan/MTfRD/1452/
change
ng-required="form.type==0"
to
ng-required="form.type=='bug'"
I made the changes here: http://jsfiddle.net/MTfRD/1453/
In addition, if you want to get the json object in form.type you can change this
ng-options='option.value as option.name for option in typeOptions'
to
ng-options='option.value for option in typeOptions'