Set value of hidden field in a form using jQuery s val doesn t work

Question

I ve been trying to set the value of a hidden field in a form using jQuery  but without success    Here is a sample code that explains the problem  If I keep the input type to  text   it works without any trouble  But  changing the input type to  hidden   doesn t work     lt html gt        lt head gt           lt script type  text javascript  src  jquery js  gt           lt  script gt           lt script type  text javascript  gt                document  ready function                        button   click function                            input text texens   val  tinkumaster                                                 lt  script gt       lt  head gt        lt body gt           lt p gt              Name               lt input type  hidden  id  texens  name  user  value  texens    gt           lt  p gt           lt button gt              Change value for the text field          lt  button gt       lt  body gt    lt  html gt    I also tried the following workaround  by setting the input type to  text  and then using a  display none  style for the input box  But  this also fails   It seems jQuery has some trouble setting hidden or invisible input fields   Any ideas  Is there a workaround for this that actually works

User · Answer

input name hidden field name    val  newVal      worked for me  when neither     input id hidden field id    val  newVal      nor      hidden field id   val  newVal      did

User · Answer

I was having the same issue  and I found out what was wrong  I had the HTML defined as   lt form action  url  method  post  gt       lt input type  hidden  id  email    gt   lt form gt   lt script gt      function onsomeevent                    email   val  a a com           lt  script gt    Reading the form values on server always resulted in email as empty  After scratching my head  and numerous search   I realized the mistake was not defining the form input correctly  On modifing the input  as shown next   it worked like a charm   lt input type  hidden  id  email  name  email    gt    Adding to this thread in case others have the same issue

User · Answer

If you are searching for haml then this is the answer for hidden field to set value to a hidden field like    input forum id hidden   In your jquery just convert the value to string and then append it using attr property in jquery  hope this also works in other languages also       forum id   attr  val  forum id toString

User · Answer

val didnt work for me  because i m grabbing the value attribute server side and the value wasn t always updated  so i used    var counter   0     a myClickableLink   click function event      event preventDefault       counter                   myInput   attr  value   counter       Hope it helps someone

User · Answer

Simply use syntax below get and set  GET    Script  var a       selectIndex   val      here a variable will hold the value of hiddenfield selectindex   Server side   lt asp HiddenField ID  selectIndex  runat  server  Value  0    gt    SET  var a  10      selectIndex   val a

User · Answer

lt javascript gt    slots     hidden     basket   0       cost per slot       cost per slot   val          cost per slot   parseFloat cost per slot  toFixed 2       for  i 0  i lt  check array length  i              slots    check array i      r n           hidden    check array i  substring 0  8                 basket    basket   parseFloat cost per slot                  Populate the Selected Slots section         selected slots   html slots           Update hidden slots booked form element with booked slots         slots booked   val hidden                Update basket total box     basket   basket toFixed 2           total   html basket

User · Answer

text will fail for a input with a type value of hidden   It s also much more efficient to just use       texens   val  tinkumaster      ID attributes should be unique on a web page  make sure yours are as this may contribute to any problems you re having  and specifying a more complicated selector just slows things down and doesn t look as neat   Example at http   jsbin com elovo edit  using your example code at http   jsbin com elovo 2 edit

User · Answer

Actually  this is an ongoing problem  While Andy is right about the downloaded source   val      and  attr  value       don t seem to actually modify the html  I think this is a javascript problem and not a jquery problem  If you had used firebug even you would have had the same question  While it seems that if you submit the form with the modified values it will go through  the html does not change  I ran into this issue trying to create a print preview of the modified form  doing  form  html    it copies everything okay  including all changes except values changes  Thus  my modal print preview is somewhat useless    my workaround may have to be to  build  a hidden form containing the values they have added  or generate the preview independently and make each modification the user makes also modify the preview  Both are inoptimal  but unless someone figures out why the value-setting behavior does not change the html  in the DOM i m assuming  it will have to do

User · Answer

I had same problem  oddly enough google chrome and possibly others  not sure  did not like      thing   val 0    input type  hidden  id  thing  name  thing  value  1    gt     no change       thing   val  0     input type  hidden  id  thing  name  thing  value  1    gt     no change   but this works          thing   val  no     input type  hidden  id  thing  name  thing  value  no    gt    CHANGES        thing   val  yes     input type  hidden  id  thing  name  thing  value  yes    gt    CHANGES    must be a  string thing

User · Answer

Another gotcha here wasted some of my time  so I thought I would pass along the tip  I had a hidden field I gave an id that had   and    brackets in the name  due to use with struts2  and the selector     model thefield 0    would not find my hidden field  Renaming the id to not use the periods and brackets caused the selector to begin working  So in the end I ended up with an id of model the field 0 instead and the selector worked fine

User · Answer

If you re having trouble setting the value of a hidden field because you re passing an ID to it  this is the solution   Instead of     hidden field id   val id  just do    input id hidden field id    val id   Not sure what the difference is  but it works

User · Answer

Anyone else who is struggling with this  there is a very simple  inline  way to do this with jQuery    lt input type  search  placeholder  Search  value    maxlength  256  id  q  name  q  style  width  300px   onChange      ADSearch   attr  value       q   attr  value     gt  lt input type  hidden  name  ADSearch  id  ADSearch  value    gt    This sets the value of the hidden field as text is typed into the visible input using the onChange event  Helpful  like in my case  where you want to pass on a field value to an  Advanced Search  form and not force the user to re-type their search query

User · Answer

In my case  I was using a non-string  integer  as the parameter of val   which doesn t work  the trick is just as simple as      price   val      price

User · Answer

Using ID      input hidden texens   val  tinkumaster      Using class      input hidden many texens   val  tinkumaster

User · Answer

Finally  I have found a solution and it s a simple one   document getElementById  texens   value    tinkumaster     Works like a charm  No clue why jQuery does not fall back to this

User · Answer

Using val   didn t work for me  I had to use  attr   everywhere  Also I had different types of inputs and had to be pretty explicit in the case of check boxes and select menus   Update textfield      model name   attr  value  nameVal     Update image next to file input      img-avatar   attr  src   avatarThumbUrl     Update boolean  if  isActive            model active   attr  checked   checked      else           model active   attr  checked   null        Update select  with number or string       model framerate   children   each function i  el       var v     el  val        if  v     String framerateVal                el  attr  selected   selected          else             el  attr  selected  null

[jquery] Set value of hidden field in a form using jQuery's ".val()" doesn't work

Examples related to jquery

Examples related to set

Examples related to hidden-fields