Develop Reference

preselect dropdown in angular7

i have this form for edit user info :
<form [formGroup]="editUSer">
<input formControlName="name">
<select formControlName="roleName">
<option *ngFor="let item of listRole">{{item.name}}</option>
</select>
</form>
use this code for setvalue in form :
this.editUSer.setValue({
name:this.usermodel.name,
roleName:this.usermodel.roleName
})
but i need to set dropdown user value .
for exmaple user have manager role but it not set the manager in drodown .
Sample Code
how can i set value of user in dropdown .

After checking your usermodel property, I have realised that it is binded to the name of item in listRole. Therefore, You will need to bind the value attribute on your to the name property of item (item.name).
<form [formGroup]="editUSer">
<input formControlName="name">
<select formControlName="roleName">
<option *ngFor="let item of listRole" [value]="item.name">{{item.name}}</option>
</select>
</form>
As for your component.ts, I don't see any glaring issues. I have edited your demo over here.

Why not bind the selected attribute.
<form [formGroup]="editUSer">
<input formControlName="name">
<select formControlName="roleName">
<option *ngFor="let item of listRole" [selected]="item.name === roleName">{{item.name}}</option>
</select>
</form>

How to capture html form input with flask using jquery chosen multiple select

I have an HTML form with jquery-chosen multiple selection of countries. I want to send this input to Flask through the POST request. The problem is that Flask does not capture the selections.
When I do not use js chosen, it works:
<div class = "webform">
<form method="POST" action = "/monthly_active" name = "countries">
<p>Select countries</p>
<select multiple id="Country" name="Country">
<option>Select...</option>
<option value="DE">DE</option>
<option value="AT">AT</option>
<option value="RU">RU</option>
<option name="PL">PL</option>
<option name="IT">IT</option>
<option name="GB">GB</option>
<option name="BR">BR</option>
</select>
<input type="submit" value="Submit">
</form>
But with js chosen it does not work:
<form method="POST" action = "/monthly_active" name = "chart_options" >
<p>Select countries</p>
<select name = "countries[]" data-placeholder="Countries" multiple class="chosen-select" tabindex="8">
<option value="AT">AT</option>
<option value="GB">GB</option>
<option value="RU">RU</option>
<option selected>DE</option>
<option disabled>Sun Bear</option>
<option selected>ES</option>
<option disabled>Spectacled Bear</option>
</select>
<script> $(".chosen-select").chosen(); </script>
<input type="submit" value="Submit">
</form>
In Flask I use request.form.getlist() to get the input list.
The thing is I very very basic with HTML and javascript, thus, I am stuck how to manage this problem.

Solved:
My mistake was in request.form.getlist('chart_options'):
I passed the name of the form there whereas I had to pass the name of the <select>
This worked:
target_countries = request.form.getlist('countries[]')

Select decides which form action to open

I have a form that starts with a select. Based on the choice of that first select (which report is chosen) I need to change the action path of which .cfm the form submits to. Will someone please assist me in how I should do this? I am open to any proper way whether is HTML, ColdFusion or jQuery (Javascript).
So starts with a select:
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
<option id ="locationreports" value="locationreports" >Location Stats</option>
</select>
If #checklistreports is chosen the form should be
<form name="generatereport" method="post" action="_checklists_queries.cfm">
But if #locationreports is chosen the form should be
<form name="generatereport" method="post" action="_location_queries.cfm">
Any help with this would be greatly appreciated.
I was trying to do in IF statement in CF but it has me stuck unfortunately with no results.

You can use a .change handler to change the action attribute of the form.
$("#reporttype").change(function() {
if ($(this).val() == "checklistreports") {
$("form[name=generatereport]").attr("action", "_checklists_queries.cfm");
} else {
$("form[name=generaterport]").attr("action", "_location_queries.cfm");
}
});

I would recommend to just indicate the action values of the form in the values of the options.
$('#reporttype').change(function(){
form_action = $(this).val();
$('form').attr('action', form_action);
$('span').text(form_action);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option value="_checklists_queries.cfm" >Checklist Stats</option>
<option value="_location_queries.cfm" >Location Stats</option>
</select>
<form name="generatereport" method="POST" action="#">
<p>This forms action value is <span>#</span></p>
</form>

You could always do it all with ColdFusion. It's so much simpler. Here is one approach.
formPage
<form action = "action.cfm" method="post">
<select name="pageToInclude">
<option value="locationQueries.cfm">Location</option>
rest of form.
action.cfm
<cfinclude template = "#form.pageToInclude#">

You already have an accepted answer, but I would like to propose a slightly cleaner solution to the answer you selected, as well as an alternative:
Option #1 (Inline and Clean):
// Cache the selector for better reuse.
var form = $("form[name=generatereport]");
$("#reporttype").change(function() {
var action = $(this).val() === 'checklistreports' ? '_checklists_queries.cfm' : '_location_queries.cfm';
form.attr('action', action);
});
The above option is just a more compact version of the answer you selected, but utilizes selector caching, which is good for performance.
Option #2 ('Global' Config Options):
// Cache the selector
var form = $('form[name=generatereport]');
// Now you can define the variable states for your app.
var config = {
checklistreports: {
action: '_checklists_queries.cfm'
},
locationreports: {
action: '_location_queries.cfm'
}
};
// Updating is trivial
$('#reporttype').change(function() {
var selected = $(this).val();
form.attr('action', config[selected].action);
});
This option is interesting because it lets you define all the different "states" for your components in one place, which is nice for readability and maintenance, and it makes the actual updating of components as simple as looking up the values it should have.

If the forms contains differents elements, you could hide the forms with css and with an onchange handler on the select unhide the right form.
html:
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option value="checklistreports" >Checklist Stats</option>
<option value="locationreports" >Location Stats</option>
</select>
<form method="post" action="_location_queries.cfm" id="locationreports" style="display: none;">
<input type="text" name="location" placeholder="location">
</form>
<form method="post" action="_checklists_queries.cfm" id="checklistreports" style="display: none;">
<input type="text" name="location" placeholder="checklist">
</form>
js:
var locationReport = document.getElementById("locationreports");
var checklistReport = document.getElementById("checklistreports");
function onChangeForm(e) {
if (e.target.value === "locationreports") {
locationReport.style.display = "block";
checklistReport.style.display = 'none';
} else {
checklistReport.style.display = "block";
locationReport.style.display = "none";
}
}
document.getElementById("reporttype").onchange = onChangeForm;
jsfiddle example

Can't get value of select field in a form with jquery

I want to get the value of all elements in a form on submit button. I serialize the data in the form but for some reasons that I don't understand in the serialised data the value of selected option on select field is not included there.
Here's a Js fiddle
My form looks like this:
<form id='foo'>
<p>
<label>Message</label>
<textarea id='message' name='message' rows='5'></textarea>
</p>
<br/>
<p>
<label>Name</label>
<select id = "name">
<option value = "1">one</option>
<option value = "2">two</option>
<option value = "3">three</option>
<option value = "4">four</option>
</select>
</p><br/>
<div id='success'></div>
<button type='submit'>Send</button>
</form>
<p id="showdata">
</p>
On submit of this form I some jquery code that handles it. It looks like this :
// Bind to the submit event of our form
$("#foo").submit(function(event){
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
$('#showdata').html(serializedData);
});
Can somebody help me to understand where is my problem! Thank you in advance.

Forms work on the name, and not ID attribute. Give you select element a name value and it will work.

Your code seems to correct but you have a mistake.
Look at select , it has no attribute name. So, $form.serialize() will not work on this element.
This is fixed by add attribute name to select
<form id='foo'>
<p>
<label>Message</label>
<textarea id='message' name='message' rows='5'></textarea>
</p>
<br/>
<p>
<label>Name</label>
<select name="test">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</p><br/>
<div id='success'></div>
<button type='submit'>Send</button>
</form>
<p id="showdata">
</p>
More information : Form Serialize

If you use $form.serialize() in select element you should add attribute name in there because $form.serialize() will get values from attribute name
Update
https://jsfiddle.net/drhe1L9u/
Add attribute name to select element

Fetching HTML input from text and drop down menu in Javascript?

I want to provide users two input mechanisms - text entry and drop down menu by using element. The input value is fetched in javascript. (no php used).
I can make each method work, but not simultaneously.
This is probably fundamental question, but could someone explain how I need to set up event-handlers as well as value for each input to make this work?
<form name="myform" onsubmit="return userInput()">
<select id="myVal" onchange="userInput()" onsubmit="return userInput()">
<option>Select a country</option>
<option value="All Countries">All Countries </option>
<option value="Austrailia">Austrailia</option>
<option value="Korea">Korea </option>
<option value="Austria">Austria </option>
<option value="United States of America">United States of America
</option>
<option value="Japan">Japan</option>
<option value="Canada">Canada </option>
<option value="India">India</option>
</select>
<!-- <input name="Submit" type="submit" value="Add to list" > -->
<input type="text" id="myVal" placeholder="Add some text…">
</form>
// Javascript code where I fetch user input.
function userInput(event){
userinput = document.getElementById("myVal").value
// console.log(userinput)
// console.log(document.getElementById("myVal").value)
//draw(document.getElementById("myVal").value)
d3.select('svg').remove();
main();
console.log("Main has been called")
// draw(document.getElementById("myVal").value)
return false;
}

Both your select element and your text input element have the same ID. Make them unique and make one call for each element in your JS. Also, get rid of the onsubmit event handler attribute in your select element.