What's the best way to hide the 'back' button on the first page of jquery form wizard?

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

Css would not do the trick I'm afraid (speaking out of my limited knowledge of css that is), however something like the code below would do the trick. The step_shown method is used to show/hide the button appropriately (the button will be shown for just a moment when the first step is shown, but is then hidden).

    <script type="text/javascript">
        $(function(){
            var form = $("#demoForm");

            // hide/show the button appropriately when a step is shown
            form.bind("step_shown", function(e, data){
                if(data != undefined && !data.isFirstStep){
                    form.find(":reset").show();
                }else {
                    form.find(":reset").hide();
                }
            });

            form.formwizard({ 
                formPluginEnabled: true,
                validationEnabled: true,
                focusFirstInput : true,
                formOptions :{
                    success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
                    beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
                    dataType: 'json',
                    resetForm: true
                }   
             }
            ).trigger("step_shown"); // trigger once at page load
    });
</script>

I hope this helps

Answer 2

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;
}