By Nimrod Yanai


2018-07-11 22:40:55 8 Comments

I am trying to change the value of an input element (url) based on a selected option (facetselection):

<script src="external.js" type="text/javascript"></script>
<script>
function facetselection(e) {
document.getElementById("ebscohosturl").value = e.target.value;
}
</script>

<input id="url" name="ebscohosturl" type="hidden" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetselection(event)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>

This is based on the solution found here. I also tried this solution. I am getting an error:

Uncaught TypeError: facetselection is not a function
    at HTMLSelectElement.onchange

What am I missing? I defined the function in a script element, and I think the syntax is correct.

3 comments

@Guillaume Georges 2018-07-11 22:51:23

Your error comes from the fact that your function has the same name as your select id : facetselection. It happens because your select is in a form (which it wasn't in your original code example).

Rename either your function or your select id and you should be fine.

It's actually a duplicate of Why JS function name conflicts with element ID? but I can't flag it.

Snippet with reproductible behaviour :

function facetselection(e) {
  document.getElementById("url").value = e.target.value;
}
<form>
<input id="url" name="ebscohosturl" type="text" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetselection(event)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>
</form>

Corrected snippet

function facetSelection(e) {
  document.getElementById("url").value = e.target.value;
}
<form>
<input id="url" name="ebscohosturl" type="text" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetSelection(event)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>
</form>

@Nimrod Yanai 2018-07-11 23:07:18

Sorry, that is of course a mistake made by clipping my original code to just the relevant part. I corrected the original post. In my code the IDs were correct.

@Guillaume Georges 2018-07-11 23:07:55

So everything works fine now?

@Nimrod Yanai 2018-07-11 23:13:14

No, the mistake was when copying the code here, not in the original. In the original the IDs are the same :D I corrected the OP

@Joe Lissner 2018-07-11 22:50:09

EDITED

You're input doesn't have the id you are currently looking for, it needs to change from

<input id="url" name="ebscohosturl" type="text" value="" />

to

<input id="ebscohosturl" name="ebscohosturl" type="text" value="" />

working example:

<script>
  function facetselection(e) {
    document.getElementById("ebscohosturl").value = e.target.value;
  }
</script>

<input id="ebscohosturl" name="ebscohosturl" type="hidden" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetselection(event)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>`

@Nimrod Yanai 2018-07-11 22:58:27

This removed the error message, but the function is not working (the value does not change).

@Joe Lissner 2018-07-11 23:03:39

Fixed the answer

@Nimrod Yanai 2018-07-11 23:06:01

Sorry, that is of course a mistake (I changed the id in the original post. In the code itself it is correct, I simply changed the IDs when creating the post.

@Joe Lissner 2018-07-11 23:12:31

@NimrodYanai I have updated my answer with code this works in my testing.

@Nimrod Yanai 2018-07-11 23:24:44

Thanx. I can see that it works when I try to use only this code snippet, but I still get the error message when I try it in my main code (which is very strange). But this indeed solved the issue, there must be something else interfering with the script element. Thank you!

@MajiD 2018-07-11 22:48:10

you can pass the value directly

also you are getting element by id but passing the input name

function facetselection(e) {
  document.getElementById("url").value = e;
}
<input id="url" name="ebscohosturl" type="text" value="" />
<div id="facets">
  <select id="facetselection" onchange="facetselection(this.value)">
    <option id="nofacet" value="new_url" label="הכל">הכל</option>
    <option id="facetarticles" value="new_url2" label="מאמרים אקדמיים">מאמרים אקדמיים</option>
    <option id="facetbooks" value="new_url3" label="ספרים">ספרים</option>
    <option id="facetebooks" value="new_url4" label="ספרים אלקטרוניים">ספרים אלקטרוניים</option>
    <option id="facetthesis" value="new_url5" label="תזות">תזות</option>
    <option id="facetmaps" value="new_url6" label="מפות">מפות</option>
  </select>
</div>

@Nimrod Yanai 2018-07-11 22:58:43

This didn't work. Still getting the same error message.

@MajiD 2018-07-11 23:02:00

i have changed the input type hidden to text so you can see its working

@Nimrod Yanai 2018-07-11 23:10:55

I am still getting the same error message

Related Questions

Sponsored Content

16 Answered Questions

[SOLVED] Change the selected value of a drop-down list with jQuery

21 Answered Questions

[SOLVED] How can I set the default value for an HTML <select> element?

  • 2010-08-19 01:10:51
  • Jichao
  • 1875716 View
  • 1076 Score
  • 21 Answer
  • Tags:   html html-select

33 Answered Questions

8 Answered Questions

[SOLVED] Get the value in an input text box

20 Answered Questions

18 Answered Questions

[SOLVED] Set a default parameter value for a JavaScript function

21 Answered Questions

[SOLVED] jQuery Get Selected Option From Dropdown

  • 2012-05-18 20:11:54
  • William Kinaan
  • 1119285 View
  • 903 Score
  • 21 Answer
  • Tags:   javascript jquery html

20 Answered Questions

[SOLVED] Get selected value in dropdown list using JavaScript?

2 Answered Questions

[SOLVED] How to change 2 hidden input value with select option value and ID with Javascript

  • 2015-11-05 04:10:19
  • Stratton Weekley
  • 78 View
  • 0 Score
  • 2 Answer
  • Tags:   javascript html

3 Answered Questions

[SOLVED] Change value of input based on select option label

Sponsored Content