I'm writing a webserver app in clojure with Hiccup (and other things). I'm trying to have a check-box enable and disable two drop-down fields with a little JS but I can't make it work.

[:head
[:script "function toggleText(cb, t1, t2) {
    document.getElementById(t1).disabled = !cb.checked;
    document.getElementById(t2).disabled = !cb.checked;
}"]]

[:td (hf/check-box {:on-change (str "toggleText(" (name endtag) "," (name tytag) "," (name tmtag) ")")} endtag)]
[:td (hf/drop-down tytag (range 2013 2031) 2017)]
[:td (hf/drop-down tmtag (range 1 13) 6)]

I'm writing a webserver app in clojure with Hiccup (and other things). I'm trying to have a check-box enable and disable two drop-down fields with a little JS but I can't make it work.

[:head
[:script "function toggleText(cb, t1, t2) {
    document.getElementById(t1).disabled = !cb.checked;
    document.getElementById(t2).disabled = !cb.checked;
}"]]

[:td (hf/check-box {:on-change (str "toggleText(" (name endtag) "," (name tytag) "," (name tmtag) ")")} endtag)]
[:td (hf/drop-down tytag (range 2013 2031) 2017)]
[:td (hf/drop-down tmtag (range 1 13) 6)]

• javascript
• html
• clojure
• clojurescript
• hiccup

Share Improve this question Follow edited Jul 5, 2017 at 18:01 Chris Murphy 6,50922 gold badges2525 silver badges4646 bronze badges asked Jul 5, 2017 at 17:23 KingfranzKingfranz 31433 silver badges1313 bronze badges 4

• You don't have to embed. One thing you might have missed is the cljs->js macro, also known as #js. – Chris Murphy Commented Jul 5, 2017 at 17:46
• @Kingfranz could you clarify if you're using "real" Hiccup on the server-side in .clj files, or else Hiccup-style syntax client-side, using Reagent in .cljs files. – Scott Commented Jul 5, 2017 at 20:00
• Yes, this is "real" server-side Hiccup :-) – Kingfranz Commented Jul 5, 2017 at 21:08
• The clj->js sound interesting but it seems to be more for defining data than to set properties in elements. – Kingfranz Commented Jul 5, 2017 at 21:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

on-change is a React handler and won't work in server-side HTML.

If you don't want to create a separate JS file, you can use the onclick attribute: the below should work (provided that the hf/check-box function creates an element with the given properties):

[:td (hf/check-box
      {:onclick (str "toggleText(" (name endtag) ","
                     (name tytag) "," (name tmtag) ")")}
      endtag)]

Thanks Aleph, your fix together with adding getElementById for the cb parameter in the function did the trick!

The function now looks like this

[:script "function toggleText(cb, t1, t2) {
    document.getElementById(t1).disabled = !document.getElementById(cb).checked;
    document.getElementById(t2).disabled = !document.getElementById(cb).checked;}"]

And I simplified the Hiccup code too (not passing the tags as parameters) so it looks like this

[:td (hf/check-box {:onclick (str "toggleText('endtag','toyear','tomonth')")} :endtag (some? (:toyear m)))]
[:td (hf/drop-down :toyear (range 2013 2031))]
[:td (hf/drop-down :tomonth (range 1 13))]