Troubleshoot JavaScript onchange

Question

When I use these scripts (inline and external) together only second one works, and first one - not.

First one (inline script) submits the form and loads the list:

<select id="my-select" name="show_user_todo" onchange="document.form_buttons.submit()">

Second one sets the color of select according to selected option:

<script type="text/javascript">
  var mySelect = document.getElementById('my-select');

  var setBgColor = function (select) {
    select.style.color = select.options[select.selectedIndex].style.color;
  };

  mySelect.onchange = function () {
    setBgColor(this);
  };
</script>

because here you are not adding eventListeners but just overriding it — vinayakj, Jun 20 '15 at 20:21
can you show me were? im not javascripter, so its hard to understand.... :/ — Sidas, Jun 20 '15 at 20:25

score 0 · Accepted Answer · answered Jun 20 '15 at 20:40

0

you can do like this

<select id="my-select" name="show_user_todo">

<script type="text/javascript">
    var mySelect = document.getElementById('my-select');

    var setBgColor = function (select) {
      select.style.color = select.options[select.selectedIndex].style.color;
    };

    mySelect.onchange = function () {
      setBgColor(this);
      document.form_buttons.submit();
    };
</script>

answered Jun 20 '15 at 20:40

vinayakj

5,591
3
28
48

Do you know what to do... Now it works, but when select and it refreshes color vanishes... What to do now? :/ – Sidas Jun 20 '15 at 20:47
you need to set the color once list is loaded after submit.. so basically set the color in submit function when you are done loading the list – vinayakj Jun 20 '15 at 20:50
can you create a fiddle with your code with form submit code also – vinayakj Jun 20 '15 at 20:54
2

@Sidas When you submit a form, the page is reloaded with what the server sends back. If you don't want to reload the page, use AJAX. – Barmar Jun 20 '15 at 20:55
yes.. If `select` is part of `form_buttons` form then you need to use ajax or else you need to send the selected option to the server and send back again to set it selected and set the color accordingly but thats not recommended. – vinayakj Jun 20 '15 at 20:58
so how can i use this AJAX in order to keep color and load the info – Sidas Jun 20 '15 at 21:01
http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php#answer-27816373 – vinayakj Jun 20 '15 at 21:04
How can I configure this with my scripts? – Sidas Jun 20 '15 at 21:10
you need to understand the basic examples, you can find in above comment's url. – vinayakj Jun 20 '15 at 21:34

Troubleshoot JavaScript onchange

1 Answers1