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.
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>
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;
}
So, What I'm trying to do is fairly simple with vanilla JS, but I'm using AngularJS and I would like to know how to do it the best way within the framework. I want to update the selected options in a multiple select box. I do not want to add or remove any of the options. Here is what my HTML looks like:
<select multiple>
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Yellow</option>
<option value="4">Red</option>
</select>
Using the following array, I'd like to programmatically select/deselect options from this list:
[{id:1, name:"Blue"},{id:4, name:"Red"}]
When I set this array in the scope, I want the select box to deselect anything that is not Blue or Red and select Blue and Red. The standard response that I've seen on the Google Groups is to use ng-repeat. However, I can't recreate the list every time because the list of selected values is incomplete. As far as I can tell, AngularJS has no mechanism for this, and I'm at a loss as to how I would do this without resorting to using jQuery.
ngModel is pretty awesome! If you specify the indexes as a model selectedValues
<select multiple ng-model="selectedValues">
built from your list (selected) in a $watch
$scope.$watch('selected', function(nowSelected){
// reset to nothing, could use `splice` to preserve non-angular references
$scope.selectedValues = [];
if( ! nowSelected ){
// sometimes selected is null or undefined
return;
}
// here's the magic
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push( val.id.toString() );
});
});
ngModel will automatically select them for you.
Note that this data binding is one-way (selected to UI). If you're wanting to use the <select> UI to build your list, I'd suggest refactoring the data (or using another $watch but those can be expensive).
Yes, selectedValues needs to contain strings, not numbers. (At least it did for me :)
Full example at http://jsfiddle.net/JB3Un/
How would one go about pulling out just a number in the text of an element? I want to set this as a variable.
ie. If I wanted to have a variable made from option val 171 of the number 12 so I can do calculations with it (I just want to be left with the number 12):
<select id="coloroption">
<option value="172">Granite Gray</option>
<option value="174">Hot Red</option>
<option value="173">Navy</option>
<option value="171">Kentucky Green (min. 12)</option>
</select>
var number = $('#coloroption option[value="171"]').text().match(/\d+/);
Live demo. Depending on the possible values of this option and what you need to extract from it, the regex might need tweaking.
Darin Dimitrov is the exact answer to your question. +1
However, I'm going to suggest a different approach all together, if you have control over your markup. And that's to use data- attributes to explicitly store the information that you want to use, rather than trying to use possibly fragile string parsing to get the data.
<option value="171" data-processing-minutes="12">Kentucky Green (min. 12)</option>
And then retrieve that attribute with
var value = $('#coloroption option[value="171"]').data("processing-minutes");
or
var value = $('#coloroption option[value="171"]').attr("data-processing-minutes");
Though the former is preferred.
This things works perfectly
<select name="selectbox" onchange="alert(this.value)">
But I want to select the text. I tried in this way
<select name="selectbox" onchange="alert(this.text)">
It shows undefined.
I found how to use DOM to get text. But I want to do this in this way, I means like using just this.value.
this.options[this.selectedIndex].innerHTML
should provide you with the "displayed" text of the selected item. this.value, like you said, merely provides the value of the value attribute.
In order to get the value of the selected item you can do the following:
this.options[this.selectedIndex].text
Here the different options of the select are accessed, and the SelectedIndex is used to choose the selected one, then its text is being accessed.
Read more about the select DOM here.
Please try this code:
$("#YourSelect>option:selected").html()
Just use
$('#SelectBoxId option:selected').text(); For Getting text as listed
$('#SelectBoxId').val(); For Getting selected Index value
I know no-one is asking for a jQuery solution here, but might be worth mentioning that with jQuery you can just ask for:$('#selectorid').val()
If you want to get the value, you can use this code for a select element with the id="selectBox"
let myValue = document.querySelector("#selectBox").value;
If you want to get the text, you can use this code
var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;
The question was not for the value but for the text.
Imagine you have something like :
<select name="select">
<option value="1">0.5</option
<option value="2">0.7</option
</select>
And you need to catch the text.
So for me I have tried with html (php), and
this.options[this.selectedIndex].text
(from Delan Azabani) doesn't work but
this.options[selectedIndex].text
work, like this on HTML
<select ... onChange="upTVA(this.options[selectedIndex].text);">
It is still surprising that for a select this.text does not work while this.value works