CODEWITHSUNDEEP
javascriptjqueryhtml
mirvat k
mirvat k

Reputation: 21

How to make onClick JS function work only on radio buttons

I am using formslider library for one of the forms on my website, as in the demo the slide moves to the next set of question-based on a click event on any radio button (answers).

Now when I'm trying to add checkboxes for people to select multiple choices from the form it doesn't work. what happens instead the slider goes to the next slide once you click on the checkbox instead of waiting on the user to select all of them and then click on continue (input button type)

I noticed one of the functions in the library is NavigateOnClick here's its code.

JS code

this.NavigateOnClick = (function(i) {
  function n() {
     return this.onClick = r(this.('input[type="radio"]').onClick, this), this.init = r(this.init, this), n.__super__.constructor.apply(this, arguments)
  }
  return (
    o(n, i),
    (n.config = {
      actions: [
        {
          selector: ".answer",
          action: "next",
          wait: 200
        },
        {
          selector: ".next-button",
          action: "next",
          wait: 10
        },
        {
          selector: ".prev-button",
          action: "prev",
          wait: 10
        }
      ]
    }),
    (n.prototype.init = function() {
      var i, n, e, r, o;
      for (o = this.config.actions, e = 0, r = o.length; e < r; e++)
        (n = o[e]),
          (i = t(n.selector, this.container)),
          i.on("mouseup", n, this.onClick);
    }),
    (n.prototype.onClick = function(t, i) {
      if ((t.preventDefault(), !this.timeout))
        return (this.timeout = setTimeout(
          (function(i) {
            return function() {
              return i.formslider[t.data.action].call(), (i.timeout = null);
            };
          })(this),
          t.data.wait
        ));
    }),
    n
  );
})(AbstractFormsliderPlugin);

I tried appending input type to this.onClick but it doesn't work. notice how it selects the class .answer

to have a clearer view of how the form looks like, here's a snippet of my HTML below

HTML code

<div class="slide" data-role="question" data-id="9">
    <div class="headline">Choose all of the correct options</div>
    <input type="hidden" name="slides[8][question]" value="">
    <div class="answers">
        <div class="answer" data-next-id="5">
            <label class="inner-answer" for="slides[8][answer]">
                <input id="question_8_answer_" name="slides[8][answer]" value="option 1" type="checkbox">
                <div class="text">Option 1</div>
            </label>
        </div>
    </div>
</div>

What I'm trying to achieve is to make it only navigate on clicking input type radio button and button or the opposite not to navigate on clicking input type checkbox and text.

Upvotes: 0

Views: 163

Answers (1)

ganjim
ganjim

Reputation: 1416

I think actions in n.config object choose how your code functions, you have an action with selector ".answer" so any div with class answer will trigger next action.

Changing ".answer" selector with 'input[type="radio"]' will probably fix your issue.

Upvotes: 0

Related Questions