I want to create a dropdown list, user have two option, based on his option show him appropriate form. So if user have Expense and Income element and select Expense show him form to populate expense while hide Income form. That so far looks like this:
Enum:
public enum TransactionType {
EXPENSE("Expense"),
INCOME("Income");
private final String displayName;
TransactionType(String displayName) {
this.displayName = displayName;
}
public String getDisplayName() {
return displayName;
}
}
This is how I populate dropdown list with those two values:
<select id="payment_type" name="payment_type" th:field="${transaction.transactionType}">
<option
th:each="transactionType : ${transactionType}"
th:value="${transactionType}"
th:text="${transactionType.displayName}"
></option>
</select>
That works fine. Now I have form for example like this <form id="Expense"> and another <form id="Income">
And this is JavaScript:
$('#payment_type').on('change', function() {
var val = $(this).val();
$('#Expense').hide();
$('#Income').hide();
$('#' + val).show();
});
I think my main problem is passing those ENUM variables into JavaScript, I found some tutorials how to do this but on that examples I'm manually setting value of elements in dropdown list like:
<option value="Income">Income transaction</option>
While as I show already, With ENUM is like this:
<option
th:each="transactionType : ${transactionType}"
th:value="${transactionType}"
th:text="${transactionType.displayName}"
></option>
And that value from option is being passed in JavaScript, but here I don't know how to pass value from ENUM list inside JavaScript, so actually JS get user selected element and process what need to be done.
Any example or advice how to achieve this? I tried to find something but all answers are for as I said when I set value manually in <option value="">
Related
In my html page, I want to autofill textboxes with informations(common Name, location,..) of the selected object (shop) from the dropdown list without refreshing the page.
this is the dropdown list:
<select id="shops" class="form-control">
<option value="">Choisir</option>
<option th:each="shop : ${shops}" th:value="${shop.uuid}" th:utext="${shop.uuid}" onClick = "autofillValues()"/>
</select>
and this is the script:
function autofillValues()){
document.getElementById('commonName').value = $('#shop').find(":selected").val().siret;
}
I tried several codes for 2 weeks and I can't find the solution yet.
As mentioned by Vincent, the data would need to be held somewhere on the frontend. This could simply be an array within your code or be pulled from a backend endpoint via an API request.
If you, for example, had an array like this:
[
{
uuid:"49c03f73-c0c5-4bc6-bde4-4a01f66f86c1",
commonName:'Shop 1',
location:'New York, NY, US'
},
{
uuid:"1cb2eeb7-6618-4a7a-8334-72cb0c90bf2a",
commonName:'Shop 2',
location:'Toronto, ON, CA'
}
]
Inside your autofillValues function, you can filter the array (lets assume it's called shopList) by id and populate your elements.
<select id="shops" class="form-control" onchange="autofillValues(value)">
<option value="">Choisir</option>
<option th:each="shop : ${shops}" th:value="${shop.uuid}" th:utext="${shop.uuid}" />
</select>
function autofillValues(id){
let shop = shopList.find(f => f.uuid == id);
if(shop !== null) {
document.getElementById('commonName').value = shop.commonName;
}
}
I replaced the onclick attr on the options with an onchange attr on the select for simplicity
This is a very basic implementation, but here's it working on JSFiddle
You need to store he values somewhere in the front end in order to not to a contact the server. Lets assume that you store them in an array : shops
The when you call the autofillValues function when you select a option from the drop down.
in this function, you wind the appropriate value from the array and then populate the items.
If you are only concerned about the refresh, the you can do an ajax call and return the item that way
I am working on a dynamic form that populates a dropdown conditionally based on another input. I have written a directive because the data that comes back will also carry validation rules that need to be applied. However when i apply the validation rules to the dropdown and recompile the select options are borked. The final HTML looks like this:
The questions on the form can depend on another to be answered in a very specific way before they appear. This dropdown for example depends on the country selected but can be required or optional depending on what country is selected. The data coming back from my server gives me a validation object that contains validation information for the input field such as:
var question = scope.question;
var input = element.find('select');
if (question.validation.required) {
if (!input.attr('required')) {
input.attr('required', question.validation.required);
}
}
$compile(input)(scope);
The standard <option value="?" selected="selected"></option> is put in but when the question the dropdown depends on triggers the watch and a request happens for the dropdown the server returns and the backing select values are changed but the HTML output results as seen above all the items that are set to selected are unselectable and the form validation fails.
function answerMatch(countryCode) {
sectionService.getDivisionsByCountryCode(countryCode).then(function (response) {
scope.question.selectValues = response.data;
element.show();
});
}
and an HTML snippet for good measure
<select id="question{{question.questionId}}" name="answer" ng-model="question.value" ng-options="value.text for value in question.selectValues" class="form-control">
</select>
My *.ascx control is a combo box, nothing more, it has a few items as such
MyDropDown.ascx
<select id="Properties" name="properties">
<option value="Name">Name</option>
<option value="Age">Age</option>
<option value="Phone">Phone</option>
</select>
MyDropDown.ascx.cs
//inside the class
public string SelectedValue
{
get { return this.SelectedValue; }
set { this.SelectedValue = value; }
}
MyWebPage.aspx
<%# Register TagPrefix="PropertyList" TagName="propertySelector" Src="~/Views/Shared/MyDropDown.ascx" %>
...
<PropertyList:propertySelector runat="server" ID="PropertySelect"/>
...
<script type="text/javascript">
function BtnClick()
{
var selectedValue = $('.PropertySelect').selectedValue;
...
}
how do I access the selected value in the javascript?
First of all, making a C# property isn't going to expose anything to the client.
Your issue is that you need a way to select the select element from the html instead of trying to select your user control. The easiest way to accomplish what you want is by keeping your code the way it is and adding class='propertySelect' to your select (because you're trying to select based on a css class. Your code is confused about whether you should be selecting by ID or by class). Otherwise you need to start thinking of ways to define a dynamic id for the select and write a selector for it.
//initial code
var selectInputs = document.querySelectorAll('option:checked');
var selectArray=[];
for(var i=0;i<selectInputs.length;i++)
{
selectArray[i]=selectInputs[i].value;//am doing this since I found out (from stackoverflow) that selectInputs contains a NodeList and in order to use it, it must be converted or saved as an array
}
//later stage manipulation code
var input_select= document.querySelectorAll('option:checked');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}
PURPOSE: User selects option in a form and data is saved in local storage.
I want to reflect the same when the form reloads. I am not working for a specific form so using Jquery seems futile(as it works with class or id and I don't know the id or class of any tag of the generic form)
PROBLEM:
The problem is that I wanna select the entire options set of tag and not just the ones that have been checked/selected.The code above sets the value of the default selected option to the one stored in local storage but doesn't reflect the change in the form. It always displays the default value though giving
alert(input_select[i].value);
reflects the internal change perfectly!
Guess I gotta answer my own question :-D
If you could see, there's just one silly change in the
//later stage manipulation code
ABOVE.
ANSWER:
var input_select= document.querySelectorAll('select');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}
Instead of
var input_select= document.querySelectorAll('option:checked');
It must be
var input_select= document.querySelectorAll('select');
REASON: I have been trying to assign the stored value into the option itself (the option tag) rather than the select tag as a whole.
WARNING: In the code
input_select[i].value=selectArray[i];
It could also be
input_select[i].value="Friday";
provided that you already have an option like that, else it would show a blank.
<select name="days" id=days">
<option value="0"> Friday </option>
<option value="1"> Monday </option>
</select>
works
<select name="days" id=days">
<option value="0"> Saturday </option>
<option value="1"> Monday </option>
</select>
doesn't work. Shows a blank.
I am just starting out with some java script in an asp.net mvc web site.
I current have a form which I am working on.
The first field which the user is prompted with is a combobox / select (in html)
here is the code for it:
<select name="select">
#foreach (var item in Model.networks)
{
<option value="">#Html.DisplayFor(modelItem => item.name)</option>
}
</select>
Now my next field depends on the option which they chose from the combo box.
How can I populate the next field based on the option they chose in the combo box?
So when the user navigates to the page they will ave a combo box populated with all the options. Below that will be empty fields. When the user selects a option in the combo box I want it to then populate the empty fields with the corresponding data from the option which was chosen.
How do I go about doing this?
Please give the newby answer as in the method in which it will be done. I am assuming that I will be using java script for it?
Although I cannot understand your question in detail, I hope I can help you.
HTML
If you have a select element that looks like this:
<select id=dropdown>
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Plain Javascript solution
Running this code:
var element = document.getElementByID('dropdown');
var current = e.options[e.selectedIndex].value;
Would make current be 2. If what you actually want is test2, then do this:
var e = document.getElementById('dropdown');
var strUser = e.options[e.selectedIndex].text;
Which would make current be test2
Put the onChange="getSelectedValue" attribute of the select element and then use the following javascript.
<script>
function getSelectedValue(sel)
{
txtToFill.Text(sel.options[sel.selectedIndex].text);
}
</SCRIPT>
If I understand your question correctly you want to react to a combo box value changing and display different content in your page.
If that is the case what you need to know is
how to handle the change event in the select (drop down)
populate empty fields
Here's how you can register and handle the change event in the dropdown:
$("select[name='select']").on("change", function(){
$('#input1').val("What you want in the input goes here");
});
Here's a fiddle that demonstrates this.