I am trying to have an option from a dropdown menu be sent to a Javascript function so I can query a database using AJAX by calling a PHP function. Unfortunately, it seems as if my onchange event is not even firing at all. I attempted to redirect the onchange event to a simple Javascript function just to test, and that is not working either. I can't for the life of me seem to figure it out. Attached below is my sample code (HTML and the sample test Javascript function):
HTML:
<div id="Category_and_Food">
<form>
<select id="categories" onchange="tested()">
<option value = "">Please select a category</option>
<option value="Appetizers">Appetizers</option>
<option value="Entree">Entree</option>
<option value="Specials">Specials</option>
<option value="Drink">Drinks</option>
<option value="Meat">Meat</option>
<option value="Soup">Soup</option>
</select>
</form>
<br />
<div id="cat_display"><b>Please select a category above</b></div>
</div>
Javascript:
<script type = "text/javascript">
function tested()
{
var x = document.getElementById("categories").value;
document.getElementById("cat_display").innerHTML = x;
{
</script>
Prior, I also tested this function with the onchange event being onchange="tested(this.value)" with the function reflecting the changed input.
You have a backwards }:
function tested()
{
var x = document.getElementById("categories").value;
document.getElementById("cat_display").innerHTML = x;
} // <----
Example: http://jsfiddle.net/L2abu/1/
Be sure to run your code through a tool like JSHint to check for syntax errors.
Related
I am currently trying to pass parameters to set the state of the current size selected depending on which option the user is currently on, so i setup a function as well as a parameter that whenever onSelect is triggered it passes the variable of the size but for some reason im getting that my function is not defined, im guessing its my syntax but i cant seem to figure it out, here is my current code:
const updateSize = userSize = () => {
setSize(userSize);
console.log(userSize);
}
<select className="buttons form-control mb-2">
<option onSelect={updateSize("Small")}>Small</option>
<option onSelect={updateSize("Medium")}>Medium</option>
<option onSelect={updateSize("Large")}>Large</option>
</select>
Instead of const updateSize = userSize = () => { make it const updateSize = (userSize) => {
Instead of setting event listeners on individual options, set it on the <select> tag itself. Then get the text of the option selected and use it in tour code.
HTML
<select onchange="updateSize()" className="buttons form-control mb-2" id="select">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
JS
<script>
function updateSize() {
let select = document.getElementById('select');
let text = select.options[select.selectedIndex].text;
console.log(text)
}
</script>
Text value can be Small, Medium or Large depending on what option was selected.
Issue was because my function was inside another function without me noticing thus outside the scope.
If you want to give parameter to a const function use below method.
<select className="buttons form-control mb-2">
<option onSelect={()=>updateSize("Small")}>Small</option>
<option onSelect={()=>updateSize("Medium")}>Medium</option>
<option onSelect={()=>updateSize("Large")}>Large</option>
</select>
Also for your updateSize function. keep the parameters inside the ().
const updateSize = (userSize) => {
setSize(userSize);
console.log(userSize);
}
My onchange function for this form select is executing onload but not when changing the selection in the form. I've tried using both onload and onclick.
I'm obviously only at the debugging implementation stage and will have it do other stuff once it works.
HTML:
<select case="sel1" name="Sort1" id="Sort1">
<option value="0">Fred</option>
<option value="1">Ginger</option>
<option value="2">Judy</option>
<option value="3">Gene</option>
</select>
JavaScript:
window.onload = function() {
document.getElementById('Sort1').onchange = ChgSort();
}
function ChgSort() {
alert(document.getElementById('Sort1').value);
}
When I load the page I get the alert popup with the current select value of 0. But when I click on the select field and change the option nothing happens.
I'm sure, and hope, it's something silly and stupid and I've just been staring and debugging the same function too long...
Help!
You will need to change on line this
document.getElementById('Sort1').onchange = ChgSort();
to this
document.getElementById('Sort1').onchange = ChgSort;
onchange should be function not the returned value look at the example below
window.onload = function() {
document.getElementById('Sort1').onchange = ChgSort;
}
function ChgSort() {
alert(document.getElementById('Sort1').value);
}
<select case="sel1" name="Sort1" id="Sort1">
<option value="0">Fred</option>
<option value="1">Ginger</option>
<option value="2">Judy</option>
<option value="3">Gene</option>
</select>
Your Javascript has:
window.onload = function() {
document.getElementById('Sort1').onchange = ChgSort();
}
The window.onload should be changed to window.onchange and it should work
I have an select option menu which I want to use for multiple functions, but instead of wrapping this code around each function I thought way an I not making a variable outside of it so I can use that. Now I am trying to that with returning the variable and calling that function but it only works the first one and isn't being triggered when I select an other option.
what is the best way to achieve this?
<select id="level_select" onchange="LevelName()">
<option select disabled>Select Level</option>
<option value="2d" id="high_water_pass_1">Highwater Pass 1</option>
<option value="2e" id="high_water_pass_2">Highwater Pass 2</option>
</select>
var name = LevelName();
function LevelName() {
level = $('#level_select').find(":selected").attr("id");
return level;
}
console.log(name);
Here's a working fiddle: https://jsfiddle.net/gdb2xod8/2/.
I really didn't change anything except for the location of the script itself, Click the javascript gear, and you'll notice I've put it in the head
You need to put your script before your html, the head is a good location:
<html>
<head>
<script>
//script here, or better, reference your script in the src attribute
var name = LevelName();
function LevelName() {
level = $('#level_select').find(":selected").attr("id");
console.log(level)
return level;
}
console.log(name);
</script>
</head>
<body>
<select id="level_select" onchange="LevelName()">
<option selected disabled>Select Level</option>
<option value="2d" id="high_water_pass_1">Highwater Pass 1</option>
<option value="2e" id="high_water_pass_2">Highwater Pass 2</option>
</select>
</body>
</html>
Also, I changed your "select" attribute to "selected". Should give you the behavior you're expecting.
You should call console.log inside your function:
function LevelName() {
level = $('#level_select').find(":selected").attr("id");
console.log(level);
return level;
}
Your console.log is triggered once actually.
I looked for a solution for this, but couldn't find it.
I have a simple select like this:
<select id="sltFiltroPedidos">
<option value="todos">Todos</option>
<option value="hoje">de hoje</option>
<option value="semana">da semana</option>
<option value="periodo">Período</option>
<option value="pedido">Número do pedido</option>
</select>
Always the user clicks on an option, a javascript event must be fired.
The onChange event in the select doesn't work for me, because the user can choose the same option, and the event must be fired as well.
I tried the onClick event on options. It works on IE and FF, but doesn't work on Chrome.
Any ideas how can I do it?
I wrote a code but it is not working on IE, just give it a try: http://jsfiddle.net/shahe_masoyan/scuhb/1/
<select id="sltFiltroPedidos">
<option value="todos">Todos</option>
<option value="hoje">de hoje</option>
<option value="semana">da semana</option>
<option value="periodo">Período</option>
<option value="pedido">Número do pedido</option>
</select>
var isOpen = false;
$('#sltFiltroPedidos').on('mouseup', function () {
if (isOpen){
alert(this.value);
}
isOpen = !isOpen;
});
As per your question you can do following :-
<select id="sel" onblur="showme()">
<option value="todos" >Todos</option>
<option value="hoje" >de hoje</option>
<option value="semana" >da semana</option>
<option value="periodo" >Período</option>
<option value="pedido" >Número do pedido</option>
</select>
But i don't know this right option or not. But this will work as you told.
function showme()
{
alert(document.getElementById('sel').value);
}
You can try onclick like,
var prevValue=$('select').val();
$('select').on('click',function(){
if(prevValue==this.value) // code for same values
// your code to run
});
I had the same issue. In my task, I needed to get the value of the selected option. This helped me:
let selectedOption = "";
<select>.addEventListener("change", event => {
selectedOption = event.target.value
});
The select variable is, obviously, the tag .
It might look strange, but select takes the value of the chosen option, that's why the code works.
Use:
$('#sltFiltroPedidos').on('change', function() {
alert( this.value );// or this.val()
});
Hope this will work for you
What I want to do
Auto populate a form text field based on what is selected in a form select field.
What I have done so far
The code below is working perfectly fine during development:
STEP 1: I populate array of data
<script type="text/javascript">
var carcolorData = new Array();
carcolorData['Ford'] = 'Blue';
carcolorData['BMW'] = 'Green';
carcolorData['Fiat'] = 'Red';
carcolorData[''] = 'Hello';
</script>
STEP 2: I create a typical html form with a text and select field:
<form>
<select name="cartype" id="cartype" >
<option selected="selected"></option>
<option>Ford</option>
<option>BMW</option>
<option>Fiat</option>
</select>
<input name="carcolor" type="text" id="carcolor" />
</form>
STEP 3: I create a little javascript function to autopopulate onchange:
<script type="text/javascript">
document.form.cartype.onchange = showColor;
function showColor()
{
var obj_sel = document.form.cartype;
document.form.carcolor.value = carcolorData[obj_sel.value];
}
</script>
The problem
Doesn't work anymore after upload on public_html. Whatever I select it displays 'Hello' which is the color corresponding to blank in my example. I am totally lost... The code is correct since it works fine during development phase. Why is it not working anymore after upload on public_html?
Possible reasons
I am thinking of this but I may be far from the truth...
Different versions of IE (?)
Different development parameters (?)
Conflict with other javascript on the same page (?)
The javascript is not positioned correctly in the script (?)
I think it should be
document.forms
not document.form
To get the select "cartype", assume you got only one form, use:
document.forms[0].cartype
Also, are you missing the <form tag before the <select?
Change this
<script type="text/javascript">
document.form.cartype.onchange = showColor;
function showColor()
{
var obj_sel = document.form.cartype;
document.form.carcolor.value = carcolorData[obj_sel.value];
}
</script>
To this :
<script type="text/javascript">
var showColor = function ()
{
var myform = document.form; //maybe change this to match form with an id.
var selected_cartype = myform.cartype.options[myform.cartype.selectedIndex].value; //better do this to get a select value
myform.carcolor.value = carcolorData[selected_cartype];
}
document.form.cartype.onchange = showColor;
</script>
And there is another problem in the HTML : select's options have no value attribute.
<select name="cartype" id="cartype" >
<option selected="selected"></option>
<option>Ford</option>
<option>BMW</option>
<option>Fiat</option>
</select>
To
<select name="cartype" id="cartype" >
<option value="" selected="selected"></option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
<option value="Fiat">Fiat</option>
</select>