I'm trying to get the text of the selected value in HTML select box.
I've tried using onchange event but I realized it is messing up JavaScript calculations. Is there another way to get text of the selected value without interfering with the auto-calculation function?
<select style="width: 300px;" name="typeofdocument" class="form-control" onchange="getText(this)" onchange="javascript:doOrderFormCalculation();" onclick="javascript:doOrderFormCalculation();" id="typeofdocument">
<option value="1" >Essay</option>
<option value="2" >Term Paper</option>
<option value="3" >Research Paper</option>
<option value="4" >Coursework</option>
<option value="5" >Book Report</option>
<option value="6" >Book Review</option>
<option value="7" >Movie Review</option>
<option value="8" >Dissertation</option>
use this code for JQuery
$('#typeofdocument').change(function() {
console.log($(this).val());
javascript:doOrderFormCalculation();
});
and this for native JS
const selectElement = document.getElementById('typeofdocument');
selectElement.addEventListener('change', (event) => {
console.log(event.target.value);
javascript:doOrderFormCalculation();
});
and remove onchange, onclick
Related
I was wondering why why I select 2 with a select tag it returns true in the console. But Whenever I select 2 in the datalist it returns false in the console.
In short I need the datalist to return tru. I need to it be true so that when the user enters in the input I can ensure that the user has enter in a option I wanted (one of the drop down menu options )
function castvote() {
var selected = document.getElementById('vote');
console.log("Chrome" in selected);
}
<input list="vote" onchange="castvote()" id="voteInput">
<datalist id="vote" >
<option value="Chrome">
</datalist>
<label>Choose a browser from this list:
<input id = "a" list="browsers" name="myBrowser"
style="width: 400px;" onclick="test()" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
You should try this.
I just put (.children) at the getElementById() to get all children of datalist and the onChange() function put at the input tag.
<input list="vote" onchange="castvote()" id="voteInput">
<datalist id="vote" >
<option value="2">
<option value="3">
<option value="4">
<option value="5">
<option value="6">
</datalist>
<script>
function castvote() {
var datalist = document.getElementById('vote').children;
console.log("2" in datalist);
}
</script>
I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.
Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?
<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
$(document).on('click','#amount_id',function(){
var result = $("option:selected",this).attr('title');
$("#displayTitle").text(result);
});
});
</script>
OR
<script>
function run(){
document.getElementById("displayTitle").value =
document.getElementById("amount_id").value;}
</script>
Thank you.
Here is a JavaScript alternative of the first code :
<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
document.getElementById("amount_id").addEventListener('change',function(){
var eTitle = this.options[this.selectedIndex].getAttribute('title');
document.getElementById("displayTitle").value = eTitle;
});
</script>
I might sound as completely noob, but could you help me with this?
I have a form with dropdown select and within a lot of text area boxes.
What I need:
When a specific option is selected, I'd like to populate all text area with some text (using JSON).
Code:
HTML
<label>name</label>
<select>
<option value="0" data-num="">name lastname</option>
<option value="1" data-num="">name lastname</option>
<option value="2" data-num="">name lastname</option>
<option value="3" data-num="">name lastname</option>
</select>
<textarea name="name"></textarea>
<textarea name="applicant"></textarea>
<textarea name="applicant_en"></textarea>
<textarea name="email"></textarea>
<textarea name="vat"></textarea>
<textarea name="rc"></textarea>
JSON data
{
"id":["1","2"],
"name":["John Doe","John notDoe"],
"applicant":["lorem ipsum","second"],
"applicant_en":["one","two"],
"email":["mail","mail_two"],
"vat":[61388963,4684645456],
"rc":["123456/0123","87986454/554"]
}"
I've tried something, but I gave up.. Could anyone help me, please?
<select id="some_id">
<option value="0" data-num="">name lastname</option>
<option value="1" data-num="">name lastname</option>
<option value="2" data-num="">name lastname</option>
<option value="3" data-num="">name lastname</option>
</select>
JS:
$("#some_id").on('change',function(){
if($(this).val()==1){
$("input[name='applicant']).val("fetched from json");
}
///else continue with other values
})
EDIT :
provide some id or class to your html.
<textarea name="applicant" id="applicant"></textarea>
In JS :
populate('#MyForm', $.parseJSON(data));
function populate(strFormId,jsonData){
$(strFormId+' #applicant').val(jsonData.applicant[0] +' '+jsonData.applicant[1]);
//do in the same way for other DOM element.
}
I need help on something really simple.
I have 2 dropdown boxes on a form:
<select name="OfficeLocation" >
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
The second one is "Read Only"
All I need to know is how can I change the value of "OfficePhone" by changing the value of "OfficeLocation"? using either a simple JavaScript or JSP Command
Thanks
You are able to use a script like the following:
<script>
menu1 = document.getElementsByName('OfficeLocation')[0];
menu2 = document.getElementsByName('OfficePhone')[0];
menu1.onchange = function(){
menu2.value = menu1.value;
}
</script>
Here you are using the onchange event to initiate a function that make the value on the second menu menu2 equals to the selected value of the first menu menu1.
An online demo is here
Notice that: the script should be placed after your elements.
You gonna need an event handler function for the OfficeLocation select and an id for the second select.
<select name="OfficeLocation" onchange="eHandler">
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone" id="oPhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
You have to implement your event handler in your script, like this:
function eHandler(){
var secondSelect = document.getElementById('oPhone');
secondSelect.value = //the value you want to be selected
}
I am trying to hide a drop-down using JavaScript. The following code I have gotten to work in Firefox and Chrome but testing in IE 8 it does not work.
<select name="month" id="month" onchange="monthselector_changed(this)">
<option value="1">
Jan</option>
<option value="2">
Feb</option>
<option value="3">
Mar</option>
<option value="4">
Apr</option>
<option value="5">
May</option>
<option value="6">
Jun</option>
<option value="7">
Jul</option>
<option value="8">
Aug</option>
<option value="9">
Sep</option>
<option value="10">
Oct</option>
<option selected value="11">
Nov</option>
<option value="12">
Dec</option>
</select>
I then hide it using the following code
document.getElementById("month").style.display = 'none';
Just for clarfication I am trying to hide then entire select box not an option.
$ is invalid in an ID field, so that's probably messing up IE while other browers are being more "relaxed" about the rule.
See this thread for details:
What characters are allowed in DOM IDs?
Edit: I see you're passing in this to a function call. You can use this to do the toggling without an ID. For example:
http://jsbin.com/acisof/1/edit
function monthselector_changed(elem)
{
elem.style.display = 'none';
}