Title: Reset a toggle button programmatically
Last modified: August 9, 2021

---

# Reset a toggle button programmatically

 *  Resolved [cobberas63](https://wordpress.org/support/users/cobberas63/)
 * (@cobberas63)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/reset-a-toggle-button-programmatically/)
 * 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/](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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Freset-a-toggle-button-programmatically%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Jules Colle](https://wordpress.org/support/users/jules-colle/)
 * (@jules-colle)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/reset-a-toggle-button-programmatically/#post-14754128)
 * 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/](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](https://wordpress.org/support/users/cobberas63/)
 * (@cobberas63)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/reset-a-toggle-button-programmatically/#post-14756389)
 * 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](https://wordpress.org/support/users/jules-colle/)
 * (@jules-colle)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/reset-a-toggle-button-programmatically/#post-14760798)
 * 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.

 * ![](https://ps.w.org/cf7-conditional-fields/assets/icon-256x256.png?rev=2072595)
 * [Conditional Fields for Contact Form 7](https://wordpress.org/plugins/cf7-conditional-fields/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cf7-conditional-fields/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cf7-conditional-fields/)
 * [Active Topics](https://wordpress.org/support/plugin/cf7-conditional-fields/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cf7-conditional-fields/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cf7-conditional-fields/reviews/)

## Tags

 * [reset](https://wordpress.org/support/topic-tag/reset/)

 * 3 replies
 * 2 participants
 * Last reply from: [Jules Colle](https://wordpress.org/support/users/jules-colle/)
 * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/reset-a-toggle-button-programmatically/#post-14760798)
 * Status: resolved