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;
}
Related
I have a function that gets values from a the URL and then posts it to various places on the page.
I can't figure out how to get the values to read inside form field values.
<OPTION Value="<script type="text/javascript">document.write(Position)
</script> has final say">
I know I can't do that specifically, but I've tried various configurations and nothing posts the variable inside the value field.
The document.write function is working on the plain html, I have tested that. I just don't know to make it read inside a form field value and display the results properly.
How do I get one word to display as a variable, without having to create a function that inputs the value of each field. There are way too many fields to make that viable - this needs to populate into maybe 200 or 300 variables, so I really need it to be the word.
The site is standalone so I can't use php as I understand it. If there's a way I'm open to it. I did try the php echo to call the field name but I don't know enough about php to know if I'm missing something.
I am open to solutions where I can upload files into the standalone site though.
Thanks in advance.
Is this what you're looking for?
var position = 'helloworld'
document.getElementById('id1').options[0].value=position;
<select id="id1">
<option>The Value is the POSITION variable.</option>
</select>
I added an ID to the select box (<select id="id1">). Then you can use the script to insert the position variable as the value of the options within the select.
If this is not what you're looking for then you really need to update your question with more sample from your code (i.e some HTML would be nice).
If you are stuck writing code only on the client-side, then you may want to use a client-side library like jQuery to help you manage your DOM manipulation.
For example, you can set a class for every variable you want to set and then use jQuery to replace the contents of those elements.
var values = {
position: "top",
name: "steve"
}
$(".position").text(values.position).val(values.position)
$(".name").text(values.name).val(values.name)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option class="position"></option>
<option class="name"></option>
</select>
<select>
<option class="name"></option>
</select>
<select>
<option class="position"></option>
</select>
<select>
<option class="position"></option>
<option class="name"></option>
<option class="position"></option>
<option class="name"></option>
</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.
How do I utilize the same variable in both JavaScript code and ASP.NET MVC Razor code?
As you can see from the code below, I created a dropdown and filled it with data.
I want the selected item to be utilized in the below div.
When the user clicks on an item, what is contained within that div is revealed
Then the selected string item is used within the if statement within the div
What currently happens is, the selected item isn't globally accessible, causing the issues you can see below.
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="display-field" align="left">
<select name="mydropdown" id="mydropdown" onchange="onChange()">
#foreach (var lLMMI in lIM)
{
<option value="#lLMMI.Key.Product.PCode">
#locItem.Key.Loc.N (#lLMMI.Key.Loc.Code)
</option>
}
</select>
<br /><br />
</div>
}
var itemselected = "";
<div>
<script>
function onChange() {
var item = document.getElementById("mydropdown").value;
$('#summary').show();
}
</script>
<div id="summary">
#foreach (var lLMMI in lIM)
{
if (#lLMMI.Key.Pro.PCode == itemselected.toString())
{
<summary>extra html elements are added etc.</summary>
}
}
You can't use the Javascript variable in the Razor code for two reasons:
They don't exist at the same time
They don't exist in the same place
The Razor code runs on the server to generate the page that is sent to the browser. When the page arrives to the browser it is parsed and the Javascript code runs. To use the Javascript variable in the Razor code would be a time paradox, because it would need to send the value back in time to change how the page was created, but keep the original time line in between...
There are basically two different ways of updating a page depending on input from the user:
Reload the page, including the data in the request.
Use an AJAX call to request that part of the page, including the data as a parameter.
I can't provide you the actual code right now, but here it goes.
You have the following options for your dropdown.
<option value="#lLMMI.Key.Product.PCode">
#locItem.Key.Loc.N (#lLMMI.Key.Loc.Code)
</option>
For example, you want to show #lLMMI.Key.Product.PCode + #lLMMI.Key.Product.PName + #lLMMI.Key.Product.PAddress. Why not load what you will show to your options' values and show them when selected? Like:
<option value="#lLMMI.Key.Product.PCode + #lLMMI.Key.Product.PName + #lLMMI.Key.Product.PAddress">
#locItem.Key.Loc.N (#lLMMI.Key.Loc.Code)
</option>
And change the function to:
function onChange() {
var myDropDown = document.getElementById("mydropdown");
var myValue = myDropDown.options[myDropDown.selectedIndex].value;
var myDiv = document.getElementById("summary");
fieldNameElement.innerHTML = myValue;
}
As others mentioned, you cannot play with Razor (server side) and Javascript (client side) like that. Think of Razor code running only once at the page load. If you want to do stuff after the page load, you need to assign your Razor variables to some client side elements and operate with client side code, JavaScript in your example.
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 know this has been asked before, however I cannot find a solution to my problem.
I have a select box with three options and three values, these values are used to perform some calculations using JS so I cannot change these to match the option text. This is to work out the amount of V.A.T.
My select looks like this:
<select name="tax" id="tax" class="select">
<option value="20">Standard 20%</option>
<option value="0">Zero 0%</option>
<option value="0">Exempt 0%</option>
</select>
Which is fine, however I need to insert the text into the database and not the values, as it needs to be viewed in the backend. I have tried a javascript function to add a hidden input to the select box targeting the option that is selected but that was a bit buggy, and didn't seem right. i was thinking of displaying the text next to the value when it is retrieved from the database, however I wouldn't be able to distinguish from the two 0 amounts.
Could someone please offer some further solutions, best approaches to this.
Many Thanks
You can get the text of the selected option with jQuery as follows:
$("#tax option:selected").text();
You could easily use this within your AJAX request to send the correct value to the database, just assign it to a variable:
var the_text = $("#tax option:selected").text();
Failing that, why not just do the lookup in the JS calculations - it'd make your life so much easier:
<select name="tax" id="tax" class="select">
<option value="standard">Standard 20%</option>
<option value="zero">Zero 0%</option>
<option value="exempt">Exempt 0%</option>
</select>
And your JS could look something like this:
var vat_amount = ($('#tax').val() == 'standard') ? 20 : 0;
You can retrieve the text by JS using the html() function. Or, if you are just using a POST to send the data to the server, try adding both values to the value attribute of the option and split it server side to get the right data.