什么'这是隐藏'背面'jquery表单向导第一页上的按钮

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

本文关键字：第一页 向导 按钮 表单 背面 隐藏 什么 jquery      更新时间：2023-09-26

我们有jquery表单向导使用的HTML结构：

<form>
  <div class='page1'>...</div>
  <div class='page2'>...</div>
  ...
  <div class='pagen'>...</div>
  <button type='reset'>...</button>
  <button type='submit'>...</button>
</form>

现在，重置和提交按钮由jquery表单向导管理。第一页禁用了重置按钮（标题为"返回"），提交按钮的功能为"下一步"。当移动到第2页时，两个按钮都被启用（在服务器端验证期间，"下一步"按钮首先被禁用，然后两个按钮均被启用）。这一直进行到最后一页，在那里我们有Submit而不是Next。

现在，我想修改第一页上重置/返回按钮的行为。与其禁用它，我想隐藏它。

我可以在不接触jquery表单向导代码的情况下通过css轻松实现这一点吗？还是我应该修改它并添加一个"隐藏第一个后退按钮"选项？

Css恐怕做不到（就我对Css的有限了解而言），但下面的代码会起到作用。step_shown方法用于适当地显示/隐藏按钮（当显示第一个步骤时，按钮只会显示一小段时间，但随后会被隐藏）。

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

我希望这能帮助

我修改了jquery表单向导，将页面的类添加到表单中（补丁）。

在这个修改之后，我所需要做的就是将它添加到我的css中：

form.formwizard-page1 input[type=reset] {
    display:none;
}
相关文章：