select onChange not working inside a form
Solution 1
Your function name conflicts with name
and id
of the select
, just give another name to the function.
Solution 2
You can't name a function the same as an element on your page. I suggest changing the function name to something like viewroomSelected
as shown here in this jsFiddle.
Relevant changes:
function viewroomSelected()
{
alert(123);
}
<select name="viewroom" id="viewroom" onChange="viewroomSelected()">
Solution 3
I found that as you set name
and id
attribute same of your function name causing this conflict and prompting error viewroom
is not a function, change the name of function. also define your js at the bottom of document.
function viewRoom()
{
alert(123);
}
Shih-Min Lee
I help people get trading ideas in the stock market. https://www.tradeideashq.com/
Updated on July 23, 2022Comments
-
Shih-Min Lee almost 2 years
I have a question about form submit & onchange events not working together. When I change the value on the dropdown list the event viewroom() is not firing. Could anyone help me with this? The code is as follows
<script type="text/javascript"> function viewroom() { alert(123); } </script> <form id="myform" name="myform" action="joinroom.php" method="post"> <select name="viewroom" id="viewroom" onChange="viewroom()"> <option value="1">Room1 </option> <option value="2">Room2 </option> </select> <input type="submit" onclick="this.form.submit()" value="Join room"><br> </form>
-
Shih-Min Lee about 11 yearsAlso interestingly, if I move the select statements outside of the form, then the onChange event works without a problem. (is this normal or just I get lucky?)
-
Teemu about 11 yearsUnfortenately I don't know, the code seems to work exactly you desrcibed.
-
ewH almost 9 yearsThis wasn't exactly my issue, but I did have a naming conflict. Points for steering me in a good direction. Thanks!
-
Majali over 5 yearsAwesome! Thanks!