JQuery: toggle hidden field value

Question

I’ve been looking for how to do this for some time. In my form, I would like to switch the value back and forth (true ↔ false) by clicking the div.

How do you switch true / false using jQuery?

---

<input id="myHiddenField" name="my[hidden_field]" type="hidden" value="false"> <a id="myDiv">Click Me</a> 

I tried

 $('#myDiv').on('click'), (function() { var hiddenField = $('#myHiddenField'), val = hiddenField.val(); hiddenField.val(val === "true" ? "false" : "true"); }); 

but nothing: (

jsfiddle: http://jsfiddle.net/MV3A4/2/

Answer 1

This is pretty straight forward. Add a click handler to your div and update the value of your input using the val () method.

You did not post your markup, so I used some placeholder identifiers. You will need to update them for selectors working in your context:

Working demo

 $('#myDiv').on('click', function() { var hiddenField = $('#myHiddenField'), val = hiddenField.val(); hiddenField.val(val === "true" ? "false" : "true"); }); 

Note that input values ​​are always strings, so they will not be true Boolean.

Answer 2

Only with javascript:

 document.getElementById('myClickableDiv').addEventListener('click',function(){ var value =document.getElementById('myHiddenField').value(); if(value === "true"){ document.getElementById('myHiddenField').value = "false"; }else{ document.getElementById('myHiddenField').value = "true"; } }; 

Answer 3

The jQuery code you tried has an error, there should not be a valid character before the 'click'