Javascript to set hidden form value on drop down change

Question

New to javascript  but I m sure this is easy   Unfortunately  most of the google results haven t been helpful   Anyway  I want to set the value of a hidden form element through javascript when a drop down selection changes   I can use jQuery  if it makes it simpler to get or set the values

User · Answer

lt form gt     lt input type  hidden  name  selval  gt     lt select onchange  this form selval value this selectedIndex  gt       lt option gt val1 lt  option gt       lt option gt val2 lt  option gt     lt  select gt   lt  form gt    pure javascript from within a form

User · Answer

function         myselect   change function            myhidden   val      myselect option selected   text

User · Answer

If you have HTML like this  for example    lt select id  myselect  gt       lt option value  1  gt A lt  option gt       lt option value  2  gt B lt  option gt       lt option value  3  gt C lt  option gt       lt option value  4  gt D lt  option gt   lt  select gt   lt input type  hidden  id  myhidden  value    gt    All you have to do is bind a function to the change event of the select  and do what you need there    lt script type  text javascript  gt    function             myselect   change function                if changed to  for example  the last option  then              this  find  option selected   text      D              this  val      4            get whatever value you want into a variable         var x     this  val               and update the hidden input s value             myhidden   val x                lt  script gt    All things considered  if you re going to be doing a lot of jQuery programming  always have the documentation open  It is very easy to find what you need there if you give it a chance

User · Answer

Just to be different  changed my answer so that this question doesn t have 5 answers with the same code    lt html gt   lt head gt      lt title gt Page lt  title gt        lt script src  jquery-1 3 2 min js  gt  lt  script gt      lt script gt           function                var select      body   append   lt form gt  lt  form gt    children  form                    append   lt input type  hidden  value      gt    children  input type hidden                     attr  id    hiddenValue   end                    append   lt select gt  lt  select gt    children  select                    attr  id    dropdown                    change function                         alert   this  val                                       each   one  1  two  2  three  3  four  4  five  5    function txt  val                   select append   lt option value      val      gt     txt     lt  option gt                                lt  script gt   lt  head gt      lt body gt  lt  body gt   lt  html gt

User · Answer

This is with jQuery       selectFormElement   change  function             hiddenFormElement   val  newValue           In the html   lt select id  selectFormElement  name       gt       lt  select gt   lt input type  hidden  name       id  hiddenFormElement    gt

User · Answer

I d fought with this a long time     myelement   val x  just wasn t working     until I realized the   construction requires an ID  not a NAME   So if   val x  doesn t work   is your problem  check your element and be sure it has an ID   It s an embarrassing gotcha  but I felt I had to share to save others much hair-tearing

User · Answer

Here you can set hidden s value at onchange event of dropdown list         myDropDown   bind  change   function            myHidden   val  setted value          your hidden and drop down list      lt input type  hidden  id  myHidden    gt    lt select id  myDropDown  gt      lt option value  opt 1  gt Option 1 lt  option gt      lt option value  opt 2  gt Option 2 lt  option gt      lt option value  opt 3  gt Option 3 lt  option gt   lt   select gt

User · Answer

Plain old Javascript    lt script type  text javascript  gt   function changeHiddenInput  objDropDown        var objHidden   document getElementById  hiddenInput        objHidden value   objDropDown value       lt  script gt   lt form gt       lt select id  dropdown  name  dropdown  onchange  changeHiddenInput this   gt           lt option value  1  gt One lt  option gt           lt option value  2  gt Two lt  option gt           lt option value  3  gt Three lt  option gt       lt  select gt        lt input type  hidden  name  hiddenInput  id  hiddenInput  value      gt   lt  form gt

[javascript] Javascript to set hidden form value on drop down change

Examples related to javascript

Examples related to jquery