CODEWITHSUNDEEP
javascriptformsselecthtml-selectonchange
Shih-Min Lee
Shih-Min Lee

Reputation: 9690

select onChange not working inside a form

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>

Upvotes: 12

Views: 73526

Answers (5)

Sergio Abreu
Sergio Abreu

Reputation: 2889

Just to bring some tip, not for this case, someone may have added a new and different function that killed the old one.

<select ... onchange="anOldFuncion()">

And in javascript later you did:

selectX.onchange = function(){};  //bye bye function from the tag.

The naming in this code is terrible. I would have choosen:

<select name="viewroom" id="viewroom" onChange="selectRoom()">

Upvotes: 0

Prateek Arora
Prateek Arora

Reputation: 666

Change

<select name="viewroom" id="viewroom" onChange="viewroom()">

to

<select name="viewroom" id="viewroom" onChange="()=>viewroom()">

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

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);
}

Working Demo

Upvotes: 2

Austin Mullins
Austin Mullins

Reputation: 7427

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()">

Upvotes: 5

Teemu
Teemu

Reputation: 23396

Your function name conflicts with name and id of the select, just give another name to the function.

Upvotes: 21

Related Questions