How to clear a form?

[hjrnunes]

After submitting I need to clear a form that is a bunch of checkboxes.

I've tried reset! in the on-click method of the button. I can see that the form atom is effectively reseted when I print it to the console, but the form doesn't update.

If I try to submit again immediately, even though the form still has the same checkboxes selected, the form atom is actually empty.

So how do I clear a form and have it updated? Events don't seem to be of help as I want to clear the form only after submit...

[yogthos]

The form should clear when you reset the atom. Make sure that you're using the Reagent atom as opposed to a regular Clojure atom. You should have something like [reagent.core :as reagent :refer [atom]] required in the namespace declaration.

[hjrnunes]

Hmm, strange. I've double checked and it is a reagent atom.

Could it be because I pass the form atom into the template function? I'm doing the reset in the on-click hander of the button, which is part of the form template:

[bind-fields (annotate-form-template dataset item user form) form]

[yogthos]

Yeah, that's a bit odd, for example I just tested and both these ways work:

(defn home-page []
  (let [doc (atom nil)]
    (fn []
      [:div
       [:p (str @doc)]
       [bind-fields
         [:input.form-control {:field :text :id :first-name}]
         doc]
       [:button
        {:on-click #(reset! doc nil)}
        "clear"]])))

(defn home-page []
  (let [doc (atom nil)]
    (fn []
      [:div
       [:p (str @doc)]
       [bind-fields
         [:div
          [:input.form-control {:field :text :id :first-name}]
          [:button
           {:on-click #(reset! doc nil)}
           "clear"]]
         doc]])))

Once the button is clicked, the form and the atom both clear.

[hjrnunes]

Hey,

there's actually a bug here, possibly two - it's related with checkboxes and that's why your examples work fine.

Try this though:

(defn annotate-pane []
  (let [doc (atom nil)]
    (fn []
      [:div
       [:p (str @doc)]
       [bind-fields
        [:input.form-control {:field :checkbox :id :first-name}]
        doc]
       [:button
        {:on-click #(reset! doc nil)}
        "clear"]])))

I've just replaced the input type: :checkbox for :text You'll find that the checkbox tick doesn't update even though the form atom does. Furthermore, it seems to remain confused after that. Here's what happens to me:

0 - box unticked, form empty 1 - tick box: box ticked, form contains {:first-name true} 2 - click button: box ticked, form empty - should be box unticked 3 - untick box: box unticked, form contains {:first-name true} - should be {:first-name false} 4 - tick box: box ticked, form contains {:first-name false} - should be {:first-name true}

I'll look at the code and see if I can figure out what's happening.

[hjrnunes]

So I've looked into this, but couldn't make any progress. I can't figure out how the actual ticking works in the checkbox i.e. what actually tells it that it checked or unchecked?

It seems clear to me that what's happening is that when you reset the atom, that doesn't flip the checked/unchecked transition. The underlying mechanics seem fine.

[yogthos]

Yeah, this is definitely odd, I'll try dig into this when I get a chance.

[hjrnunes]

So I gave it another try today. I think I fixed it. Tale a look at the PR.

[sivakumargsk]

Problem with checked checkbox

I got a problem with a checkbox in reagent-forms. For old version it works fine [reagent-forms "0.5.21"] but for new version [reagent-forms "0.5.22"] it doesn't work well.

The problem is the checkbox is not turned into unchecked when I click on the checkbox. But my atom is changed.

(defn mycheckbox []
  (let [doc (atom {:name true})]
    (fn []
      [:div
       [:p (str @doc)]
       [bind-fields
        [:input {:field :checkbox :id :name}]
        doc]
       [:button
        {:on-click #(reset! doc nil)} "clear"]])))

[hjrnunes]

Yep, this is a problem. I can reproduce this on 0.5.24

Created a new issue. See #110