• Resolved cobberas63

    (@cobberas63)


    Hi there

    Can I programmatically reset a toggle button to its original state, using jQuery?

    e.g. “Start” button on https://theworkinmotion.com/question/simple-facilitation-guide/

    I need the “Clear all” button on this page to reset the entire form, including resetting all the toggle buttons to their original state when the form first loaded.

    At the moment I can only do this by reloading the entire page, which is too slow and clunky.

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Jules Colle

    (@jules-colle)

    You could, but to be honest the togglebutton is kind of a crappy control that I developed as kind of an experiment and I left it in the plugin. If I would have to create a form like the one you are creating, I would use a simple checkbox, and style it like a button.

    An example: https://bdwm.be/contact-form-7-toggle-buttons/

    The benefit of doing it this way is that resetting the form will also uncheck any checked boxes and your form will be restored completely to the initial state.

    If for some reason you don’t like this approach, you could hook into the reset event of the form, and change the button values manually.

    jQuery('.wpcf7-form').on('reset', function(e) {
        // change value of togglebuttons here.
    });
    
    Thread Starter cobberas63

    (@cobberas63)

    Thanks Jules. Yes, the toggle button is a bit clunky but at this stage I’ll keep it as it’s less work than restyling it for navigation (I want form navigation buttons to look different from form response buttons, for which I use checkboxes as you describe in that super helpful article).

    I also have some pages with multiple forms but only 1 reset button, and I want all forms on the page to reset with 1 button. So I have this –

    (function($) {
        $("input[type=reset].button").click(function(){
    
              //clear the contents of all forms on the page
              $(".wpcf7 form").trigger("reset");
    
              //reset the toggle buttons
              $("button.togglebutton-start").val("Start");
              $("button.togglebutton-start").text("Start");
              $("button.togglebutton-next").val("Next");
              $("button.togglebutton-next").text("Next");
              $("button.togglebutton-more").val("Add TA");
              $("button.togglebutton-more").text("Add TA");
    
              $('html, body').animate({scrollTop:0}, 'fast');
        });
    })( jQuery );

    It turns out that I need to change both the value AND the text of the toggle buttons separately, as simply changing the value programmatically doesn’t change the text. Is this what you would expect? Or am I missing something that will change them both together?

    Plugin Author Jules Colle

    (@jules-colle)

    Yeah, seems like the button element can have both a value and a text. That’s another reason why I should have never created this tag in the first place.. I think I will hide it in a future version of the plugin. Obviously I will make sure you can still add it by typing the tag an it will keep working, so no worries there ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reset a toggle button programmatically’ is closed to new replies.