Question

We have the HTML structure used with jquery-form-wizard:

<form>
  <div class='page1'>...</div>
  <div class='page2'>...</div>
  ...
  <div class='pagen'>...</div>

  <button type='reset'>...</button>
  <button type='submit'>...</button>
</form>

Now, the reset and submit button are managed by jquery-form-wizard. The first page has the reset button (titled “Back”) disabled, and the submit button functions as “Next”. When moving to page2, both buttons are enabled (the Next button is first disabled during the server-side validation, then both are enabled). This proceeds until the last page, where instead of Next we have Submit.

Now, I would like to modify the behavior of the reset/Back button on the first page. Instead of disabling it, I would like to hide it.

Can I easily achieve this via css without touching the code of jquery-form-wizard? Or should I just modify it and add a “hide first back button” option?

Answer 1

I modified jquery-form-wizard to add the page’s class to the form (patch).

After this modification, all I need to do it add this to my css:

form.formwizard-page1 input[type=reset] {
    display:none;
}