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?

score 0 · Answer 1 · answered Feb 25 '12 at 19:10

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

I don't like the potential blinking effect this can cause, I'll think I 'll just an option to do this. — ripper234, Feb 26 '12 at 07:45

score 0 · Accepted Answer · answered Feb 26 '12 at 08:48

0

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

answered Feb 26 '12 at 08:48

ripper234

222,824
274
634
905

If you look at the button you will see there is a much easier way of hiding it rather than patching the js. For example, when the back button is disabled, it has a navigation-ui-state-disabled class. Taking that class and adding .navigation-ui-state-disabled class { display: none; } will hide it whenever you don't need it. On the next pages, it appears again because that class is removed. – o_O Jun 22 '12 at 00:59

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

2 Answers2