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.
Related
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="">
I'm a beginner at JSTL as I've only started using it recently to avoid using scriplets in my JSP, and I wanted to ask for help about something I've been stuck in.
I have a select element which I've managed to populate with an arraylist using JSTL. However I also need to dynamically change the value of a readonly text field whenever a different option in the dropdown list is selected, and the value to put in the text field is at the same index in the arraylist as the selected option, and that's where I'm having trouble with.
<select id="department" onchange="managerfill()">
<c:forEach var="dept" items="${departments}">
<option value="${dept.deptname}"><c:out value="${dept.deptname}"/></option>
</c:forEach>
</select>
<input type="text" id="manager" readonly>
I tried to use a js function to change the text field's value but so far, I've had no luck with getting it to work.
function managerfill() {
var x = document.getElementById("department").selectedIndex;
document.getElementById("manager").value="${departments[x].manager}";
}
It would have been easier if both department and manager fields were both dropdown lists, but we were required to make manager a text field so I'm kind of at a loss trying to work around it.
You can't use jstl language on rendered pages.
jstl is server side only and can't be used on end-user browser.
You need to use js to change it.
The function you have wrote is good expect the jstl syntax that cannot be no more interpreted.
function managerfill() {
var select = document.getElementById("department");
var x = select.selectedIndex;
document.getElementById("manager").value = select.options[x].text;
}
Something like this should work.
But I think that the text you want to print is server side, so you can print it in some html/tag or hidden select and take the result from it.
replacing the select.options[x].text:
<select id="departments-manager" class="hidden">
<c:forEach var="dept" items="${departments}">
<option value="${dept.manager}"><c:out value="${dept.manager}"/></option>
</c:forEach>
</select>
function managerfill() {
var select = document.getElementById("department");
var selectManager = document.getElementById("departments-manager");
var x = select.selectedIndex;
document.getElementById("manager").value = selectManager.options[x].text;
}
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.
I have multiple dropdown menus that are the same, I need them to be the same.
<select name="Obrojgoluba" id="otacmajka" class="selectbox_dodajpostojeceg" onchange="dodajpostojeceg('otac')">
<option value="1">06557-07-681</option>
<option value="2">07216-05-552</option>
</select>
This is my jQuery function to get value from that select list
function dodajpostojeceg(x)
{
var ID = $('select[name="Obrojgoluba"]').val();
alert(ID);
}
But problem is that it gets value from the first select list, not from others I have on my site. When I click on the first one it gets good values. but when I click on other select list on my site that are the same as first one it returns or empty or value it remembered from the first select list
You are using this
var ID = $('select[name="Obrojgoluba"]').val();
And it is possible as you said that there are multiple select on your page. So if they are having same name, above code would select the first one and that is what you are getting.
So you can just change the function and markup to made this code workable.
function dodajpostojeceg(element)
{
var ID = $(element).val();
alert(ID);
}
and call this function as like this
<select name="Obrojgoluba" id="otacmajka" class="selectbox_dodajpostojeceg" onchange="dodajpostojeceg(this)">
JS Fiddle Demo
A strange thing to be doing, but try this:
function dodajpostojeceg(x)
{
var ID = $(this).val();
alert(ID);
}
As CBRoe comments, multiple identical IDs are invalid, and this may hamper your progress...
Make sure that the jquery lib is included and the function is defined before the html
<head>
function dodajpostojeceg(x)
{
var ID = $('select[name="Obrojgoluba"]').val();
alert(ID);
}
</head>
<body>
<select name="Obrojgoluba" id="otacmajka" class="selectbox_dodajpostojeceg" onchange="dodajpostojeceg('otac')">
<option value="1">06557-07-681</option>
<option value="2">07216-05-552</option>
</select>
</body>
Fiddle: http://jsfiddle.net/kR8yH/
When the html is rendered, it will look for a function named dodajpostojeceg() and if it not defined, it will not be able to bind the select and the function
I am assuming that all the selects are uniquely named
I am wondering if anyone has any experience using a JQuery plugin that converts a html
<select>
<option> Blah </option>
</select>
combo box into something (probably a div) where selecting an item acts the same as clicking a link.
I guess you could probably use javascript to handle a selection event (my javascript knowledge is a little in disrepair at the moment) and 'switch' on the value of the combo box but this seems like more of a hack.
Your advice, experience and recommendations are appreciated.
The simple solution is to use
$("#mySelect").change(function() {
document.location = this.value;
});
This creates an onchange event on the select box that redirects you to the url stored in the value field of the selected option.
I'm not sure where you want to link to when you click the Div, but given something like this perhaps would work:
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</options>
</select>
<div id="myDiv"/>
and the following JQuery creates a list of <div> elements, a goes to a URL based on the value of the option:
$("#mySelect option").each(function() {
$("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) {
location.href = "goto.php?id=" + event.data;
});
});
$("#mySelect").remove();
Does this do what you want?
If you're going to have a lot of select boxes that you want to allow to use as redirects, without having to define them independently, try something similar to:
$("[id*='COMMON_NAME']").change(function() {
document.location = this.value;
});
And have your select boxes be named accordingly:
<select id="COMMON_NAME_001">...</select>
<select id="COMMON_NAME_002">...</select>
This creates a onchange event for all IDs containing "COMMON_NAME" to do a redirect of the <option> value.
This bit of javascript in the 'select':
onchange="if(this.options[this.selectedIndex].value!=''){this.form.submit()}"
It's not ideal (because form submissions in ASP.NET MVC which I'm using don't appear to use the routing engine for URLs) but it does its job.